diff --git a/.claude/skills/archive-design/SKILL.md b/.claude/skills/archive-design/SKILL.md deleted file mode 100644 index 35960bb..0000000 --- a/.claude/skills/archive-design/SKILL.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -name: archive-design -description: 将已确认上线的 Figma 设计稿存档到 docs/design/archive/。接收 Figma 文件链接，通过 Figma MCP 读取设计内容，自动整理并写入存档文档。在设计确认、功能上线后调用。 -allowed-tools: Read, Write, Glob, Grep -user-invocable: true -argument-hint: <功能名称> [版本号，默认v1] ---- - -# 设计存档工作流 - -你正在执行 `/archive-design` 命令，将已确认的 Figma 设计存档。 - -## 参数解析 - -``` -$ARGUMENTS 格式： <功能名称> [版本] -示例：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/ -``` diff --git a/.claude/skills/design-review/SKILL.md b/.claude/skills/design-review/SKILL.md deleted file mode 100644 index 661e13c..0000000 --- a/.claude/skills/design-review/SKILL.md +++ /dev/null @@ -1,127 +0,0 @@ ---- -name: design-review -description: 对比 Figma 设计稿与 Flutter 实现代码，输出还原度差异报告。在 flutter-coder 实现完成后、上线前调用，确保实现与设计一致。 -allowed-tools: Read, Write, Glob, Grep -user-invocable: true -argument-hint: <功能名称> ---- - -# 设计还原度检查工作流 - -你正在执行 `/design-review` 命令，对比 Figma 设计稿与 Flutter 实现的差异。 - -## 参数解析 - -``` -$ARGUMENTS 格式： <功能名称> -示例：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 存档设计稿 -```