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>
128 lines
3.4 KiB
Markdown
128 lines
3.4 KiB
Markdown
---
|
||
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 存档设计稿
|
||
```
|