2026年4月13日 · 阅读 —

每天烧上千美金的 AI Coding SOP（自用版）

Agent 与 SkillsAI 工程实践

图片资源未同步：未命名图片

每天烧上千美金的 AI Coding SOP（自用版）

有人把 AI Coding 当“自动写代码”。结果就是：界面一股塑料味、架构像拼夕夕、bug 修到怀疑人生。

更像样的玩法是：把模型当成一支临时项目组——有人负责把需求讲人话，有人负责画界面，有人负责搭骨架，有人负责修锅。钱烧得快，但流程顺了，产出也更稳。

下面是一套已跑通的 SOP，定位很明确：自用可复现，并把所有用到的资源地址一起放出来。

0. 这套 SOP 的核心逻辑（别把刀拿反）

  • 先把需求和边界钉死：否则后面每一步都是“重新来过”。
  • 先做可跑的基座：先让项目能启动、能跑、能测；漂亮是后话。
  • 修 bug 不是靠玄学：修不动就换模型/换视角，别硬扛。

1) 需求阶段：用 Gemini 把 PRD 逼出来

目标不是“聊得开心”，目标是：

  • 需求能落成 PRD
  • 关键流程能说清 产品逻辑/状态流转
  • 需求边界能写明 什么不做

推荐工具：Gemini（产品经理 gems）

输出物（强烈建议写下来）：

  • 用户目标/核心场景
  • 关键页面/关键交互
  • 数据结构草案（字段、状态）
  • 约束：权限、边界条件、异常兜底

2) 前端设计：三套打法（看项目选，不要全都上）

界面这块最容易翻车：

  • 要么“AI 模板脸”，像 2018 年的后台
  • 要么过度设计，做了个艺术展

这里给三套可复用路径。

方案 A：先生成设计稿，再 Figma 转代码（走正道）

适用：需要更像“产品”的 UI，而不是 demo。

流程：

  1. 用 Gemini 的相关工具生成设计稿（nano banana / lovart / stitch）
  2. 让 AI 工具通过 Figma MCP 读取设计文件
  3. 在 Dev Mode 下由插件自动启动本地 MCP 服务：127.0.0.1:3845

资源：

关键点：

  • 设计先定，代码是“搬运 + 还原”，减少拍脑袋
  • MCP 这条链路通了之后，改 UI 不用靠口述

方案 B：对标网站截图，按“参考图”生成代码（走捷径）

适用：需要快速对齐行业风格（电商/工具/内容站），别从零发明轮子。

流程：

  1. 找到对标网站
  2. 截图（最好包含：布局、字体层级、按钮样式）
  3. 用 Frontend Design Skill 指导 Claude 出代码

资源：

为什么这条路好用：

  • 能避开“通用 AI 设计”，做出更有辨识度的界面

方案 C：直接上设计系统生成器（走工业化）

适用：团队/长期项目，想要统一配色、字体、组件规范。

工具：UI UX Pro Max Skill（支持 Claude / Cursor / Windsurf 等）

资源：

亮点：

  • 内置设计系统生成器
  • 可按行业生成配色/字体方案

3) 架构设计：先让“军师”画图，再让“工头”补细节

这一步的目标只有一个：总体架构清晰到可以开工。

推荐分工：

  1. Claude Opus 4.5（Plan 模式）：做总体架构设计

    • 模块拆分
    • 数据流/依赖
    • 关键技术决策点（例如：状态管理、缓存、鉴权、任务队列）

  2. Codex：把 Opus 的方案“补到能落地”

    • 补足边界与细节
    • 把缺的接口/类型/目录结构补齐
    • 再把补充稿回填给 Claude，让它输出完整骨架

    吐槽一句：

  • 只让一个模型“从架构到代码全包”，最后往往是：PPT 很美，工程很惨。

4) 细节填充：先跑通基座，再逐段加肉

建议节奏（已验证省命）：

  1. 先用 Opus 跑一遍：把项目基座搭出来

    • 项目能启动
    • 关键路径能跑
    • 基础依赖/脚手架齐

  2. Claude Sonnet：把框架完善

    • 细化模块实现
    • 补齐 UI/交互细节
    • 把“半成品代码”推进到可用

  3. Codex 修 bug：通常一遍过

    • 修不动就换模型/换提示角度
    • 别在同一个坑里复读到天黑

5) 人工审阅与测试：两种测试视角，缺一不可

到了“看起来差不多”这一步，最危险。因为幻觉最强：

  • 页面能点 ≠ 功能没坑
  • 控制台不报错 ≠ 用户旅程能走完

这里建议两层测试，侧重点完全不同：

A. 单元测试：功能点对点

  • 针对每个功能做精确验证
  • 适合拦截：输入校验、边界条件、异常处理

B. 集成测试：按用户旅程走一遍

  • 把自己当成用户，从入口一路走到结果
  • 适合拦截：跨模块联动、状态错乱、权限漏口

结论：两步都要做。少一个，就等着线上挨打。

6) 编程工具清单：必备 + 选配

必备（不装等于自虐）

  • Claude Code：核心生产力
  • Codex：修 bug 省时间

选配（挑一个顺手的就行）

  • Cursor / Trae / Antigravity / Kiro：任选其一

7) 雷区清单（踩一次就懂，但最好别懂）

  • 需求阶段不写边界：后面就是无限返工
  • UI 全靠口述：最后一定跑偏
  • 架构不做目录/接口约定：代码会长成“意大利面”
  • 只做单测不做旅程测试：联动一上线就碎

#AICoding #ClaudeCode #Codex #Gemini #Figma #MCP #前端设计 #架构设计 #测试

Continue reading

继续阅读