设计走查#

将生成的 HTML/CSS 页面，逐项对照用户提供的**设计规范文档（Markdown）**进行系统性审查，输出结构化合规报告。

触发条件#

以下任意情况时主动触发：

• 用户说「设计走查」
• 用户说「走查这个页面」
• 用户说「检查这个页面是否符合设计规范」
• 页面生成完成后，主动询问是否需要设计走查

检查流程#

阶段 0：确定规范文档与目标页面#

1. 确认设计规范文档路径：询问用户他们的设计规范 Markdown 文件路径。如果用户未指定，检查当前项目中是否存在名为 设计规范.md 或 design-spec.md 的文件。
2. 读取设计规范文档：完整读取规范内容。规范应为 Markdown 格式，包含色彩系统、字体、按钮、表单控件、间距、圆角、表格等章节。
3. 确认目标页面：询问要检查的 HTML 文件路径，或使用最近生成的页面。
4. 读取目标页面：完整读取 HTML 文件及关联的 CSS 文件（内联 style 标签、外部 .css 文件）。

阶段 1-9：逐项规范对照#

根据设计规范文档中的实际内容，按以下维度逐一提取规则并检查目标页面：

1. 色彩系统

从规范中提取所有颜色定义（主色、功能色、文字色、中性色、状态标签色），逐一检查页面中是否使用了正确的色值。

2. 字体规范

从规范中提取字体族、字号层级、字重要求，检查页面中的 font-family、font-size、font-weight。

3. 按钮规范

从规范中提取按钮尺寸（高度/最小宽度/圆角/内边距）、各状态样式（默认/Hover/Active/禁用），检查页面中所有按钮元素。

4. 表单控件

从规范中提取输入框、下拉框、单选/多选框、搜索框等控件的尺寸和状态样式，逐一检查。

5. 间距与圆角

从规范中提取间距阶梯、各类组件的圆角值，检查页面中的 margin、padding、border-radius。

6. 表格规范

从规范中提取表头/表体样式、行高、分割线、操作列颜色，检查页面中的 table 相关样式。

7. 分页器

检查页面中的分页组件是否符合规范中的按钮尺寸和各状态样式。

8. 侧边栏/导航

如页面包含侧边栏，检查菜单项高度、文字颜色、缩进层级、选中态等。

9. CSS 变量

检查页面是否使用了规范中定义的 CSS 变量（推荐做法），而非硬编码色值。

重要：以上各阶段的"规范要求"均从用户提供的设计规范文档中 动态提取，而非使用预设值。如果规范中缺少某类组件定义，跳过对应检查。

检查技巧#

• 提取实际值：从页面 CSS 中用 Grep 或直接阅读提取所有颜色值、字号、间距等

• 逐一比对：将提取的值与规范文档中的要求逐一对照

• 容差范围：色值需精确匹配（大小写不敏感）；尺寸值允许 2px 误差；间距值允许 4px 误差

• 适用性判断：页面不包含的组件类型直接跳过，不做无意义的检查

• 组件识别：通过 CSS 选择器或 HTML 结构推断组件类型

  • .btn-primary / button[type="submit"] → 主按钮
  • input[type="text"] → 输入框
  • select / .dropdown → 下拉选择器
  • table / .table → 表格
  • aside / .sidebar / .menu → 侧边栏

检查策略#

优先级#

级别含义判定标准P0 Error必须修复主色/品牌色错误、控件尺寸不一致、关键圆角错误P1 Warning建议修复字号偏差、间距偏差、Hover/Active 状态样式缺失P2 Info可选优化未使用 CSS 变量、缺少过渡动画、未使用规范推荐值

报告格式#

每次检查完毕后，输出以下格式的结构化报告：

markdown

## 🔍 设计走查报告

**检查页面**：<文件路径>
**规范文档**：<规范文档路径>
**检查时间**：<YYYY-MM-DD HH:MM>

### 📊 总览
| 指标 | 数值 |
|------|------|
| 检查项总数 | <N> |
| ✅ 通过 | <N> |
| ⚠️ 警告 | <N> |
| ❌ 错误 | <N> |
| ➖ 不适用 | <N> |
| **合规率** | **<百分比>%** |

### ❌ 错误（P0 - 必须修复）
| # | 规范章节 | 页面位置 | 当前值 | 规范值 | 说明 |
|---|----------|----------|--------|--------|------|

### ⚠️ 警告（P1 - 建议修复）
| # | 规范章节 | 页面位置 | 当前值 | 规范值 | 说明 |
|---|----------|----------|--------|--------|------|

### ℹ️ 建议（P2 - 可选优化）
| # | 规范章节 | 页面位置 | 说明 |
|---|----------|----------|------|

### ✅ 通过项
（精简列出所有通过检查的项目，按规范章节分组）

完成后的行动#

1. 按优先级排序违规项，标注最需要修复的 TOP 3
2. 对每个 P0 Error 提供具体的修复代码（CSS 代码块）
3. 合规率低于 80% 时：建议 重新生成页面 而非逐项修复，同时附上生成时需遵循的关键规范要点
4. 修复后重新检查以验证通过

注意事项#

• 完整读取目标页面的 HTML + 内联 CSS + 外部 CSS 文件
• 如果页面使用第三方 UI 库（Element Plus、Ant Design 等），重点检查自定义覆盖样式
• 检查基于 CSS 源码为主（render 环境不可用时）
• 设计规范的格式可能不同（表格、列表、代码块），需灵活解析提取规则
• 如果用户有多种规范（如移动端+PC端），请用户明确指定使用哪个

示例对话#

用户：「检查 result.html 是否符合我的设计规范」

Skill 响应：

1. 询问设计规范文档路径
2. 读取规范和页面
3. 逐项对比
4. 输出合规报告
5. 提供修复建议