喂饭级教学，Codex从0-1搭建个人网站

1. 基础运行版本

grill me梳理需求（问就是它在网上很有名，也确实蛮好用）

下面分享我的prompt

接下来你会经历多重拷问，按自己本身的需求回答即可，
最后会得到：

• ✅ 网站需求文档
• ✅ 页面线框图

初稿

Codex里创建新的项目

将【需求文档】+【线框图】+【个人简历】+【作品集】全部附上发给它

添加sites的插件（Codex输入框左下角的+号键），并附上我在@小羊同学那学的prompt作为参考

然后…你可以去洗漱、吃饭、干点别的事情。

等待一个世纪之后，会收获一个：
「看起来还不错，但实际上完全不能直接使用」的网站。

✅但总的来说codex根据简历生成在网站上的文案还不错，可以保留。

⚠️ 小tips：修改时一次只改一个模块，改多了它容易顾此失彼。

2. 定视觉

整套流程里，最帮我省时间的其实是 PPT。（毕竟是吃饭的家伙事，用起来就是得劲。）

ppt排版

打开ppt，将存下来的素材全部重新排版，不用做的很精细
关键是要通过ppt将每个模块的大概排版确定下来
（下面是我使用的ppt截图）

相比文字描述，一张 PPT 截图能直接告诉 ai

• 图片应该放哪里、页面比例是多少、什么内容应该突出；哪些元素需要保留。

相当于提前给网站画了一张「视觉施工图」

截图交给任意免费大模型（我用的豆包，免费版的就行），生成 【prompt】

示例：

（记得告诉ai你所使用的架构，我这次用的是react+vite，不用知道它是个什么，直接和ai说就行）

❗️划重点：这个阶段千万别加交互动效！不然后面生成Figma design会缺界面。

【prompt】再注释进codex对应要修改的界面

✅这个时候你已经拿到了一个，视觉效果大致不错基本符合你审美的网页

❌依旧很多细节需要修改（i.e.对齐、间距和装饰线条通常还需要继续调整）

3. 细节调整

本来不想为了做个网站学Figma，但光靠文字和截图真的很难调准细节。最后还是把页面导进了Figma。

Codex → Figma

准备好Figma账户并且在Codex里下载Figma的插件

等待处理完成之后网页就会推送至你的Figma账号中

等网页推送到Figma账号后，你会发现还是不能直接拖拽元素。这时候需要一层一层点开左边的【layer】，再在右边【Auto layout】→【Flow】调成Freeform，直到可以自由拖拽你想动的元素。

按模块调整之后Figma→ Codex

可以参考我的prompt

✅这个时候你已经拿到了一个，基本完全体的网页了！

4. 这个时候就可以用注释的方式让Codex在特定的地方加上交互动效了

可以直接用注释的方式告诉ai你想要在什么地方加什么样的动效（脑子里没数的话可以用react bits，它是一个动效素材库，网上教程很多，搜一下就有～）

• 加了代码之后有些地方可能不会运行，这个时候把你的问题截图给codex叫它自己修就好

5. 调试+上线

我最终采用的上线方式是：将代码上传到 GitHub通过 → Cloudflare Pages 部署。

• 上线前，我让 Codex 检查手机端适配、按钮链接、页面跳转和动效是否正常。
• 如果受不了网页自适应拉伸，可以将页面宽度限制在一定的区域，可以参考我下面的prompt（1200px是我测试下来觉得合适的宽度）

• 部署上线：@小羊同学 的主页里有详细的教程
• 刚部署到cloudflare的时候可能会出现无法找到页面的状态，等待一下即可。如果依旧不行截图问codex就行