Codex 路线：30 分钟做出你的第一个网页

目标

这一节只做一件事：在 30 分钟内，让 Codex 帮你做出一个能打开的网页。 你不需要理解任何代码。

术语提示：网页 = 浏览器里打开的页面；浏览器 = 上网用的软件（Chrome、Edge、手机自带浏览器）；预览 = 在浏览器里打开看看效果。

第一步：打开项目文件夹

打开 Codex，选择你上一节建好的 my-first-project 文件夹。

第二步：把这段话发出去

直接复制下面这段提示词，发给 Codex：

帮我在这个文件夹里做一个个人介绍网页。我是林晓，喜欢摄影和咖啡，想做一个干净明亮的单页。

页面需要包含：
1. 顶部大标题「你好，我是林晓」
2. 一句自我介绍
3. 三张占位图片的位置
4. 一个「联系我」的按钮
5. 页面底部写上「用 vibecoding 制作」

全部用简体中文。做完之后告诉我怎么在浏览器里打开它。

如果担心隐私，把名字和爱好换成你自己的就好。提示词里「包含什么」「什么风格」「怎么算做完」就是后面课程会详细讲的写法。

占位图片 = 先用一个灰色占位框代替照片的位置，之后可以换成你自己的图片，不影响先跑通流程。

第三步：等它做完，打开预览

Codex 完成后，通常会在界面里给你预览按钮，或者告诉你运行命令。照着它说的做，在浏览器里看到页面就算成功。

第四步：提第一条修改意见

第一次的页面大概率不完全是你想的。没关系，直接说：

做得不错！我想把主色调改成橙色，再把「联系我」按钮放到自我介绍下面。帮我改一下。

看着它改完、刷新页面。恭喜，你已经完成了一次完整的「说需求 → 验收 → 修改」循环。

常见卡点（第一次最容易遇到）

现象	原因	怎么办
页面打不开	可能没运行成功	把界面提示贴给 Codex，让它解决
界面报红字	程序出错了	报错是线索，原样贴给 Codex
Codex 半天没反应	任务比较重	等一会儿，或让它拆小：「先只做标题部分」
做完不是我想要的	需求没说清	用第四步的话术提具体修改

这一节你收获了什么

• 一个真实存在、能在浏览器里打开的网页
• 一次完整的 vibecoding 体验
• 一个非常重要的认知：改，比从零做更常见

如果 30 分钟没做完，别灰心，卡在哪里就把报错或界面截图发给 Codex，让它自己解释和修复。

下一步

你已经跑起来了。但很多人到这一步会卡住：想让 AI 做更复杂的东西时，总是「说不清楚」。下一模块，我们专门学怎么写提示词。