文章 /

应用 AI 流程总结

一套目前测试和使用的 AI 开发流程

UI 和 Code 这一块实现比较繁杂，目前很多种流派方式并未沉淀最佳路径

  • 图片截图 + AI 生成 video 做背景，模版截图 + figma 修改设计，设计截图 + antigravity / lovable / cluade 还原网页代码
  • prompt 用生成线框然后交给一些做 ui 的 skill
  • prompt + pencil 实现设计 d2c

多种工具订阅价格不菲，没有全试用目前还没有沉淀最佳的实践。

生产力提升会对美有追求，比较多的博主已经使用第一种方案开始输出一些做的比较不错的 landing 页面，未来页面美学需求一定是融在开发流程中去的。

（PS：现在很多 UI 设计师使用 d2c，而程序员习惯使用 prompt 生成。未来两部分都要交叉视角都要结合使用。）

实际代码应用中，单模型全流程生成有诸多问题，且只适用于低复杂度任务

  • prompt 持续膨胀，上下文污染加重
  • UI 初稿完整，但结构边界不稳
  • 单次会话改动过大，定位偏差困难
  • 测试与 review 容易流于形式

一、明确需求

如在需求尚未收敛时直接生成高保真界面，结果通常是外观完整、实现失焦。组件位置、信息层级、首屏重点和状态边界都会在后续阶段反复返工。

页面块级结构应先于视觉初稿确定。常用工具是 wiretext 和 mockdown。 明确页面面结构与交互后，引入 AI UI 工具。

  • Pencil：适合快速生成可编辑初稿
  • variant ai：适合先确定风格方向，再导出 .js 交给 Claude Code 或 Codex 继续整理结构

生成结果只应视为草图，不应直接视为最终实现。进入开发前，需确认布局层级、组件边界及关键状态。

二、拆分执行

开发阶段可进行任务优化减少。

面对中等以上复杂度需求，应先判断任务能否拆分。基线方法如下：

  1. 将需求拆成 2 到 4 个相对独立的子任务
  2. 每个子任务绑定独立 git worktree 和独立会话
  3. 先合并能独立验证的小增量，最后再做跨模块收敛

这样做的直接收益是隔离上下文、减少串行任务加速开发。页面结构、表单交互、测试补齐可以分别推进，问题定位也更直接。

这套方法也有边界。任务耦合过深时，强行拆分只会提前暴露集成成本。涉及共享状态或跨模块联动时，应主动降低并行度。

第三方工具：

  • superset：用于并行 worktree 编排
  • happy：用于远程控制 Claude Code

随着 Claude 官方能力补齐远程控制及 worktree 功能，这类工具更适合作为其他 CLI 增强项。

三、多模型协作

多模型协作的关键，不是并行本身，而是使用各个模型的优势互补。

ccg-workflow 可作为调度层使用：Claude Code 负责编排，前端任务优先路由给 Gemini，后端任务优先路由给 Codex，最终统一互相 review 和落 patch。

如果缺少统一口径，多模型不会带来稳定增益，只会放大命名、边界和实现风格的差异。

常用命令如下：

  • 全流程：/ccg:workflow
  • 按任务类型切：/ccg:frontend、/ccg:backend、/ccg:debug、/ccg:optimize、/ccg:review

当需求约束较多、目标容易漂移时，应先使用 /ccg:spec-* 定义规范。 简单任务可拆成 3 个以上独立模块时，才考虑 /ccg:team-* 多任务并行。

四、测试与评审

有浅尝一些工具去做测试：

  1. apifox + skill 测试：如果开发阶段未使用apifox，则不推荐使用 apifox skill 做最后测试
  2. midscene 测试：之前测试使用未有自动测试，现在有了自动测试模式，但还未尝试意见保留

在主要流程完毕后，通过 prompt 测试验收功能。更推荐在开发过程中持续输出单元测试。 当功能块完成后，做多模型多轮交叉 review 及修复，重点检查四项内容：

  1. 潜在 bug 和边界问题
  2. 可维护性
  3. 健壮性
  4. 符合设计模式

如果是大规模项目，建议使用 /ccg-review 及 /ccg-debug 去修复 bug。

AI review 之后，仍需进行人工 review，主要确认：

  1. 需求满足
  2. 命名样式风格是否符合团队标准（或可在 plan 阶段写入团队规范 skill，最终通过 lint 工具检查）

CICD 及 PR/ISSUE 等可使用 AI 审查、建议及合并 ISSUE：

五、最小可复用流程

把前述方法压缩到最小，端到端流程如下：

  1. 先用线框工具明确页面结构和信息层级，用 UI 生成工具拿到可编辑初稿
  2. 开发阶段以 MVP 为先，简单任务按 worktree 推进独立子任务
  3. 复杂需求先走 /ccg:plan 或 /ccg:spec-* 锁定约束，再进入实现
  4. 合并前统一做多模型多轮交叉 review、测试和人工检验，最后再做稳态重构