Appearance
Everything Claude Code 的 design-system Skill 是一套面向开发者的自动化设计系统生成与审计工具。它能一键分析代码库或在线页面，生成 DESIGN.md、设计 token、可交互预览，并对视觉一致性、无障碍、动画、响应式等 10 大维度打分，精准指出样式问题和改进建议。无论新建项目、重构，还是日常样式 PR，都能极大提升设计系统落地效率和 UI 质量。
Everything Claude Code Design System Skill：生成与审计设计系统、视觉一致性与样式 PR 审查
在现代前端开发中，设计系统（Design System）已成为保障 UI 一致性、提升协作效率的核心资产。但实际落地过程中，设计规范常常滞后于开发，样式分散、视觉风格混乱、PR 难以审查等问题屡见不鲜。Everything Claude Code 的 design-system Skill 正是为解决这些痛点而生，它将 AI 能力深度集成到设计系统的生成、审计、视觉一致性检查和样式 PR 审查全流程中，极大降低了设计与开发的沟通成本。
本指南将手把手教你如何在实际项目中用好 design-system Skill，覆盖典型应用场景、触发条件、详细操作流程、输出示例，以及与其他 Agent/Skill 的协作方式。无论你是初次接触 AI 编程助手，还是希望深度定制生产级开发流程，都能从中获得系统性提升。
1. design-system Skill 能解决什么问题？
对比传统方式，design-system Skill 带来如下核心价值：
- 自动生成设计系统：无需手动梳理样式、比对竞品，AI 可一键生成 DESIGN.md、设计 token（JSON/CSS）、交互预览页面，快速建立团队共识。
- 全方位视觉审计：对现有 UI 进行 10 维度打分（色彩、排版、间距、组件一致性、响应式、暗黑模式、动画、无障碍、信息密度、细节打磨），输出具体问题定位和修复建议。
- 样式 PR 智能审查：每次涉及样式的 PR，自动检测视觉一致性、设计规范执行情况，显著提升审查效率与质量。
- AI“设计废料”检测：识别常见的 AI 生成“无意义设计模式”（如滥用渐变、无目的玻璃拟态、无个性的字体等），防止“AI 味”污染产品界面。
2. 典型触发场景
你可以在以下时机激活 design-system Skill：
- 新项目启动，需要快速建立设计系统
- 代码库积累一段时间后，怀疑视觉风格已“跑偏”
- 准备重构或大规模改版前，想全面梳理现有 UI
- 日常样式相关 PR 合并前，需自动化审查视觉一致性
- 发现某些页面“看起来不对劲”，但难以定位具体问题
- 想排查团队/AI 生成的“千篇一律”设计废料
3. 操作流程 Step by Step
模式一：自动生成设计系统
适用于新项目或缺乏系统设计规范的代码库。
操作步骤：
运行命令
bash/design-system generate --style minimal --palette earth-tones--style：指定设计风格（如 minimal、modern、classic）--palette：指定主色调（如 earth-tones、blue、pastel）
Skill 自动执行以下流程：
- 扫描 CSS/Tailwind/styled-components 等样式文件，提取已有色彩、排版、间距、圆角、阴影、断点等设计模式
- 通过 browser MCP 自动调研 3 个竞品网站，获取设计灵感
- 生成统一的设计 token（JSON 格式 + CSS 自定义属性）
- 输出 DESIGN.md，详细说明每项设计决策的 rationale
- 生成自包含的交互式 HTML 预览页面（无需依赖）
输出结果：
DESIGN.md：设计系统说明文档design-tokens.json：设计 token 配置design-preview.html：可交互预览，便于团队讨论
示例输出目录结构：
/design-system/
├── DESIGN.md
├── design-tokens.json
└── design-preview.html模式二：视觉一致性与样式审计
适用于已有 UI 的全面健康检查、重构前分析、样式 PR 审查等场景。
操作步骤：
运行命令
bash/design-system audit --url http://localhost:3000 --pages / /pricing /docs--url：本地或线上预览地址--pages：指定需审计的页面路径
Skill 自动执行以下流程：
- 抓取指定页面的实际渲染结果
- 针对以下 10 个维度逐项打分（每项 0-10 分）：
- 色彩一致性（是否统一用色，避免随机色）
- 排版层级（h1/h2/body 等是否清晰）
- 间距节奏（是否有统一的空间尺度）
- 组件一致性（同类元素是否风格统一）
- 响应式表现（断点下是否正常）
- 暗黑模式（是否完整支持）
- 动画（是否有目的/是否过度）
- 无障碍（对比度、焦点、触控目标等）
- 信息密度（是否过于拥挤或稀疏）
- 细节打磨（hover、loading、空状态等）
- 每个维度输出具体问题示例、修复建议，并定位到具体文件和行号
输出结果：
- 结构化的审计报告，便于团队讨论和后续修复
- 可集成到 CI/CD，自动阻断不合格样式 PR
示例命令输出片段：
Color consistency: 6/10
- Found 3 random hex colors in /components/Button.tsx:42
- Suggest replacing with primary/secondary tokens
Typography hierarchy: 8/10
- h2 and h3 styles too close in /pages/docs.tsx:17
- Recommend increasing font-weight for h2
...模式三：AI“设计废料”检测
识别常见的“AI 味”设计，防止产品界面同质化。
操作步骤：
运行命令
bash/design-system slop-checkSkill 自动检测以下模式：
- 滥用渐变（所有元素都用渐变背景）
- 紫蓝渐变、无个性字体堆叠
- 无目的玻璃拟态卡片
- 不合适的圆角、过度动画
- 千篇一律的“英雄区”结构
输出结果：
- 列出所有检测到的“设计废料”实例及其位置
- 给出具体整改建议
4. 输出示例
生成设计系统：
bash
/design-system generate --style minimal --palette earth-tones输出：
/design-system/DESIGN.md/design-system/design-tokens.json/design-system/design-preview.html
审计现有 UI：
bash
/design-system audit --url http://localhost:3000 --pages / /pricing /docs输出：
- 10 维度打分表
- 每项问题定位与修复建议
检测 AI 设计废料：
bash
/design-system slop-check输出：
- 检测到的“AI 味”设计实例及具体文件行数
5. 常见配套 Agent 与 Skill 协作
- 与 Code Reviewer Agent 协同：自动将样式相关 PR 审查任务分配给 design-system Skill，提升视觉一致性把控。
- 与 Frontend Patterns Skill 联动：在生成/审计设计系统时，自动对照前端最佳实践给出更具行业参考价值的建议。
- 与 Verification Loop Skill 集成：作为端到端验证环节的一部分，确保样式变更不会破坏整体设计规范。
- 与 Workspace Surface Audit Skill 配合：全面扫描当前仓库，智能推荐 design-system Skill 的最佳应用时机。
更多关于 Skills、Hooks、Subagents、MCP 的配置与实战细节，可参考 Claude Code 快速上手指南。
6. 注意事项与最佳实践
- 建议将设计系统生成与审计纳入 CI/CD 流程，做到视觉规范“左移”
- 对于多品牌、多主题项目，可多次运行 generate/audit 并归档历史报告
- 审计报告输出建议与团队设计师协作评估，避免“AI 过度主导”设计决策
- 若遇到样式文件分散、命名混乱，建议先用 Repo Scan Skill 进行资产梳理
FAQ
Q: design-system Skill 支持哪些前端技术栈？
A: 支持主流 CSS、Tailwind、styled-components、Sass/SCSS 等，能自动识别常见样式文件和组件库。
Q: 审计报告能自动修复问题吗？
A: Skill 会定位问题并给出具体修复建议，但不会自动修改代码，需开发者或设计师确认后手动调整。
Q: 如何集成到 PR 审查流程？
A: 可通过 Hooks 或 CI 脚本在每次样式相关 PR 提交时自动运行 audit，输出报告并作为合并门槛。
Q: 是否支持多主题（如暗黑/浅色）设计系统生成？
A: 支持，generate 时可指定主题参数，Skill 会自动提取并生成多主题 token 和预览。