wangjia
d6397083c0
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>
153 lines
3.7 KiB
Markdown
153 lines
3.7 KiB
Markdown
---
|
||
name: archive-design
|
||
description: 将已确认上线的 Figma 设计稿存档到 docs/design/archive/。接收 Figma 文件链接，通过 Figma MCP 读取设计内容，自动整理并写入存档文档。在设计确认、功能上线后调用。
|
||
allowed-tools: Read, Write, Glob, Grep
|
||
user-invocable: true
|
||
argument-hint: <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`：
|
||
|
||
```markdown
|
||
# {功能名称} — 设计存档 {版本}
|
||
|
||
**存档时间**：{当前日期}
|
||
**Figma 文件**：{FIGMA_URL}
|
||
**状态**：✅ 已确认上线
|
||
|
||
---
|
||
|
||
## 设计概览
|
||
|
||
### 页面清单
|
||
|
||
| 页面名称 | Figma 画板 | 说明 |
|
||
|---------|-----------|------|
|
||
| （从 Figma 读取或手动填写）|
|
||
|
||
### 核心设计决策
|
||
|
||
（从 docs/design/{功能名称}-design-brief.md 中提取设计目标和关键决策）
|
||
|
||
---
|
||
|
||
## 设计规范
|
||
|
||
### 颜色使用
|
||
|
||
```yaml
|
||
（从 Figma 读取，或按项目基础规范填写）
|
||
主色: #1565C0 用于：顶栏、主按钮、链接
|
||
成功色: #2E7D32 用于：已审核状态标签
|
||
危险色: #C62828 用于：删除操作、库存不足警告
|
||
```
|
||
|
||
### 组件清单
|
||
|
||
```yaml
|
||
（列出本功能使用的主要组件）
|
||
复用现有组件:
|
||
- AppDataTable：通用数据表格
|
||
- StatusBadge：状态标签
|
||
- FormDialog：弹窗表单
|
||
|
||
新增组件:
|
||
- （从 Figma 读取或手动填写）
|
||
```
|
||
|
||
### 关键尺寸
|
||
|
||
```yaml
|
||
（从 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/
|
||
```
|