用途
design-system 用于从已有代码库生成设计系统，或对现有界面进行视觉一致性审计。它适合以下场景：新项目需要建立设计系统；审计现有代码库的视觉一致性；改版之前先摸清现有设计资产；界面看起来不对劲却说不清原因；以及审查涉及样式改动的 PR。
三种模式
模式一：生成设计系统
该模式分析代码库并生成一套内聚的设计系统，流程如下：
- 扫描 CSS、Tailwind 或 styled-components 中已有的样式模式。
- 提取颜色、字体、间距、圆角、阴影和断点。
- 通过浏览器 MCP 调研三个竞品网站作为灵感参考。
- 提出一套设计令牌方案（JSON 加 CSS 自定义属性）。
- 生成 DESIGN.md，为每一项决策写明理由。
- 创建交互式 HTML 预览页，自包含、无外部依赖。
输出产物为：DESIGN.md、design-tokens.json、design-preview.html。
模式二：视觉审计
该模式从十个维度为界面打分，每个维度 0 至 10 分：
- 颜色一致性：是在使用调色板，还是随手写十六进制色值。
- 字体层级：h1 > h2 > h3 > 正文 > 说明文字是否清晰。
- 间距节奏：是否使用一致的比例（4px/8px/16px），还是任意取值。
- 组件一致性：相似元素是否看起来相似。
- 响应式表现：断点处是流畅还是破版。
- 深色模式：是否完整，还是只做了一半。
- 动画：是有目的的使用，还是为动而动。
- 可访问性：对比度、焦点状态、触摸目标。
- 信息密度：是杂乱还是清爽。
- 打磨程度：悬停状态、过渡、加载状态、空状态。
每个维度都会给出分数、具体实例，以及修复建议并标注精确的文件与行号。
模式三：AI 味检测
该模式识别通用 AI 生成设计的典型特征，包括：
- 到处使用无意义的渐变
- 紫到蓝的默认配色
- 没有用途的“玻璃拟态”卡片
- 本不该有圆角的元素加了圆角
- 滚动时过多的动画
- 居中对齐文字叠加图库渐变的通用首屏
- 缺乏个性的无衬线字体栈
使用方式
通过命令行调用，例如：
为 SaaS 应用生成设计系统：
/design-system generate --style minimal --palette earth-tones
审计现有界面：
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
检查 AI 味：
/design-system slop-check
适用场景
适合前端与设计工程团队在项目初期建立统一视觉语言，在改版前系统性梳理现有样式问题，在代码评审中快速判断样式改动的合规性，以及排查界面“看起来不对但说不清哪里不对”的情况。
限制
以上资料未提供收费与价格信息、支持的平台范围、安装步骤、性能表现或具体效果数据，这些内容暂未提供。