AI 一键生成设计系统！配色字体间距全搞定

做设计系统还在手动调颜色、算间距？AI 现在能帮你一键生成完整的设计规范了。

今天挖到一个超实用的 Claude Skill——UI Design System，来自 davila7/claude-code-templates 这个开源项目。它是一个专为高级 UI 设计师打造的专业工具包，能自动生成完整的设计系统，涵盖配色、字体、间距、组件文档、响应式断点、辅助功能检查和开发交付文档。

核心能力有三个让我印象深刻：

第一，一句话生成配色方案。 你只需要给一个品牌主色，它就能自动生成完整的调色板——主色、辅助色、强调色、中性色一应俱全，而且支持 modern、classic、playful 三种风格。我试了一下，输入 #2563eb 生成 modern 风格，配色相当专业，直接可以用。

第二，自动输出设计令牌（Design Tokens）。 它能把颜色、字体、间距都转成 JSON/CSS/SCSS 格式的令牌，设计师和开发者用同一套语言，协作效率直接拉满。再也不用担心设计稿和代码对不上的问题了。

第三，响应式计算和辅助功能合规。 内置 8pt 间距网格系统，输入设计稿尺寸就能自动算响应式断点。还有 WCAG 辅助功能合规检查，确保你的设计满足可访问性标准。

使用方式超简单：

python scripts/design_token_generator.py [品牌主色] [风格] [输出格式]
# 例如
python scripts/design_token_generator.py #2563eb modern json

这个 Skill 属于 claude-code-templates 的一部分，后者是一个超级全面的 Claude Code 配置库，涵盖创意设计、开发、运维等多个场景，光 Creative Design 分类下就有 4 个 Skill，质量都很高。

如果你经常做设计系统，或者团队需要统一设计规范，这个 Skill 值得试试。

GitHub 链接：
https://github.com/davila7/claude-code-templates

GitHub: https://github.com/davila7/claude-code-templates