设计系统 — 生成与审查视觉系统
使用时机
- 启动需要设计系统的新项目
- 审计现有代码库的视觉一致性
- 进行改版前——了解当前状态
- 当 UI 看起来“不对劲”但无法确定原因时
- 审查涉及样式的 Pull Request
工作原理
模式 1：生成设计系统
扫描代码库并生成统一的设计系统：
1. 扫描 CSS / Tailwind / styled-components 中的现有模式
2. 提取：颜色、排版、间距、圆角、阴影、断点
3. 研究 3 个竞品网站以获取灵感（通过浏览器 MCP）
4. 提出设计令牌集（JSON + CSS 自定义属性）
5. 生成 DESIGN.md，包含每个决策的 rationale
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. 精细度——悬浮状态、过渡、加载状态、空状态
每个维度都会获得分数、具体示例以及包含确切文件:行的修复建议。
模式 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