---

name: design-system description: 使用此技能生成或审计设计系统、检查视觉一致性以及审查涉及样式的 PR。 origin: ECC

设计系统 — 生成与审计视觉系统

适用场景

• 启动需要设计系统的新项目
• 审计现有代码库的视觉一致性
• 重新设计之前 — 了解你现有的内容
• 当 UI 看起来不对但无法确定原因时
• 审查涉及样式的 PR

工作原理

模式 1：生成设计系统

分析你的代码库并生成一致的设计系统：

1. 扫描 CSS/Tailwind/styled-components 中的现有模式
2. 提取：颜色、排版、间距、圆角、阴影、断点
3. 研究 3 个竞品网站获取灵感（通过浏览器 MCP）
4. 提出设计令牌集（JSON + CSS 自定义属性）
5. 生成 DESIGN.md 并说明每个决策的理由
6. 创建交互式 HTML 预览页面（自包含，无依赖）

输出：DESIGN.md + design-tokens.json + design-preview.html

模式 2：视觉审计

从 10 个维度评分你的 UI（每项 0-10 分）：

1. 颜色一致性 — 你是在使用调色板还是随机十六进制值？
2. 排版层次 — 清晰的 h1 > h2 > h3 > body > caption？
3. 间距节奏 — 一致的比例（4px/8px/16px）还是随意的？
4. 组件一致性 — 相似的元素看起来是否相似？
5. 响应式行为 — 流畅还是在断点处崩溃？
6. 暗色模式 — 完整还是半成品？
7. 动画 — 有目的还是多余的？
8. 无障碍性 — 对比度、焦点状态、触摸目标
9. 信息密度 — 杂乱还是整洁？
10. 精细度 — 悬停状态、过渡、加载状态、空状态

每个维度都有评分、具体示例和精确到 file:line 的修复建议。

模式 3：AI 模板化检测

识别通用的 AI 生成设计模式：

- 到处都是多余的渐变
- 紫色到蓝色的默认配色
- 没有目的的毛玻璃卡片
- 不该圆角的地方加了圆角
- 滚动时过度的动画
- 通用的居中文字覆盖渐变背景的 hero 区域
- 没有个性的无衬线字体栈

示例

为 SaaS 应用生成：

/design-system generate --style minimal --palette earth-tones

审计现有 UI：

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

检查 AI 模板化：

/design-system slop-check