diff --git a/.claude/skills/design-handoff/SKILL.md b/.claude/skills/design-handoff/SKILL.md index 48f1ab1..0b9a086 100644 --- a/.claude/skills/design-handoff/SKILL.md +++ b/.claude/skills/design-handoff/SKILL.md @@ -87,50 +87,50 @@ radius: node scripts/parse-prototype.mjs ``` -**输出：** JSON 格式的 DOM 结构树，包含： -- 节点层级关系 -- 每个节点的样式属性（从 inline style + `const T = {}` + CSS class 提取） -- 文本内容 -- 嵌套组件边界推断 +**输出（stdout JSON）：** +- `tokens`: T 对象所有键值对（如 `{"T.pri": "#C4623A", ...}`） +- `inlineStyles`: 内联样式值收集（按 CSS 属性分组，如 `{"fontSize": ["32","28",...], ...}`） +- `screens`: 每个屏幕的标签和组件名（如 `[{"label": "访客首页", "component": "GuestHome"}]`） +- `components`: 所有组件函数定义列表 -**若脚本不存在：** LLM 自行解析 HTML，提取以下信息： -- 从 `const T = {}` 提取所有 Token 值 -- 遍历 DOM 树提取每个节点的 `style` 属性和文本内容 -- 按缩进/嵌套层级推断组件边界 +**若脚本不存在：** LLM 自行解析 HTML，提取 T 对象和 DOM 结构。 ### Step 2: 截图 调用 `scripts/extract-screenshots.mjs` 生成截图： ```bash -node scripts/extract-screenshots.mjs --output <输出目录> +node scripts/extract-screenshots.mjs <输出目录> ``` -**输出：** -- `screenshots/full.png` — 整页截图 -- `screenshots/sections/` — 按语义区块拆分的局部截图（若脚本支持） +**输出：** PNG 文件到输出目录，文件名由中文标签自动翻译为英文。 +- 每个 `.screen-wrap` 生成一张截图（裁掉 IosFrame 设备框、状态栏、Home Indicator） +- 无 `.screen-wrap` 时降级为整页截图 `full-page.png` -**若脚本不存在：** 指导用户手动截图或使用浏览器 DevTools 截图，保存到 `docs/design/{原型名}/screenshots/`。 +**若脚本不存在：** 指导用户手动截图，保存到 `docs/design/{原型名}/screenshots/`。 ### Step 3: Token 匹配 -调用 `scripts/match-tokens.mjs` 进行 Token 匹配： +调用 `scripts/match-tokens.mjs` 进行三层 Token 匹配： ```bash -node scripts/match-tokens.mjs <解析结果.json> --tokens +# 先保存 Step 1 的输出到临时文件 +node scripts/parse-prototype.mjs > /tmp/parse-result.json +node scripts/match-tokens.mjs /tmp/parse-result.json .design/tokens.yml ``` -**输出：** Token 匹配报告，包含： -- `matched` — 已匹配的 Token（原型中的值 → Token 名称） -- `unmatched` — 未匹配的值（需要新增 Token 或确认别名） -- `pending` — 接近匹配但需人工确认的项 +**三层匹配算法：** +1. **别名直查** — 在 `aliases.prototype_keys` 中查找已确认映射 +2. **值精确匹配** — 按 CSS 属性上下文消歧（borderRadius→radius, fontSize→typography） +3. **色彩模糊匹配** — RGB 欧几里得距离 < 30 视为近似 -**若脚本不存在：** LLM 自行匹配： -1. 读取 `.design/tokens.yml` 中的所有 Token 定义 -2. 将 HTML 中的每个样式值（颜色、字号、间距、圆角等）与 Token 比对 -3. 精确匹配 → `matched` -4. 无匹配 → `unmatched`（附带建议的 Token 名称） -5. 相似但不确定 → `pending` +**输出（stdout JSON）：** +- `matched`: 已匹配 Token（含 confidence: confirmed/pending/approximate） +- `unmatched`: 未匹配的 Token key 列表 +- `inlineTokenMap`: 内联样式值的 Token 映射 +- `summary`: 统计（confirmed/pending/approximate/unmatched 数量） + +**若脚本不存在：** LLM 自行读取 tokens.yml 执行匹配。 ### Step 4: 组件映射推断 @@ -165,14 +165,12 @@ node scripts/match-tokens.mjs <解析结果.json> --tokens 调用 `scripts/infer-interactions.mjs` 推断交互行为： ```bash -node scripts/infer-interactions.mjs <解析结果.json> +node scripts/infer-interactions.mjs rules/interaction-rules.yml ``` -**输出：** 交互行为清单，包含： -- `onClick` — 可点击元素及其预期行为（导航、弹窗、状态切换等） -- `onScroll` — 滚动相关行为（无限加载、吸顶、视差等） -- `onInput` — 表单输入行为（验证、联动、提交等） -- `transitions` — 过渡动画（hover 效果、展开折叠等） +**输出（stdout JSON）：** +- `interactions`: 每条规则的匹配结果（matched/unmatched、命中的 pattern、location 定位） +- `summary`: matched/unmatched 统计 **若脚本不存在：** LLM 自行推断： 1. 检查 DOM 中的 `onClick` / `onChange` 等事件绑定 @@ -277,13 +275,15 @@ node scripts/infer-interactions.mjs <解析结果.json> ### 目录结构 ``` -docs/design/{原型名}/ - SPEC.md # 设计规格文档（Step 6 产物） - tokens.json # Token 匹配结果（Step 3 产物） - META.yml # 元数据 - screenshots/ - full.png # 整页截图（Step 2 产物） - sections/ # 局部截图（可选） +docs/design/ + mp-00-visitor.html # 原始原型（不修改） + mp-00-visitor/ # 交付包目录（与原型同名） + ├── SPEC.md # 设计规格文档（Step 6 产物） + ├── screenshots/ # 截图目录 + │ ├── home.png + │ └── profile.png + ├── tokens.json # Token 匹配结果（Step 3 产物） + └── META.yml # 元数据 ``` ### META.yml 格式