一套能跑通的 AI 项目开发流程：从想法到可演示成品

你有没有这种崩溃时刻：

需求在脑子里很清楚，一写就散。
代码跑起来了，UI 又丑又乱。
设计稿出来了，开发对不上，返工两天。

我现在做项目就用一条“流水线”：PRD 先定清楚 → Codex 搭骨架 → 图像模型定 UI 方向 → Claude（Design）做规范稿 → 回到 Codex 把 UI 接上。

你照这个顺序走，体验很接近“有人帮你打配合”。

这条流水线长什么样？

Opus 4.7：把你的想法聊成「能开发」的产品开发文档（PRD/技术约束/验收标准）。

Codex：按 PRD 开始写代码，先出能跑的 MVP。

GPT-image-2：先出 UI 视觉方向图（不用纠结细节，先定风格和布局）。

Claude（Design）：把方向图变成可落地的 UI 设计（组件、间距、字号、状态、交互说明）。

回到 Codex：把 UI 资产、组件规范、页面结构补进项目，完成前后端联调。

一句话：文档管边界，代码管落地，图片管方向，设计模型管规范，最后再用代码收口。😄

开工前：准备一个“项目包”，别让信息散落

建议你在项目根目录建一个文件夹结构，所有模型输出都往里放：

/project
  /docs
    prd.md
    api.md
    decisions.md
  /design
    ui-direction.png
    ui-spec.md
    tokens.json
  /prompts
    opus_prd.txt
    codex_build.txt
    ui_image.txt
    claude_ui_spec.txt
  /src
  README.md

小提示：

decisions.md 专门记“我们为什么这么做”。以后你自己都会感谢你自己。
prompts 也存起来。你会反复复用的。

用 Opus 4.7 把需求聊成 PRD（重点：验收标准要狠）

很多项目失败不是写不出代码，是边界没定。PRD 这一步别省。

你要从 Opus 4.7 拿到这些东西：

目标用户 + 典型场景（越具体越好）
核心流程（用户从 A 点到 B 点要点几下）
功能清单（MVP 必做 / 可选）
数据结构草案、关键接口
非功能约束：登录/权限/性能/兼容性
验收标准：做到什么程度算“过关”

可直接复制的 PRD 提示词（Opus 4.7）

把你的想法贴进去，剩下让它补全：

你是资深产品经理 + 技术负责人。
我要做一个【项目一句话描述】。
目标用户是【用户类型】，使用场景是【具体场景】。

请输出一份“能直接交给开发”的产品开发文档，包含：
1）用户故事（3-6条，带场景）
2）MVP 功能范围（必做/不做）
3）关键页面与流程（用文字步骤描述即可）
4）数据模型草案（字段级别）
5）API 列表（路径、方法、入参、出参示例）
6）异常与边界（空状态、失败提示、权限不足等）
7）验收标准（可测试、可判定）
8）技术建议（前端/后端/存储/鉴权）

注意：少空话，多细节。遇到不确定就提出问题，并给出默认方案。

这一步常见翻车点

PRD 写得像作文，没有验收标准。
“支持导出”“支持搜索”这种词太虚。要写：导出 CSV 还是 PDF？搜索是模糊还是精确？
需求一直加，MVP 不敢砍。你周末就想 demo，别把自己当大厂。

把 PRD 交给 Codex：先跑起来，再变好看

我喜欢让 Codex 先做三件事：

初始化工程 + 目录结构
跑通主流程（哪怕 UI 丑点）
把 API mock 或最简后端搭起来

Codex 构建提示词（建议配合仓库）

你是资深全栈工程师。
这是我的 PRD（见 docs/prd.md）。

目标：在 2-4 小时内做出可演示的 MVP。
要求：
- 给出项目初始化命令
- 产出清晰的目录结构
- 先实现主流程：
  1）【流程A】
  2）【流程B】
- API 未完成时用 mock 数据（写在 src/mocks）
- 每一步都能运行，写清楚怎么启动

输出：
1）要我执行的命令
2）你要新增/修改的文件列表
3）关键文件的代码
4）运行与验证方式

小建议：让 Codex “小步提交”

你可以追加一句：

每完成一个可运行的阶段，停下来告诉我“现在能演示什么”，再继续下一步。

这样你不会一口气拿到一坨代码，然后祈祷它能跑。

用 GPT-image-2 定 UI 方向：别纠结像素，先定风格和布局

很多人做 UI 的误区是：一上来就要“高保真可交付”。

没必要。你要的是：

页面布局大概长啥样
风格是偏工具感、偏产品感、偏极简还是偏拟物
信息层级怎么排

GPT-image-2 的 UI 方向图提示词

生成一张 Web 应用的 UI 方向图（高质量、现代、干净）。
产品：【你的产品一句话】
页面：
- 登录页
- 主列表页
- 详情页
- 新建/编辑弹窗

风格：
- 12 栅格布局
- 轻量阴影
- 圆角 10px
- 主色：#4F46E5（靛蓝）
- 字体风格：简洁、偏产品化

要求：
- 每个页面都有清晰的标题、按钮层级、表单布局
- 留出空状态与错误提示区域
- 适合桌面端（1440px 宽）

你拿到图以后，别急着“这按钮差 2 像素”。

干一件事：选方向。比如：

版本 A 更工具化，适合效率产品
版本 B 更品牌化，适合面向 C 端

把你要的那张放进 design/ui-direction.png。

用 Claude（Design）把方向图做成“可开发”的 UI 规范

方向图解决“长什么样”。

接下来要解决“怎么实现”。这一步最值钱：让设计输出可开发的规格。

你需要 Claude（Design）给你这些内容：

页面结构（模块拆分）
组件清单（Button/Input/Table/Modal…）
组件状态（默认/hover/disabled/loading/empty/error）
间距、字号、颜色、阴影（最好能给 design tokens）
交互细节（校验提示文案、Toast 文案、确认弹窗）

Claude（Design）提示词：把图变成规范

你是产品级 UI/UX 设计师。
这是我的 UI 方向图（见 design/ui-direction.png）。

请输出一份“开发可直接照着做”的 UI 规范文档（Markdown），包含：
- 信息架构与页面清单
- 每个页面的模块拆分（用列表写清楚）
- 组件清单与规格（尺寸、间距、字体、圆角、边框、阴影）
- 关键交互说明（表单校验、空状态、错误状态、loading）
- 文案建议（按钮、提示、错误信息）
- 一份 design tokens（颜色、字号、间距），以 JSON 给出

约束：偏现代极简，桌面端优先。

把输出保存为：

design/ui-spec.md
design/tokens.json

再扔回 Codex：把 UI 补上，代码收口

这一步就是“把设计变成产品”。

你要喂给 Codex 的输入很明确：

design/ui-spec.md
design/tokens.json
方向图（可选，更多是给它对齐风格）
当前项目代码

Codex 回填 UI 的提示词

你是前端负责人。
请根据 design/ui-spec.md 和 design/tokens.json，把现有项目 UI 全面补齐并对齐规范：

要求：
- 建立统一的样式体系（tokens 映射到 CSS variables / Tailwind config 均可）
- 把页面按模块拆成组件（components/ 下）
- 覆盖状态：loading/empty/error/disabled
- 文案按 ui-spec.md
- 保持可运行，每次改动给出验证方式

输出：
- 修改文件清单
- 关键代码
- 我需要执行的命令

你会明显感觉：这时 Codex 不再“自由发挥”，而是在填一张答案卡。效率高很多。

一套你能照抄的“交付标准”清单（强烈建议贴墙上）

做完后，拿这个自检：

[ ] 主流程能从头走到尾，不卡
[ ] 每个页面都有 loading/empty/error
[ ] 表单有校验，错误文案能看懂
[ ] 按钮有 disabled/loading 状态，不会狂点
[ ] 颜色、间距、字号统一（别一会儿 12，一会儿 14）
[ ] README 写清楚：安装、启动、环境变量、演示账号（如果有）

避坑清单（血泪版）

PRD 没写验收标准：后面所有模型都会开始“猜”，返工从这里起。
一上来就追求完美 UI：你是要 demo 还是要拿奖？先跑通。
设计不出组件规范：开发会变成“逐张图抄”，抄着抄着就崩。
提示词不落文件：下次你又要重来一遍，纯纯浪费生命。
不做状态页：等用户真遇到错误，你的产品就像消失了一样。

你可以直接套用的执行节奏（适合周末冲 MVP）

周五晚上：Opus 4.7 把 PRD 和 API 草案敲定（1-2 小时）
周六：Codex 把 MVP 跑起来（3-6 小时）
周日：GPT-image-2 定方向 → Claude（Design）出规范 → Codex 回填 UI（4-8 小时）

做完你至少能拿到一个东西：可演示、可讲故事、可继续迭代的版本。

如果你愿意，把你的产品一句话描述 + 目标平台（Web/移动端）丢我，我可以顺手帮你把 PRD 提示词和 UI 提示词填成可直接用的版本。

一套能落地的 AI 项目开发流水线：PRD → 代码 → UI 设计 → 回填成品