Files

T

wangjia d6397083c0 feat(agents): 新增 UI 设计师 Agent + Figma MCP + 设计存档 Skills

UI 设计师 Agent (.claude/agents/ui-designer.md):
- 自动判断设计复杂度
- 简单变更：直接输出文字规范，flutter-coder 立即实现
- 复杂设计：输出 Figma 设计需求文档并暂停，等用户确认设计稿
- 包含完整视觉规范（颜色、字体、间距、状态标签）

Figma MCP 配置 (.mcp.json):
- 接入 Figma 官方 MCP Server (https://mcp.figma.com/mcp)
- 支持读取设计文件、组件、Token

Skills (.claude/skills/):
- /archive-design：将确认上线的设计存档到 docs/design/archive/
  含 Figma 链接、设计决策、组件清单、版本历史
- /design-review：对比 Figma 设计稿与 Flutter 实现，输出还原度报告
  标注颜色/间距/布局差异，分必须修复和建议调整两级

更新 CLAUDE.md：
- 工作流中加入 ui-designer（架构后、编码前）
- 上线前运行 /design-review，上线后运行 /archive-design

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2026-04-04 09:20:58 +08:00

3.7 KiB

Raw Blame History

name, description, allowed-tools, user-invocable, argument-hint

name	description	allowed-tools	user-invocable	argument-hint
archive-design	将已确认上线的 Figma 设计稿存档到 docs/design/archive/。接收 Figma 文件链接，通过 Figma MCP 读取设计内容，自动整理并写入存档文档。在设计确认、功能上线后调用。	Read, Write, Glob, Grep	true	<figma-url> <功能名称> [版本号，默认v1]

设计存档工作流

你正在执行 /archive-design 命令，将已确认的 Figma 设计存档。

参数解析

$ARGUMENTS 格式：<figma-url> <功能名称> [版本]
示例：https://figma.com/file/xxx 入库单 v1

从 $ARGUMENTS 中提取：

FIGMA_URL：Figma 文件链接
FEATURE_NAME：功能名称（用于目录和文件命名）
VERSION：版本号，未提供则默认 v1

执行步骤

Step 1：读取 Figma 文件

使用 Figma MCP 工具读取设计文件内容：

获取所有页面列表
获取主要页面的组件结构
获取设计 Token（颜色、文字样式、间距）
获取组件列表和说明

如果 Figma MCP 不可用，跳过此步骤，仅记录链接和手动填写的信息。

Step 2：读取已有需求和架构文档

读取以下文件，补充存档上下文：

docs/requirements/{功能名称}.md（如存在）
docs/api/{功能名称}.md（如存在）
docs/design/{功能名称}-design-brief.md（如存在）

Step 3：写入存档文档

创建 docs/design/archive/{功能名称}/{版本}/design-archive.md：

# {功能名称} — 设计存档 {版本}

**存档时间**：{当前日期}
**Figma 文件**：{FIGMA_URL}
**状态**：✅ 已确认上线

---

## 设计概览

### 页面清单

| 页面名称 | Figma 画板 | 说明 |
|---------|-----------|------|
| （从 Figma 读取或手动填写）|

### 核心设计决策

（从 docs/design/{功能名称}-design-brief.md 中提取设计目标和关键决策）

---

## 设计规范

### 颜色使用

```yaml
（从 Figma 读取，或按项目基础规范填写）
主色:   #1565C0  用于：顶栏、主按钮、链接
成功色: #2E7D32  用于：已审核状态标签
危险色: #C62828  用于：删除操作、库存不足警告

组件清单

（列出本功能使用的主要组件）
复用现有组件:
  - AppDataTable：通用数据表格
  - StatusBadge：状态标签
  - FormDialog：弹窗表单

新增组件:
  - （从 Figma 读取或手动填写）

关键尺寸

（从 Figma 读取，或手动填写关键布局尺寸）
弹窗宽度:   720px
表格行高:   48px
工具栏高:   52px

交互说明

（描述关键交互逻辑，如状态流转、操作确认弹窗等）

与需求的对应关系

用户故事	设计实现
（从需求文档提取，对应到具体设计页面）

历史版本

版本	时间	变更说明
{版本}	{当前日期}	初始版本


### Step 4：更新设计索引

在 `docs/design/archive/INDEX.md` 中追加一行记录（如文件不存在则创建）：

```markdown
# 设计存档索引

| 功能 | 版本 | 存档时间 | Figma 链接 | 存档文档 |
|------|------|---------|-----------|---------|
| {功能名称} | {版本} | {日期} | [查看]({FIGMA_URL}) | [文档](/{功能名称}/{版本}/design-archive.md) |

Step 5：完成提示

输出：

✅ 设计存档完成

📁 存档路径：docs/design/archive/{功能名称}/{版本}/design-archive.md
🔗 Figma 链接：{FIGMA_URL}
📋 索引已更新：docs/design/archive/INDEX.md

下一步建议：
- 运行 /design-review 对比实现与设计稿的差异
- 提交存档文件到 git：git add docs/design/archive/

3.7 KiB Raw Blame History Unescape Escape