AI时代，个人网站就是最好的简历。
昨天我发布了个人网站demo，全网收获了近10万的浏览，许多朋友私信我制作方法。
https://x.com/Saccc_c/status/2071508004772475209
承蒙大家的喜欢，我将详细介绍如何用Codex在2小时内做出属于你自己风格的个人网站。
总体步骤： 整理网站内容文档 — 使用 taste skill 生成网页参考图 — 单独生成素材图片 — 用Frontend App Builder skill 复刻网页
（详细步骤如下）
第一步：用 Codex 整理详细的网站内容文档
和 Codex 详细表达自己的个人信息和网站需要传递的内容，让其整理一份详细的结构化文档。
我的文档大致包括了以下内容：
- Sac 个人信息和IP定位
- 页面数目、结构和风格
- 整体的设计方向和布局
小 tips: 可以利用 Chrome 插件让 Codex 查看你社媒，帮你补充信息
第二步：利用 taste skill 生成高质量网页参考图
使用 taste skill 里的 imagegen-frontend-web skill，结合网站内容文档，生成每一个页面的详细参考图。
GitHub地址：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
这是我的提示词：
得到的参考图效果如下：
注：taste skill 里的 imagegen-frontend-web skill能让 Codex 在生成图片时更有审美，画面会更具设计感
第三步：分析拆解参考图结构，关键素材单独生成图片
在得到完整的参考图后，各个网页的关键素材需要单独生成。我们可以直接在对话框输入：
1这是我目前生成好的网页参考图。请你逐页分析它们的结构，帮我判断：21. 哪些部分可以用代码实现32. 哪些关键视觉元素需要单独生成素材4先不要开始写代码，先给我一份素材拆解建议。
然后利用 ImageGen 生成关键素材图片，保证和参考图里的细节一致。
例如我个人网站中的头像素材：
第四步：利用Codex内置的Frontend App Builder skill将网页参考图复刻成真实网页
把前面确定好的参考图和素材图片提交给 Codex 进行网页复刻。
这里用到的是 Build Web Apps 插件里的 Frontend App Builder skill，它会把参考图当成设计稿，并按照一套结构化流程进行高保真还原。
复刻网页的参考提示词：
复刻的效果如下：
