design-system

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

何时使用

• 启动需要设计系统的新项目
• 审计现有代码库的视觉一致性
• 在重新设计之前——了解现有情况
• 当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