design-system
使用此技能生成或审计设计系统，检查视觉一致性，并审查涉及样式的PR。
它会碰到什么
扫了多少1 个文本文件，1 KB
它会碰到什么不碰外部（只输出文字）
命中总数0 处
命中统计严重 0 · 高 0 · 中 0 · 低 0
这一栏是扫描器报的事实，不是结论。命中多不等于有毒（安全工具、规则库、示例脚本本来就会包含危险写法），命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系，需要你自己看。
技能内容
设计系统 — 生成与审查视觉系统
使用场景
- 启动需要设计系统的新项目
- 审查现有代码库的视觉一致性
- 在重新设计前——了解现有状况
- 当界面看起来"不对劲"但无法定位原因时
- 审查涉及样式修改的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个维度对界面进行评分（每项0-10分）：
1. 色彩一致性 — 你使用的是自己的调色板还是随机的十六进制值？
2. 排版层级 — 清晰的 h1 > h2 > h3 > 正文 > 说明文字？
3. 间距节奏 — 一致的尺度（4px/8px/16px）还是随意设置？
4. 组件一致性 — 相似的元素看起来是否相似？
5. 响应式行为 — 在断点处流畅还是混乱？
6. 深色模式 — 完整实现还是半途而废？
7. 动画 — 有目的性还是多余？
8. 无障碍性 — 对比度、焦点状态、触摸目标
9. 信息密度 — 杂乱还是整洁？
10. 细节打磨 — 悬停状态、过渡效果、加载状态、空状态每个维度都会获得评分、具体示例以及包含精确文件:行号的修复方案。
模式3：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想直接用这个技能？
本站把开放许可（MIT / Apache 等）的技能按仓库打包整理到网盘，点一下转存到你自己的网盘，不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接，不打包。
同名技能的其他版本
有 3 个不同仓库或目录里都有叫 design-system 的技能。它们内容并不相同，别混用：
- affaan-m/ECC — アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
- affaan-m/ECC — Use this skill to generate or audit design systems, check visual consistency, and review P