设计走查

SKILL.md

---
name: design-compliance-check
description: |
  设计走查：将生成的 HTML/CSS 页面对照设计规范文档逐项审查，输出结构化合规报告。
  当用户说"设计走查"、"走查页面"、"检查是否符合设计规范"、"审查设计合规"时触发。
  生成任何 HTML/CSS 页面后也可主动触发，确保输出符合设计规范。
  用户可指定任意设计规范文档路径，skill 会自动读取并逐项对照检查。
agent_created: true
---

# 设计走查

将生成的 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. 提供修复建议