A Personal Website is the Best Project to Get Started with Codex

In the AI era, a personal website is the best resume.

Yesterday, I released a demo of my personal website, which received nearly 100,000 views across the network. Many friends sent private messages asking about the production method.

https://x.com/Saccc_c/status/2071508004772475209

Thanks to everyone's love, I will introduce in detail how to use Codex to make a personal website in your own style within 2 hours.

General steps: Organize website content documents — Use taste skill to generate web page reference images — Generate material images separately — Use Frontend App Builder skill to replicate web pages

(Detailed steps follow)

Step 1: Use Codex to organize detailed website content documents

Express your personal information and the content the website needs to convey to Codex in detail, and let it organize a detailed structured document.

My document roughly includes the following:

• Sac's personal information and IP positioning
• Number of pages, structure, and style
• Overall design direction and layout

Small tip: You can use a Chrome plugin to let Codex view your social media to help you supplement information

Step 2: Use taste skill to generate high-quality web page reference images

Use the imagegen-frontend-web skill in taste skill, combined with the website content document, to generate detailed reference images for each page.

GitHub address: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

This is my prompt:

The resulting reference image effect is as follows:

Note: The imagegen-frontend-web skill in taste skill allows Codex to have more aesthetic sense when generating images, and the screen will have a more design feel.

Step 3: Analyze and dismantle the reference image structure, and generate images for key materials separately

After obtaining the complete reference image, key materials for each web page need to be generated separately. We can directly input in the dialog box:

1This is the web page reference image I have currently generated. Please analyze their structure page by page and help me judge:
21. Which parts can be implemented with code
32. Which key visual elements need to generate materials separately
4Don't start writing code yet, give me a material dismantling suggestion first.

Then use ImageGen to generate key material images to ensure consistency with the details in the reference images.

For example, the avatar material in my personal website:

Step 4: Use Codex's built-in Frontend App Builder skill to replicate the web page reference image into a real web page

Submit the previously determined reference images and material images to Codex for web page replication.

The Frontend App Builder skill in the Build Web Apps plugin is used here. It treats the reference image as a design draft and performs high-fidelity restoration according to a set of structured processes.

Reference prompt for replicating the web page:

The replication effect is as follows: