diff --git a/.claude/skills/d8d-dev/visual-diff-mode-pencil.md b/.claude/skills/d8d-dev/visual-diff-mode-pencil.md index 108a061..cde8bff 100644 --- a/.claude/skills/d8d-dev/visual-diff-mode-pencil.md +++ b/.claude/skills/d8d-dev/visual-diff-mode-pencil.md @@ -229,6 +229,7 @@ PVD-1 PER-PAGE LOOP: - **必需组件检查**: 节点整个区块缺失 → 直接判定为 🔴 严重差异 → critical_count += 1 - **多余组件检查**: 实际页面存在设计稿中没有的顶层区块 → 🟡 中等差异 → moderate_count += 1 - **组件类型一致性检查**: 设计是 `icon_font` 但实现用纯文本字符 → 🟡 中等差异 → moderate_count += 1 + - **文字样式一致性检查**: 设计文字标签(如区块标题)颜色/字体大小与实际CSS不符 → 🟡 中等差异 → moderate_count += 1 4. 结构校验通过后,使用 Read 工具分别查看设计截图和实际截图,AI 综合分析视觉差异: - 布局结构(网格/弹性/定位、对齐方式) - 组件排列(导航栏、卡片、按钮、图标) @@ -249,7 +250,7 @@ PVD-1 PER-PAGE LOOP: | 级别 | 标准 | 示例 | |------|------|------| | 🔴 严重 | 布局结构不同、关键组件缺失 | 原型有两列布局实际一列;整个设计区块在源码中缺失 | -| 🟡 中等 | 颜色/间距偏差、图标不一致、文本对齐方式不符、圆角尺寸差异、多余顶层区块、违反设计规范、组件类型不匹配 | 卡片圆角不一致;图标形状与设计不符;设计左对齐实际居中;设计稿没有的多余提示文字;存在不必要的1px边框违反无边界线原则;设计是icon-font实际用纯文本 | +| 🟡 中等 | 颜色/间距偏差、图标不一致、文本对齐方式不符、圆角尺寸差异、多余顶层区块、违反设计规范、组件类型不匹配、文字标签颜色/字体大小不符 | 卡片圆角不一致;图标形状与设计不符;设计左对齐实际居中;设计稿没有的多余提示文字;存在不必要的1px边框违反无边界线原则;设计是icon-font实际用纯文本;设计区块标题要求白色不透明实际半透灰色 | | 🟢 轻微 | 微小像素差异 | 1-2px 偏移 | ### 强制执行清单(必须严格遵守,不得跳过) @@ -260,7 +261,7 @@ PVD-1 PER-PAGE LOOP: | 情况 | 级别 | 是否计数 | |------|------|----------| | 布局结构不同、关键组件缺失 | 🔴 严重 | `critical_count += 1` | -| 颜色/间距偏差、图标不一致、文本对齐方式不符、圆角尺寸差异、多余顶层区块、违反Neon Pulse设计规范、组件类型不匹配 | 🟡 中等 | `moderate_count += 1` | +| 颜色/间距偏差、图标不一致、文本对齐方式不符、圆角尺寸差异、多余顶层区块、违反Neon Pulse设计规范、组件类型不匹配、**文字标签颜色/字体大小不符** | 🟡 中等 | `moderate_count += 1` | | 微小像素差异 (1-2px 偏移) | 🟢 轻微 | `minor_count += 1` | **门禁规则再强调**: