git:20260326.b820307 to git:20260401.4fb0534

+ ## 阶段模式

+

+ 本技能根据调用方式分两种模式执行：

+

+ | 模式 | 触发方式 | 任务 | 产出 |

+ |------|--------|------|------|

+ | `/design`（默认） | `digital-team` 阶段 3，或独立调用 | 线框图 + UI 规格草稿 + 页面清单骨架 | `.ai/temp/ui-design.md`（草稿）+ `.ai/temp/ui-wireframe.html` + `.ai/context/ui-designs/_index.md`（骨架） |

+ | `/review` | `digital-team` 阶段 3b，或用户输入 `/review` | 对导入的设计稿进行视觉审核，终稿规格 | `.ai/temp/ui-design.md`（终稿）+ `.ai/context/ui-designs/_index.md`（完整） |

+

+ **独立调用且前置条件不完备时：** 若 `.ai/temp/requirement.md` 不存在且没有具体任务描述，先向用户确认目标再开始。

+

+ ### `/design` 模式（默认）

+ 1. 输出静态 HTML 线框图至 `.ai/temp/ui-wireframe.html` — 详见下方**线框图规范**

+ 2. 将 UI 设计草稿写入 `.ai/temp/ui-design.md`（控制在 800 字以内），包含：

+ - **设计层**：页面结构、核心交互、用户操作流程

+ - **UI 规格**：布局说明、组件使用规范、状态设计（加载 / 空数据 / 错误 / 禁用）

+ - **前端说明**：布局方案（Grid / Flex / 响应式）、组件拆分建议、样式变量建议

+ 3. 创建 `.ai/context/ui-designs/_index.md` — 页面清单（**始终为项目级路径，scrum 模式下路径不变**）：

+

+ ```markdown

+ # UI Design Index

+ source: stitch | figma | manual

+ last-updated: {日期}

+

+ | 页面 | 路由 | 文件 | 截图 | Sprint | 已审核 |

+ |------|------|------|------|--------|--------|

+ | {名称} | {路由} | [TBD] | [TBD] | {sprint 或 -} | false |

+ ```

+

+ 4. 输出前与用户确认

+

+ ### `/review` 模式

+

+ 由 `digital-team` 阶段 3b 或用户输入 `/review` 触发。要求设计导出文件已存在于 `.ai/context/ui-designs/`。

+

+ 1. 扫描 `.ai/context/ui-designs/` 目录，按优先级定位各页面 HTML 文件：

+ - `_index.md` 中 `file` 字段已填写 → 直接使用

+ - `{页面名}/code.html`（Stitch 按页目录结构）

+ - `{页面名}.html`（Figma 平铺导出结构）

+ 2. 更新 `_index.md`：填写实际 `file` / `screenshot` 路径，设置 `reviewed: true`，更新 `last-updated`

+ 3. 读取各页面 HTML，与 `/design` 模式线框图对比，记录结构与 Token 变化

+ 4. 更新 `.ai/temp/ui-design.md`：将草稿中的 Token 值替换为实际颜色、间距、字体；补充新增组件变体或状态

+

+ **`ui-design.md` 必须反映最终审核状态，frontend-engineer 开始工作前必须完成此模式。**

+

+

+

+ ## UI 导出平台

+

+ 从 `.ai/context/workflow-config.md` 读取 `ui_export_platform` 字段。若该字段不存在或值为 `none`，跳过本节，按标准输出流程继续执行。

+

+ ### `prompt-export` 模式

+

+ 完成 `ui-wireframe.html` 和 `ui-design.md` 后，额外生成一个文件：`.ai/temp/ui-export-prompt.md`。

+

+ 该文件包含为 AI 设计工具（Stitch、v0、Anima 等）优化的结构化提示词：

+

+ ```markdown

+ # UI 导出提示词

+

+ ## 目标工具

+ <!-- Stitch | v0 | 其他 —— 使用前填写 -->

+

+ ## 页面：{页面名称}

+

+ ### 布局

+ {用 2–4 句话描述整体页面布局，作为设计生成提示词}

+

+ ### 核心组件

+ - {组件名称}：{状态和视觉描述，写成直接可用的提示词指令}

+

+ ### 颜色 Token

+ - 主色：{来自设计 Token 的值}

+ - 背景色：{值}

+ -（对每个 Token 重复一行）

+

+ ### 交互说明

+ {描述工具需要体现的关键交互；省略动效}

+ ```

+

+ 每个页面一个块，每页提示词控制在 300 字以内。颜色 Token 仅在顶部定义一次，不在每个页面重复。

+

+ ### `figma-mcp` 模式

+

+ 完成 `ui-wireframe.html` 和 `ui-design.md` 后：

+

+ 1. 生成 `.ai/temp/ui-export-prompt.md`（同 `prompt-export` 模式）

+ 2. 读取 `.ai/context/figma-config.md`，确认凭据已填写

+ 3. 生成 `.ai/temp/design-tokens.json` — 颜色、间距、字体，符合 W3C Design Tokens 格式

+ 4. 生成 `.ai/temp/component-spec.json` — 组件树，含变体状态和设计 Token 引用

+ 5. 提示用户：

+ > "Figma MCP 集成需要在 VS Code MCP 配置中注册 `figma-mcp` MCP Server。配置完成后，使用 MCP 工具将 `design-tokens.json` 和 `component-spec.json` 推送到目标 Figma 文件（见 `.ai/context/figma-config.md` 中的 `figma_file_name`）。详见 iforgeAI README 的 MCP 配置说明。"

+

+ **安全提示：** 操作前确认 `.ai/context/figma-config.md` 已加入 `.gitignore`。

+

+ ---