我的 AI 编程工作流:从需求到上线的全链路 SOP

一开始就是无脑 ChatGPT，什么都往里丢。后来发现不对劲——需求聊不清楚，设计丑得离谱，代码能跑但全是坑。

问题出在哪？

不是 AI 不行，是我用得太乱。

后来我逼自己整了一套流程，每个阶段用什么工具、怎么配合，全部固定下来。效果立竿见影。

今天把这套 SOP 掏出来，你可以直接照搬。

一、需求阶段：让 Gemini 当产品经理

很多人上来就写代码，这是大忌。

需求没想清楚，后面全是返工。

我现在的做法是：先跟 Gemini 聊需求。

为什么是 Gemini？因为它聊天聊得好。你跟它一来一回，需求就清晰了。

具体怎么用：

1. 把你的想法大概说一遍
2. 让它帮你梳理产品逻辑
3. 让它输出一份简易 PRD
4. 反复 challenge，直到逻辑自洽

我一般会用 Gemini 的产品经理 Gems，专门调教过的，聊需求贼顺。

这个阶段的目标就是：搞出一份靠谱的 PRD。核心功能、用户流程、边界情况，全写清楚。

别急着写代码。需求阶段多花 30 分钟，后面能省 3 小时。

二、前端设计：三套打法任选

这是我踩坑最多的环节。

AI 写代码没问题，但设计真的一言难尽。要么丑到没法看，要么千篇一律的「AI 味」——蓝紫渐变、圆角卡片、毫无辨识度。

摸索下来，我总结了三套打法，适合不同场景。

方案 A：设计稿生成 → Figma 转代码

这是最「正规」的路线。

先用 AI 设计工具生成设计稿。市面上有不少选择，比如 Lovart、Stitch 这类工具，输入描述就能出设计稿。

然后通过 Figma MCP 把设计文件喂给 AI 编程工具。

Figma 官方出了 MCP Server，仓库在 github.com/figma/mcp-server-guide。

它能让 AI 工具直接读取 Figma 文件的布局信息、组件结构、设计变量。

Claude Code 里可以这样安装：

claude plugin install figma@claude-plugins-official

适合场景：正经项目，需要设计规范，团队协作。

方案 B：对标网站直接参考

没时间搞设计稿？直接找对标。

1. 找一个你喜欢的网站
2. 截图
3. 把截图喂给 Claude，让它参考着写

这招简单粗暴，但有个问题：容易写出「四不像」。

我后来发现 Claude Code 官方有个 Frontend Design Skill，专门解决这个问题。

仓库地址：github.com/anthropics/claude-code/tree/main/plugins/frontend-design

它会引导 Claude 避开那种「一眼 AI」的通用设计，做出有辨识度的界面。

适合场景：快速原型，个人项目，不想在设计上花太多时间。

方案 C：专业设计系统 Skill

如果你想要更系统的设计方案，推荐 UI UX Pro Max Skill。

仓库地址：github.com/nextlevelbuilder/ui-ux-pro-max-skill

这个 Skill 猛在哪：

• 67 种 UI 风格（玻璃态、极简、野蛮主义……）
• 100 条行业规则（SaaS、金融、医疗、电商各有一套）
• 96 种配色方案 + 57 种字体组合

它能根据你的行业自动生成设计系统，包括配色、字体、间距规范。

支持 Claude Code、Cursor、Windsurf 等主流工具。

适合场景：需要专业设计感，但没有设计师的团队。

三、框架设计：Opus 定架构，Codex 补细节

设计搞定，开始写代码。

但别急着一头扎进去。先把架构想清楚。

我的做法是「双模型接力」：

第一步：Claude Opus 4.5 的 Plan 模式

Opus 擅长宏观思考。让它设计整体架构：

• 技术选型
• 目录结构
• 模块划分
• 数据流向

Plan 模式会让它先思考再输出，方案质量明显更高。

第二步：Codex 补充细节

Opus 的方案有时候太「宏观」了，落不了地，细节不够。

把 Opus 的方案喂给 Codex，让它补充：

• 具体的函数签名
• 边界情况处理
• 错误处理逻辑

然后再返回 Claude，生成完整的代码骨架。

为什么这么折腾？

因为一个模型很难既看全局又抠细节。Opus 看大局，Codex 抠细节，分工明确。

四、细节填充：模型接力赛

骨架有了，开始填肉。

这个阶段我的模型使用策略：

1. Opus 先跑一遍

把基座功能实现出来。核心逻辑、主流程、关键交互。

Opus 贵，但这一步值得花钱。基座打歪了，后面全白干。

2. Sonnet 完善框架

基座稳了，剩下的交给 Sonnet。

补充次要功能、优化代码结构。

Sonnet 性价比高，干这种「填充型」的活刚好

3. Codex 修 bug

写完一跑，肯定有 bug。

Codex 修 bug 的能力很强，通常一遍就过。

修不好怎么办？直接换模型。别死磕。有时候换个模型，换个「思路」，问题就解决了。

这个阶段的关键是：别死磕一个模型。

每个模型都有盲区。修了两三遍还不行，果断换，别跟它较劲。

五、人工审阅：测试两步走

代码写完，别急着上线。

测试分两步，侧重点完全不同，缺一不可。

第一步：单元测试

针对每个功能，点对点测试。

• 这个按钮点击后发生什么？
• 这个接口返回异常会怎样？
• 边界值处理对不对？

单元测试保证的是：每个零件都能正常工作。

第二步：集成测试

按用户旅程，整体测试。

模拟一个用户从注册到完成核心操作的全流程。

• 注册 → 登录 → 使用功能 → 退出
• 中间任何一步卡住都是问题

集成测试保证的是：零件组装起来也能正常工作。

为什么两步都要做？

单元测试过了，不代表整体能跑。 整体能跑，不代表每个细节都对。

这两步是互补的。少一步都会埋雷。

六、工具清单

最后整理一下我在用的工具：

必备：

• Claude Code —— 主力编程工具
• Codex —— 细节补充 + bug 修复

选配（任选一个）：

• Cursor
• Trae
• Antigravity
• Kiro

选配工具主要是 IDE 集成用的。看你习惯哪个，选一个顺手的就行，别纠结。

设计相关：

• Figma + MCP Server
• UI UX Pro Max Skill
• 各类 AI 设计工具

AI 编程最大的坑，不是工具不行，是你用得太乱。

这套 SOP 说白了就一句话：让对的模型干对的事。

需求用 Gemini 聊，架构用 Opus 想，细节用 Sonnet 填，bug 用 Codex 修。

别一个模型从头用到尾，那是浪费.