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

设计走查

来源于7w4.net。

将生成的 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 → 侧边栏

检查策略

优先级

报告格式

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

## 🔍 设计走查报告

**检查页面**：<文件路径>
**规范文档**：<规范文档路径>
**检查时间**：<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. 提供修复建议

这个 Skill 整体质量良好，功能专注于设计规范审查，检查维度覆盖全面，报告格式清晰易读。它能帮助用户发现页面与设计规范之间的偏差，并按严重程度排序问题，提供具体修复建议。优点是流程规范、输出结构化、考虑实际容差；不足之处是使用门槛略高，新手需要一定时间理解如何准备规范文档和运行检查。总体而言，是一个实用且经过思考设计的质量检查工具。