Codex 路线:30 分钟做出你的第一个网页
不用懂任何代码,跟着做:新建项目、说清楚需求、让 Codex 写出来、打开预览、提修改意见。
⏱ 30 分钟 · ✅ 5 个实操任务
目标
这一节只做一件事:在 30 分钟内,让 Codex 帮你做出一个能打开的网页。 你不需要理解任何代码。
第一步:打开项目文件夹
打开 Codex,选择你上一节建好的 my-first-project 文件夹。
第二步:把这段话发出去
直接复制下面这段提示词,发给 Codex:
帮我在这个文件夹里做一个个人介绍网页。我是林晓,喜欢摄影和咖啡,想做一个干净明亮的单页。
页面需要包含:
1. 顶部大标题「你好,我是林晓」
2. 一句自我介绍
3. 三张占位图片的位置
4. 一个「联系我」的按钮
5. 页面底部写上「用 vibecoding 制作」
全部用简体中文。做完之后告诉我怎么在浏览器里打开它。
如果担心隐私,把名字和爱好换成你自己的就好。提示词里「包含什么」「什么风格」「怎么算做完」就是后面课程会详细讲的写法。
第三步:等它做完,打开预览
Codex 完成后,通常会在界面里给你预览按钮,或者告诉你运行命令。照着它说的做,在浏览器里看到页面就算成功。
第四步:提第一条修改意见
第一次的页面大概率不完全是你想的。没关系,直接说:
做得不错!我想把主色调改成橙色,再把「联系我」按钮放到自我介绍下面。帮我改一下。
看着它改完、刷新页面。恭喜,你已经完成了一次完整的「说需求 → 验收 → 修改」循环。
这一节你收获了什么
- 一个真实存在、能在浏览器里打开的网页
- 一次完整的 vibecoding 体验
- 一个非常重要的认知:改,比从零做更常见
如果 30 分钟没做完,别灰心,卡在哪里就把报错或界面截图发给 Codex,让它自己解释和修复。
下一步
你已经跑起来了。但很多人到这一步会卡住:想让 AI 做更复杂的东西时,总是「说不清楚」。下一模块,我们专门学怎么写提示词。