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.4 KiB

Raw Blame History

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

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

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

**检查时间**：{当前日期}
**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 存档设计稿

3.4 KiB Raw Blame History Unescape Escape