用途：该技能面向需要建立或检查视觉设计体系的场景，包括新项目搭建设计系统、审计现有代码库的视觉一致性、改版前梳理现状、排查界面“看起来不对”的原因，以及审查涉及样式的 PR。
主要能力：分为三种模式。生成模式会扫描 CSS、Tailwind 或 styled-components 中的既有模式，提取颜色、字体、间距、圆角、阴影和断点，通过浏览器 MCP 参考三个竞品站点，提出设计令牌集（JSON 与 CSS 自定义属性），生成带决策理由的 DESIGN.md，并创建无依赖的自包含 HTML 预览页，输出 DESIGN.md、design-tokens.json 和 design-preview.html。审计模式从颜色一致性、字体层级、间距节奏、组件一致性、响应式、深色模式、动画、无障碍、信息密度和打磨度十个维度各打 0-10 分，给出具体示例和带 file:line 的修复建议。AI 套路检测模式可识别无意义渐变、紫到蓝默认配色、无目的的玻璃拟态卡片、不该圆角却圆角、过度滚动动画、通用居中英雄区和缺乏个性的无衬线字体栈等模式。
使用方式：示例命令包括 /design-system generate --style minimal --palette earth-tones、/design-system audit --url http://localhost:3000 --pages / /pricing /docs 以及 /design-system slop-check。
适用场景与限制：适合前端与设计协作中的视觉规范建立和审查。资料未说明其支持的框架范围、运行环境要求、收费方式或准确率，相关细节暂未提供。