第 18 卷

§09 从零构建一个完整产品

Building a Complete Product from Scratch

把前面讲的入口、AGENTS.md、并行和云端串起来，从一个想法走到一个能部署的Web应用：怎么拆任务、每一步用哪个入口、怎么管几个并行的agent、每一步怎么验收。

说明一下：这一章是流程示范。CLI的部分和§03是同一套操作；App里的并行线程和云端任务这次没有上手

跑，步骤按官方文档写。prompt可以直接拿去用，里面说的冲突、报错这些情况是一般规律，你跑出来的会不一样。

项目选择：AI文章摘要工具

我们要做的是一个Web应用：用户粘贴一篇文章的URL，系统自动抓取内容、调用OpenAI API生成摘要，并把历史记录存下来。

为什么选这个项目？几个原因：

技术栈覆盖面刚好。前端（Next.js页面）、后端（API路由）、数据库（SQLite）、外部API调用（OpenAI），四层都有。足够展示Codex在不同场景下的能力，又不至于复杂到写不完。

每一层可以独立开发。前端UI、后端逻辑、数据库模型，三块互相不依赖（在约定好接口的前提下）。这正好适合用Codex的多agent并行。

做完能自己用。读文章多的人都用得上，自己会用的东西，验收起来也有标准。

最终成品长这样：

阶段一：需求分析和规划（CLI Plan模式）

打开终端，进入你想存放项目的目录，启动Codex CLI：

codex

输入 /plan 切到Plan模式，让Codex先出方案，不动文件。

我要做一个AI文章摘要工具，Web应用。核心功能：

1. 用户输入文章URL
2. 系统抓取文章内容
3. 调用OpenAI API生成3种不同长度的摘要（一句话/短摘要/详细摘要）
4. 存储历史记录，用户可以回看

技术要求：

• Next.js App Router
• SQLite + Drizzle ORM
• Tailwind CSS
• 部署到Vercel

请分析需求，给出完整的技术方案和项目结构。

Codex在Plan模式下会输出一份详细的方案，包括目录结构、数据库Schema、API路由设计、前端页面规划。

不要急着说「开始做」。仔细看方案，挑出你觉得不对的地方。

比如Codex可能会建议用Cheerio做网页抓取，你可以追问：

Cheerio能处理JavaScript渲染的页面吗？比如微信公众号文章。

如果不能，有什么替代方案？考虑部署到Vercel的限制。

方案在这一步改最便宜。AI给的方案读起来都很合理，部署限制、页面渲染方式这类细节要你追问才会暴露出来。

确认方案后，让Codex生成一份AGENTS.md：

基于我们讨论的方案，帮我写一份AGENTS.md。要求：

• 项目根目录一份全局的
• src/app/下前端相关的
• src/lib/下后端和数据库相关的
• 说清楚技术栈、代码风格、文件命名规范

后面几个agent并行时，每个都会读AGENTS.md（§05），接口约定写在这里，它们拿到的就是同一份。

阶段二：基础搭建（CLI默认模式）

方案确认了，AGENTS.md也准备好了，现在让Codex动手。退出Plan模式回到默认模式就行：工作区里它可以自由读写、跑命令，装依赖要联网时会来问你。嫌每次问太烦，可以用 /permissions 切到Approve for me，

或者启动时加：

codex --approve-for-me

给它第一个任务：

按照AGENTS.md中的方案，初始化项目：

1. 用create-next-app创建Next.js项目
2. 安装依赖：drizzle-orm, better-sqlite3, openai, tailwindcss
3. 创建基本的目录结构
4. 配置Drizzle和数据库Schema
5. 写一个最简单的首页，确认项目能跑起来

先做骨架，不做具体功能。

它会自己执行shell命令、创建文件、安装依赖，你在终端里能看到它每一步在做什么。

几个注意事项：

让它跑完再看，不要中途打断。项目初始化是一连串有依赖关系的操作（创建目录→安装依赖→写配置→验证），打断容易导致半成品状态。

跑完之后验证。让Codex执行 npm run dev，自己打开浏览器看一眼。结构建得整整齐齐、一跑就报错的情况并不少见。

这时候commit。基础骨架搭好、验证能跑，立刻让Codex提交一次：

git init -& git add . -& git commit -m "init: project scaffold with Next.js + Drizzle + SQLit

每个里程碑都commit。后面几个agent并行改代码，改崩了要能回退到一个干净的状态。

阶段三：并行开发（App + Worktree）

打开ChatGPT桌面App，切到Codex。App的长处就是几个线程摆在一个窗口里管。（只用CLI的话，开三个终端各跑 codex --worktree，再用 codex agents 看总览，也能做到。）

我们要开三个并行任务，每个用Worktree模式（§06详细介绍过）跑在自己的独立分支上：

在App里新建一个线程，模式选Worktree，写第一个agent的任务：