---
name: design-review
description: 对比 Figma 设计稿与 Flutter 实现代码，输出还原度差异报告。在 flutter-coder 实现完成后、上线前调用，确保实现与设计一致。
allowed-tools: Read, Write, Glob, Grep
user-invocable: true
argument-hint: <figma-url> <功能名称>
---

# 设计还原度检查工作流

你正在执行 `/design-review` 命令，对比 Figma 设计稿与 Flutter 实现的差异。

## 参数解析

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

## 执行步骤

### Step 1：读取 Figma 设计规范

使用 Figma MCP 读取：
- 各页面的组件结构和层级
- 颜色值（精确到 hex）
- 字体大小、字重
- 间距数值（padding、margin、gap）
- 组件状态（hover、disabled、selected 等）

如果 Figma MCP 不可用，读取 `docs/design/{功能名称}-design-brief.md` 中的设计规范作为对照基准。

### Step 2：读取 Flutter 实现代码

查找并读取相关实现文件：

```
client/lib/screens/   →  找到功能名称相关的 screen 文件
client/lib/widgets/   →  找到使用的组件文件
client/lib/models/    →  数据模型
```

重点检查：
- 颜色是否使用了正确的 hex 值或 Theme 变量
- 字体大小、字重是否与设计一致
- 间距（padding/margin）数值是否匹配
- 组件状态样式是否完整实现
- 布局结构是否与设计稿一致

### Step 3：生成差异报告

写入 `docs/review/{功能名称}-design-review.md`：

```markdown
# {功能名称} — 设计还原度报告

**检查时间**：{当前日期}
**Figma 设计稿**：{FIGMA_URL}
**检查范围**：{列出检查的 Flutter 文件}

---

## 总体评分

还原度：**X / 10**
（10分=完全一致，8分=细节有出入，6分=布局基本对但样式差异明显）

---

## 必须修复（影响视觉一致性）

### [DR-001] 颜色不一致
**页面**：入库单列表 — 状态标签
**设计稿**：已审核状态背景色 `#E8F5E9`，文字 `#2E7D32`
**实现**：背景色 `Colors.green.shade100`（实际值 `#DCEDC8`，偏浅）
**文件**：`client/lib/widgets/status_badge.dart:34`
**修复**：改为 `Color(0xFFE8F5E9)`

### [DR-002] 间距不一致
**页面**：新建入库单弹窗
**设计稿**：表单字段间距 16px
**实现**：`SizedBox(height: 12)` — 差了 4px
**文件**：`client/lib/screens/stock_in/stock_in_form.dart:67`
**修复**：改为 `SizedBox(height: 16)`

---

## 建议调整（不影响主要功能，但影响精细度）

### [DR-003] 字体字重
**页面**：表格标题行
**设计稿**：`FontWeight.w600`
**实现**：`FontWeight.bold`（实际是 w700，略粗）
**建议**：统一改为 `FontWeight.w600`

---

## 通过检查项

- ✅ 整体布局结构与设计稿一致
- ✅ 主色 #1565C0 使用正确
- ✅ 顶栏高度 56px 正确
- ✅ 侧边栏宽度 200px 正确
- ✅ 状态流转交互与设计一致

---

## 修复建议

优先处理 DR-001、DR-002（颜色和间距是最直观的差异）。
修复后可再次运行 `/design-review` 验证。
```

### Step 4：完成提示

输出：
```
✅ 设计还原度检查完成

📋 报告路径：docs/review/{功能名称}-design-review.md
🔍 发现问题：必须修复 X 项，建议调整 Y 项

后续步骤：
1. 将报告发给 flutter-coder 修复（必须修复项）
2. 修复后再次运行 /design-review 验证
3. 全部通过后运行 /archive-design 存档设计稿
```