AI 工作编排全流程文档：从 PRD 到代码交付
概述
本文档描述当前端开发者拿到 PRD文档地址、UED设计稿地址、需求任务管理地址、后端API服务地址 四个输入后，AI 如何通过 MCP 工具和 Skills 进行自动化工作编排，完成从需求理解到代码交付的全流程。
项目技术栈： Smallfish + React 18 + TypeScript + antd-mobile 5.x + zustand + CSS Modules (.less)
四大输入
| 编号 | 输入 | 示例 | 用途 |
|---|---|---|---|
| 1 | PRD 文档地址 | https://yuque.antfin.com/xxx/yyy/doc-slug |
需求理解、系分生成 |
| 2 | UED 设计稿地址 | https://www.figma.com/design/xxx/yyy |
UI 还原、组件拆分 |
| 3 | Dima 任务地址 | https://project.alipay.com/xxx/workItem/2025... |
任务管理、状态流转 |
| 4 | 后端 API 服务 | 应用名如 hractivity 或 OneAPI 接口路径 |
接口对接、类型生成 |
全流程编排总览
makefile
阶段0: 输入解析与环境准备
↓
阶段1: 需求理解与分析
↓
阶段2: 前端系分文档生成
↓
阶段3: 任务拆解与排期
↓
阶段4: API 接口对接准备
↓
阶段5: 页面与组件代码生成
↓
阶段6: 接口联调与 Mock 配置
↓
阶段7: 自测验证
↓
阶段8: 代码提交与审查
↓
阶段9: 部署与交付
↓
阶段10: 任务闭环与通知阶段 0：输入解析与环境准备
目标： 将四个原始链接解析为可操作的结构化数据，确认工程环境就绪。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 0.1 | 解析语雀 PRD 链接 | skylark_resolve_url (MCP) → skylark_doc_detail (MCP) |
语雀 URL | doc_id、PRD 标题、Markdown 正文 |
| 0.2 | 解析 Dima 工作项 | DimaReader 或 queryWorkItemDetail (MCP) |
Dima URL | workItemId、标题、内容、状态 |
| 0.3 | 查询后端 API 服务 | search_app_info (MCP) → get_api_list (MCP) |
后端应用名 | 应用信息、接口列表概览 |
| 0.4 | 确认工程环境 | 文件系统读取 (Read) | 项目根目录 | 技术栈版本、目录结构、现有页面/组件列表 |
阶段 1：需求理解与分析
目标： 深度理解 PRD 内容，结合设计稿和 Dima 工作项，形成结构化需求理解。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 1.1 | PRD 深度解析 | skylark_doc_detail (MCP) |
PRD Markdown 正文 | 结构化需求摘要（功能点、业务规则、交互流程） |
| 1.2 | 设计稿分析 | browser subagent |
Figma URL | 页面清单、组件拆分方案、UI 规格 |
| 1.3 | 头脑风暴与方案探索 | brainstorming (Skill) |
需求摘要 + 设计稿分析 | 方案探索报告（候选方案、风险点、待确认问题） |
人工检查点： 阶段 1 完成后，确认 AI 对需求的理解无偏差。
阶段 2：前端系分文档生成
目标： 自动生成前端系统分析文档，写入语雀知识库。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 2.1 | 生成前端系分 | prd-sa (Skill) |
PRD URL、Figma URL、Dima URL | 系分文档 Markdown（含页面结构、组件拆分、数据流、接口依赖等） |
| 2.2 | 写入语雀 | skylark_user_book_list (MCP) → skylark_doc_create (MCP) |
系分内容、目标知识库 ID | 语雀文档 URL |
| 2.3 | 关联到 Dima | addWorkItemComment (MCP) |
workItemId、系分文档 URL | 评论添加确认 |
人工检查点： 系分文档需要团队评审。
阶段 3：任务拆解与排期
目标： 将系分中的工作项拆解为可执行的子任务，在 Dima 中创建并关联。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 3.1 | 任务拆解 | AI 分析 | 系分文档内容 | 子任务列表（标题、描述、优先级、预估工时） |
| 3.2 | 创建子任务 | createTask (MCP) |
子任务列表、projectId | 各子任务 workItemId |
| 3.3 | 更新主需求状态 | queryWorkItemCanUpdateStatusList (MCP) → updateWorkItemStatus (MCP) |
主 workItemId | 状态更新为"开发中" |
阶段 4：API 接口对接准备
目标： 查询后端 API 接口详情，生成 Mock 数据，准备 OneAPI 服务代码。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 4.1 | 查询接口详情 | query_api (MCP) / query_api_rag (MCP) |
接口列表（appName + path） | 各接口完整 Schema（请求/响应结构体） |
| 4.2 | 更新 OneAPI 配置 | bigfish (Skill) |
新增接口的 operationType 列表 | smallfish.config.ts oneApi 配置更新方案 |
| 4.3 | 生成 Mock 数据 | ai_mock (MCP) |
各接口 Schema | 正常/空数据/异常场景的 Mock JSON |
| 4.4 | 确认类型定义 | bigfish (Skill) |
接口 Schema | TypeScript 类型定义确认 |
阶段 5：页面与组件代码生成
目标： 基于设计稿和系分方案，生成页面和组件的实际代码。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 5.1 | 路由配置 | 文件编辑 (Edit) | 页面清单 | smallfish.config.ts pages 配置更新 |
| 5.2 | 设计稿转代码 | WeaveFoxCode |
Figma 设计稿截图、组件拆分方案 | 各组件 TSX + Less 代码骨架 |
| 5.3 | 组件逻辑填充 | bigfish (Skill) |
组件骨架、接口定义、业务规则 | 完整组件代码（含业务逻辑） |
| 5.4 | 状态管理层 | 文件编辑 (Edit) | 状态管理设计方案 | zustand store 文件 |
| 5.5 | 公共工具函数 | 文件编辑 (Edit) | 业务规则中的通用逻辑 | utils.ts / constants.ts 更新 |
人工检查点： 设计稿转代码后确认 UI 还原度。
阶段 6：接口联调与 Mock 配置
目标： 完成前后端接口联调，确保数据流通畅。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 6.1 | OneAPI 服务代码生成 | bigfish (Skill) (执行 smallfish oneapi --service) |
oneApi 配置 | src/services/{appName}/ 下的服务代码 |
| 6.2 | Mock 数据配置 | bigfish (Skill) (执行 smallfish oneapi --mock) |
Mock JSON | Mock 配置文件 |
| 6.3 | 请求中间件适配 | 文件编辑 (Edit) | 新接口特殊需求 | 请求层配置更新 |
阶段 7：自测验证
目标： 在浏览器中验证页面功能和 UI 还原度。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 7.1 | 启动开发服务 | bigfish (Skill) (执行 smallfish dev --mock) |
项目根目录 | 本地开发服务 URL |
| 7.2 | 功能验证 | frontend-verify (Skill) |
页面 URL、验收标准 | 验证报告（通过/不通过项、截图） |
| 7.3 | UI 还原度检查 | browser subagent |
页面截图 vs 设计稿 | UI 还原度报告 |
| 7.4 | 问题修复 | bigfish (Skill) |
问题列表 | 修复后的代码 |
人工检查点： 自测结果需要人工确认。
阶段 8：代码提交与审查
目标： 提交代码到 AntCode，创建 PR 并进行代码审查。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 8.1 | 代码规范检查 | Bash (执行 npm run lint) |
项目代码 | lint 通过确认 |
| 8.2 | 代码提交 | antcode-skill (Skill) |
变更文件、commit message | 分支名、commit hash |
| 8.3 | 创建 PR | antcode-skill (Skill) |
分支名、PR 描述 | PR URL |
| 8.4 | 代码审查 | code-review-gen (Skill) |
PR diff | 代码审查报告 |
| 8.5 | 关联 PR 到 Dima | linkDevActivityUrl (MCP) |
workItemId、PR URL | 关联确认 |
人工检查点： Code Review 需要人工把关。
阶段 9：部署与交付
目标： 通过 CI/CD 流水线完成构建和部署。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 9.1 | CI 流水线触发 | ads-pipeline (Skill) |
PR 合并事件 | CI 构建结果 |
| 9.2 | 部署到预发 | ads-pipeline (Skill) |
构建产物 | 预发环境 URL |
| 9.3 | 预发验证 | frontend-verify (Skill) |
预发 URL | 预发验证报告 |
| 9.4 | 发布生产 | ads-pipeline (Skill) |
预发验证通过 | 生产发布确认 |
人工检查点： 生产发布需要人工审批。
阶段 10：任务闭环与通知
目标： 完成任务状态流转，通知相关人员。
| 步骤 | 操作 | 调用工具/Skill | 输入 | 输出 |
|---|---|---|---|---|
| 10.1 | 更新 Dima 状态 | updateWorkItemStatus (MCP) |
各 workItemId | 状态更新为"已完成" |
| 10.2 | 添加完成评论 | addWorkItemComment (MCP) |
workItemId、PR/部署链接 | 评论确认 |
| 10.3 | 钉钉通知 | send-ding (Skill) |
通知人列表、消息内容 | 消息发送确认 |
| 10.4 | 更新系分文档 | skylark_doc_update (MCP) |
doc_id、实际实现细节 | 文档更新确认 |
工具/Skill 汇总
MCP 工具
| 工具 | 所属系列 | 主要用途 | 使用阶段 |
|---|---|---|---|
skylark_resolve_url |
语雀 | 解析语雀 URL 为 doc_id | 0 |
skylark_doc_detail |
语雀 | 读取文档正文 | 0, 1 |
skylark_user_book_list |
语雀 | 查找知识库 | 2 |
skylark_doc_create |
语雀 | 创建文档 | 2 |
skylark_doc_update |
语雀 | 更新文档 | 10 |
queryWorkItemDetail |
Dima | 查询工作项详情 | 0 |
queryWorkItemCanUpdateStatusList |
Dima | 查询可流转状态 | 3, 10 |
updateWorkItemStatus |
Dima | 更新工作项状态 | 3, 10 |
createTask |
Dima | 创建子任务 | 3 |
addWorkItemComment |
Dima | 添加评论 | 2, 10 |
linkDevActivityUrl |
Dima | 关联开发活动 | 8 |
search_app_info |
OneAPI | 查询应用信息 | 0 |
get_api_list |
OneAPI | 获取 API 列表 | 0 |
query_api |
OneAPI | 精确查询接口详情 | 4 |
query_api_rag |
OneAPI | 模糊搜索接口 | 4 |
ai_mock |
OneAPI | 生成 Mock 数据 | 4, 6 |
Skills
| Skill | 主要用途 | 使用阶段 |
|---|---|---|
brainstorming |
方案探索与头脑风暴 | 1 |
prd-sa |
PRD 系分文档自动生成 | 2 |
bigfish |
Smallfish 前端开发（页面、组件、OneAPI、Mock） | 4, 5, 6, 7 |
frontend-verify |
浏览器中验证页面功能 | 7, 9 |
antcode-skill |
代码提交、PR 创建 | 8 |
code-review-gen |
代码审查报告生成 | 8 |
ads-pipeline |
CI/CD 流水线管理 | 9 |
send-ding |
钉钉消息通知 | 10 |
其他工具
| 工具 | 主要用途 | 使用阶段 |
|---|---|---|
WeaveFoxCode |
设计稿多模态转代码 | 5 |
browser subagent |
浏览 Figma 设计稿、截图验证 | 1, 7 |
DimaReader |
读取 Dima 工作项内容 | 0 |
YuqueReader |
辅助读取语雀文档 | 1 |
数据流转全景图
scss
PRD (语雀) ──→ 需求摘要 ──→ 系分文档 (语雀) ──→ 任务列表 (Dima)
↓ ↓ ↓
UED (Figma) ──→ 组件拆分 ──→ 代码骨架 (TSX) ──→ 完整代码
↓ ↓ ↓
API (OneAPI) ──→ 接口Schema ──→ Service层代码 ──→ 联调验证
↓ ↓ ↓
Dima 任务 ──→ 状态流转 ──→ PR (AntCode) ──→ 部署交付人工介入检查点
| 检查点 | 阶段 | 原因 |
|---|---|---|
| 需求理解确认 | 阶段 1 完成后 | 确保 AI 对需求的理解无偏差 |
| 系分文档评审 | 阶段 2 完成后 | 技术方案需要团队评审 |
| UI 还原度确认 | 阶段 5.2 完成后 | 设计稿转代码可能有偏差 |
| 自测结果确认 | 阶段 7 完成后 | 功能验证需要人工判断 |
| Code Review | 阶段 8.4 完成后 | 代码质量需要人工把关 |
| 发布确认 | 阶段 9.4 之前 | 生产发布需要人工审批 |
关键文件
| 文件 | 用途 |
|---|---|
smallfish.config.ts |
路由(pages)、OneAPI 配置(oneApi.apps)、插件配置 |
src/services/{appName}/index.ts |
OneAPI 自动生成的服务导出入口 |
src/pages/ |
页面组件目录 |
src/components/ |
公共组件目录 |
src/store/ |
zustand 状态管理 |
src/global.ts |
全局配置（请求中间件链） |
src/common/utils.ts |
公共工具函数 |
src/common/constants.ts |
常量定义 |