设计系统 — 生成与审计视觉系统
何时使用
- 启动需要设计系统的新项目时
- 审计现有代码库的视觉一致性时
- 在重新设计之前——了解你拥有什么
- 当 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. 精细度 — 悬停状态、过渡、加载状态、空状态
每个维度都有一个分数、具体示例以及包含精确文件:行号的修复建议。
模式 3：AI 内容检测
识别泛泛的 AI 生成设计模式：
- 到处滥用渐变
- 紫色到蓝色默认配色
- 没有目的的“毛玻璃”卡片
- 不该有圆角的地方加圆角
- 过度的滚动动画
- 带居中文字和默认渐变的通用英雄区域
- 缺乏个性的无衬线字体堆栈
示例
为 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