别再用手调颜色了！一个 Prompt 生成整套设计系统

别再用手调颜色了！一个 Prompt 生成整套设计系统

做设计最烦的是什么？

不是没灵感，是有了灵感之后还要手动调一整套颜色、字体、间距——重复劳动，磨人。

我最近挖到一个 Claude Code 的 Skill，叫 UI Design System，来自 Smithery 热门榜，19,892 次安装——这个数字在设计类 Skill 里相当离谱。

它能干什么？

一句话：把你脑子里一个品牌色，变成一套完整的设计系统。

输入：

python scripts/design_token_generator.py "#FF6B6B" modern json

输出：
– 完整调色板（主色/中性色/语义色）
– 模块化字体层级
– 8pt 间距系统
– 阴影 & 动效 token
– 响应式断点
– 多格式导出（JSON / CSS / SCSS）

三种风格可选：modern、classic、playful，直接对应你项目的调性。

为什么设计师值得试试？

省时间。 以前从 0 搭设计系统，光颜色就要调十几组。现在一个命令搞定，还能导出设计师–开发者都能用的 token 文件。

接设计–开发桥。 导出的 CSS/SCSS token 直接给前端用，减少「设计师说这个蓝要调一点，开发说哪个蓝」的沟通成本。

无障碍合规内置。 生成的颜色对比度自动满足 WCAG，不用你再拿插件一个个验。

适合谁用？

• UI/UX 设计师，想快速搭 design system 原型
• 前端开发，需要规范的 design token
• 产品经理，想快速出高保真设计稿
• AI 开发者，用 Claude Code 做界面类项目

怎么装？

在 Claude Code 里直接跑：

/install ui-design-system

或者去 Smithery 搜 davila7/ui-design-system，一键安装到你的 AI coding 工具。

GitHub 仓库里有完整文档和示例脚本，免费开源，可以先跑 Demo 感受一下。

🔗 https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/ui-design-system

GitHub: https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/creative-design/ui-design-system