VVibeCoding 助手
💡01 阶段 · 入门

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

不用懂任何代码,跟着做:新建项目、说清楚需求、让 Codex 写出来、打开预览、提修改意见。

30 分钟 · ✅ 5 个实操任务

目标

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

第一步:打开项目文件夹

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

第二步:把这段话发出去

直接复制下面这段提示词,发给 Codex:

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

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

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

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

第三步:等它做完,打开预览

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

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

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

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

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

这一节你收获了什么

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

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

下一步

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