第 3 篇：从 0 开发第一个项目：用 Codex 做电商网站

本篇目录

1. 本篇最终要做出什么
2. 创建项目文件夹
3. 输入第一个完整项目需求
4. 等待 Codex 创建文件
5. 启动本地预览
6. 如何验收第一个版本
7. 让 Codex 自动检查问题
8. Plan 模式是什么
9. 用 Plan 模式把 HTML 项目迁移到 Next.js
10. 右侧浏览器怎么用
11. 页面批注怎么用
12. 文件树和终端怎么用
13. 本篇常见问题
14. 本篇检查清单

1. 本篇最终要做出什么

我们要用 Codex 创建一个电商网站。

页面包括：

• 首页 Hero 区
• 商品分类
• 热销商品
• 优惠活动
• 购物车入口
• 用户评价
• 联系方式

技术要求：

• 使用 HTML、CSS、JavaScript。
• 不使用复杂框架。
• 适配手机屏幕。
• 可以本地预览。

最终效果应该是一个可以打开的静态网页。

2. 创建项目文件夹

在桌面创建文件夹：

ecommerce-site

然后在 Codex 中选择这个文件夹作为项目。

如果你已经在上一篇创建过这个文件夹，可以清空后继续使用。

3. 输入第一个完整项目需求

进入项目后，在 Codex 中输入：

请在当前文件夹中创建一个 HTML 单页面电商网站。

要求：
1. 页面包含首页 Hero 区、商品分类、热销商品、优惠活动、购物车入口、用户评价和联系方式。
2. 风格现代、清爽、适合电商首页。
3. 使用 HTML、CSS、JavaScript 实现，不要使用复杂框架。
4. 做好移动端适配。
5. 代码结构清晰，文件命名简单。
6. 最后帮我启动本地预览，并告诉我如何打开。

这个提示词包含了五类信息：

1. 要做什么项目。
2. 页面包含哪些模块。
3. 视觉风格是什么。
4. 技术限制是什么。
5. 完成后怎么验收。

这比简单说“帮我做个网站”要好很多。

4. 等待 Codex 创建文件

Codex 可能会创建以下文件：

ecommerce-site
├── index.html
├── styles.css
├── script.js
└── assets/

不同版本生成的文件名可能略有不同。

你不需要手动创建这些文件，让 Codex 自动完成即可。

执行过程中，你可以观察中间对话区，看看 Codex 做了哪些动作。

5. 启动本地预览

如果是纯 HTML 项目，有几种打开方式。

方式一：直接打开 index.html

在文件夹里双击 index.html。

适合最简单的静态页面。

方式二：用本地服务打开

Codex 可能会启动一个本地服务器，例如：

http://localhost:5173

或者：

http://localhost:3000

你可以在浏览器中打开这个地址。

如果 Codex 已经在右侧打开了预览，就直接查看右侧浏览器。

6. 如何验收第一个版本

不要只看 Codex 说“完成了”。你需要自己验收。

建议从以下方面检查：

6.1 页面是否能打开

检查：

• 页面是否空白。
• 是否有明显报错。
• 是否加载很慢。
• 样式是否正常显示。

6.2 模块是否完整

逐项检查：

[ ] Hero 区是否存在
[ ] 商品分类是否存在
[ ] 热销商品是否存在
[ ] 优惠活动是否存在
[ ] 购物车入口是否存在
[ ] 用户评价是否存在
[ ] 联系方式是否存在

6.3 移动端是否正常

把浏览器窗口缩窄，模拟手机宽度。

检查：

• 文字是否溢出。
• 按钮是否太小。
• 图片是否变形。
• 商品卡片或购物车区域是否超出屏幕。
• 导航栏是否能正常显示。

6.4 交互是否能用

检查：

• 导航点击是否能跳转。
• 商品筛选或数量选择是否正常。
• 按钮点击是否有反馈。
• 商品卡片、轮播图或购物车提示是否正常交互。

7. 让 Codex 自动检查问题

你可以继续对 Codex 说：

请检查这个页面是否有明显的 UI 问题、控制台报错、无效链接和移动端适配问题。

如果有问题，请直接修复。
修复后请重新启动或刷新预览，并总结你修改了哪些文件。

这一步很重要，因为 Codex 不是只负责生成，还可以帮你自查。

如果页面有明显问题，你可以更具体地说：

移动端下商品卡片挤在一起了。请只修复移动端布局，不要改动桌面端视觉效果。

或者：

加入购物车按钮的颜色和整体风格不统一。请调整按钮样式，让它更现代、清爽，但不要影响购物车交互功能。

8. Plan 模式是什么

Plan 模式可以理解为“先写计划，再动手”。

普通模式下，你发出任务后，Codex 可能直接修改文件。

Plan 模式下，Codex 会先输出执行计划，不会马上动手改。

你确认计划后，它再执行。

什么时候应该用 Plan 模式？

以下任务建议开启 Plan：

• 大规模重构。
• 把 HTML 项目改成 React 或 Next.js。
• 接入数据库。
• 添加登录系统。
• 接入支付。
• 批量修改多个模块。
• 涉及生产配置。

为什么新手更应该用 Plan？

因为新手不一定能马上判断 Codex 的执行方向是否正确。

Plan 模式可以让你先看懂它准备做什么，再决定是否允许它改文件。

9. 用 Plan 模式把 HTML 项目迁移到 Next.js

假设你的 HTML 项目已经做好了，现在想升级成 Next.js 项目。

不要直接说：

帮我改成 Next.js。

这太模糊了。

更好的办法是新建一个对话，输入提示词：

请开启计划模式，把当前 HTML 单页面项目改造成 Next.js 项目。

要求：
1. 使用 App Router。
2. 使用 TypeScript。
3. 保留现有页面视觉效果和内容结构。
4. 样式可以迁移为 Tailwind CSS。
5. 迁移完成后运行构建检查。
6. 启动本地开发服务器，并用内置浏览器验证页面是否正常。
7. 在我确认计划前，不要修改文件。

Codex 可能会输出类似计划：

1. 检查现有 HTML/CSS/JS 文件结构。
2. 创建 Next.js + TypeScript 项目骨架。
3. 迁移页面结构到 app/page.tsx。
4. 迁移样式到 Tailwind 或全局 CSS。
5. 处理图片和静态资源。
6. 运行 npm install。
7. 运行 npm run build。
8. 启动开发服务器验证页面。

你需要检查：

• 是否会保留原始文件备份。
• 是否会覆盖现有内容。
• 是否会引入太多不必要依赖。
• 是否会执行你看不懂的危险命令。

如果计划不满意，可以让它改：

这个计划里不要使用 Tailwind，先继续使用普通 CSS。请重新给我一版计划。

确认后再执行。

10. 右侧浏览器怎么用

Codex 的右侧浏览器可以预览本地项目。

常见用途：

• 查看页面效果。
• 点击按钮。
• 测试商品筛选或购物车交互。
• 检查页面跳转。
• 查看移动端布局。
• 发现视觉问题后直接批注。

当 Codex 启动本地服务后，右侧可能自动打开浏览器。

如果没有自动打开，可以让 Codex：

请启动本地开发服务器，并在右侧浏览器中打开预览页面。

11. 页面批注怎么用

如果你在浏览器里看到某个元素不满意，可以直接对页面元素加批注。

例如你看到页面标题字体大小过大，可以批注：

这里的文字大小过大了，不够美观。

如果你看到评价部分每条评论没有星级显示，可以批注：

这里的评价没有五星好评图标样式，帮我补充。

批注的好处是：Codex 能更准确地知道你指的是页面上的哪个位置。

12. 文件树和终端怎么用

12.1 文件树

右侧文件树可以看到项目文件。

你可以用它检查：

• Codex 创建了哪些文件。
• 文件结构是否清晰。
• 是否出现奇怪的大文件。
• 是否有不该出现的临时文件。

但要记住：Codex App 不是完整 IDE。精细编辑代码时，仍然建议用 VS Code。可以通过codex修改文件处的在编辑器打开按键调用VS Code打开。

12.2 终端

终端可以运行命令。

常见命令包括：

npm install
npm run dev
npm run build
git status
git diff

如果你看不懂某个命令，先不要批准执行，可以问：

请解释这个命令的作用、会影响哪些文件、是否有风险。先不要执行。

13. 本篇常见问题

问题 1：页面打开是空白怎么办？

可以对 Codex 说：

页面打开后是空白。请检查 HTML、CSS、JS 引用路径和浏览器控制台错误，只做最小必要修复。

问题 2：页面很丑怎么办？

可以说：

请在不改变页面结构的前提下，优化视觉设计。目标是现代、清爽、适合电商网站。请重点优化颜色、间距、商品卡片、按钮和移动端布局。

问题 3：Codex 一直改不对怎么办？

不要无限追加抱怨。

更好的方式是：

1. 截图问题位置。
2. 用批注指出具体区域。
3. 明确告诉它不要大改。
4. 必要时回滚到上一个稳定版本。

14. 本篇检查清单

[ ] 我创建了 ecommerce-site 文件夹
[ ] 我让 Codex 生成了 HTML 单页面
[ ] 我能打开本地预览
[ ] 我检查了页面模块是否完整
[ ] 我检查了移动端布局
[ ] 我知道复杂任务要用 Plan 模式
[ ] 我知道右侧浏览器可以预览页面
[ ] 我知道可以对页面元素加批注
[ ] 我知道终端命令看不懂时要先问清楚

下一篇，我们会学习 AI 编程最重要的安全带：Git、GitHub、回滚、分叉、Worktree，以及如何用图片和 Steer 纠正 Codex。