---
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/
```