AI 编程实战教程 （1）：从需求到上线，各环节必不可少的 9 个工具！

大部分人用 AI 编程，基本都是让Claude Code、Codex、Cursor 把这件事变成了默认动作：你说一句话需求，屏幕上很快就有能跑的代码。

一开始vibe coding，我也是一句话出代码，快是真的。乱也是真的。

后来我反复碰到同一类返工：目标没写成「做成什么样算完」，需求还在聊天记录里，界面样子没定，就让 Agent 开写。第三天交互改了，仓库里留下三套半成品页面。按钮位置改三次，公共样式不敢动。一次 PR 改了登录、设置和首页，回滚时三处一起坏。

我发现问题不是 Agent 不够强，是从想法起跳，跳过了后面改起来最关键的那几环。

所以千万别从想法起跳到写代码，这是我之前反复踩的坑。 AI 编程其实和之前人工写代码一样，有明确的流程，技术小白更容易踩坑。

关键流程：开发目标 → PRD → UI 原型 → 任务拆分 → 仓库约定 → 写代码 → 验证 → 评审 → 上线 我做了多个 AI 编程产品之后，总结出一套自己在用的工具，分享给大家。

1. 写之前：先锁目标和需求

Agent 只会执行你此刻那句话。目标没锁、需求没写成可改的文档，后面每次改想法都会打同一批文件。

开发目标不是愿景句，是验收句。这周要做成什么、什么明确不做、怎样算完成。写不清这三句，Agent 只能猜。

PRD 也不是一篇再也不改的 Word。你在做产品，需求一定会变。要变的是一版对照得上的需求变更，不是又开一轮聊天。

没写这两样就开写，常见结局是：功能看起来有了，但你说不清用户完成哪一步才算成功。于是再加一屏，再加一个按钮，仓库开始变脏。

总结：把目标写成项目规矩的工具；把每次改动写成可对照、可归档需求的工具。

2. 画之前：先把界面样子定稿

视觉和交互没定，写代码会把样式债写进组件。越改越不敢动。

很多人觉得「先写出来再调样式」更快。对 Agent 来说，更快的是先把能点的界面定下来，再让它按这个样子实现。

白板可以想。白板不是定稿。定稿要能回答：这一页有几块、主按钮在哪、空状态长什么样、点下去去哪一页。这些没定，Agent 会先发明一套布局，你再推翻，公共组件就变成谁都不敢动的遗产。

总结：能在写代码前把页面、交互、组件样子定下来的原型工具。定完再交接给写代码的 Agent，不要对着截图猜。

3. 动手前：先拆任务、先定仓库规矩

不拆任务，Agent 一次改太大；没有仓库约定，文件放哪、怎么测、怎么提交都不稳定。

一次改登录、设置和首页，看起来效率高。回滚时你才会发现，三处逻辑缠在一起。任务要拆到「一次只改一件，并且知道先做哪件」。

仓库约定更简单：给 Agent 一份它能读的规矩。目录怎么放、常用命令是什么、测试怎么跑、哪些文件不许乱动。没有这份文件，每个新开的对话都会重新发明一遍项目。

总结：把大活拆成带依赖顺序的任务工具；再加一份仓库里的 Agent 规矩。

4. 写代码：只开一个 Agent

这一环才轮到编程 Agent。前面没装上，开五个也救不回来；开五个，改动还会互相覆盖。

写代码是流水线的第六步，不是第一步。它负责在已经锁住的目标、需求、界面、任务和规矩里，改仓库里的文件。

不要把验证、评审、上线塞进这一环「顺便做了」。能跑不等于能上线。也不要两个 Agent 同时改同一文件，最后留下谁都不认的中间态。

这一环只装一个能在仓库里改文件的编程 Agent。

5. 我做了多个产品之后，这一套还在用

我在开发了多个 AI 编程产品后，找到了比较好用的开源工具，今天分享给大家。 原型这一步用的是 Claude Design，其余部分都是 GitHub 上热门开源项目。

开发目标：Spec Kit

https://github.com/github/spec-kit

，约 13.0 万星。先立项目规矩：做什么、什么不能做、怎样算完成。没有这一层，后面的需求变更没有锚点。

PRD：OpenSpec

https://github.com/Fission-AI/OpenSpec

，约 6.5 万星。按变更写需求，能对照、能归档。适合已经有仓库、还在改产品的人。不要把需求留在聊天记录里。

UI 原型：Claude Design

https://claude.com/product/design

，Claude官方产品，需要会员才能用。用对话出可点原型，定稿后打成交接包，交给 Claude Code。它不是开源仓库。我把它放在写代码前面，就是为了先定界面，再实现。

任务拆分：Task Master

https://github.com/eyaltoledano/claude-task-master

，约 2.8 万星。把需求拆成带依赖的任务列表。一次只领一件，做完再领下一件。

仓库约定：AGENTS.md

https://github.com/agentsmd/agents.md

，约 2.4 万星。这是给 Agent 读的 README：目录、命令、测试、禁止事项。Claude Code、Codex、Cursor 都能用。

写代码：Claude Code

https://github.com/anthropics/claude-code

，约 14.2 万星。终端里改仓库。只开这一个。前面几环没装上，它也会写飞。

验证：Playwright

https://github.com/microsoft/playwright

，约 9.5 万星。页面能不能点、主流程能不能走完。能编译不是验证。

评审：PR-Agent

https://github.com/The-PR-Agent/pr-agent

，约 1.3 万星。开源的 PR 审查。看的是这次改动有没有把任务做完，不是只看能不能合并。

上线：Coolify

https://github.com/coollabsio/coolify

，约 6.1 万星。自己机器上 git push 上线。写完代码不等于上线。验证和评审过了，再发布。

环节	用什么
开发目标	Spec Kit 规格套件
PRD	OpenSpec 开放规格
UI 原型	Claude Design 克劳德设计
任务拆分	Task Master 任务主管
仓库约定	AGENTS.md
写代码	Claude Code 克劳德·科德
验证	Playwright 剧作家
评审	PR-Agent 公关代理人
上线	Coolify 冷却