让 AI 生成的设计稿不再”AI 味”——Claude UI Design System 尝鲜

做过 UI 的同学都知道，让 AI 照着你脑子里那个”感觉”去生成页面，难度不亚于让猫叫出声——要么出来的全是千篇一律的”AI 味”，要么风格飘忽，三句不到就跑偏了。

最近挖到一个挺有意思的开源 Skill，叫 Claude UI Design System，专门来解决这个问题。

它能做什么？

简单说，它是一套完整的 AI 设计系统工具包，把 6 种成熟的设计风格做成预设——

• Minimalist Modern：经典极简，白底大字，留白充足
• Bold Brutalist：高对比度、粗体字、0 圆角，视觉冲击力拉满
• Soft Neumorphic：柔和阴影、低对比背景，摸起来有触感的那种
• Glass Aesthetic：毛玻璃透明质感，这两年很火的那种
• Timeless Classic：保守专业，高可访问性，企业级标配
• Bleeding Edge Experimental：前沿实验，2025 年新趋势

每个风格背后都有对应的色板、字体、阴影、圆角等 CSS token，Claude 生成页面时会自动套用，不会自由发挥跑出奇怪配色。

支持新建和存量两种场景

新项目（Greenfield）：一句 prompt 让 Claude 帮你搭建整个设计系统——设计 token、组件库脚手架、主题系统、设计文档，一次搞定。

举个例子：”Set up design system foundation for my React Native fitness app using glass-aesthetic preset”，Claude 会自动生成 token、文件夹结构、基础组件，再套上毛玻璃风格。

存量项目（Brownfield）：已有的 UI 代码可以逐步改造，按设计系统重新设计，还能迁移到新风格预设下。

怎么装？

在 Claude Code 里运行：

/plugin marketplace add apexscaleai/claude-ui-design-system
/plugin install ui-design-system@ui-design-system

装完重启 Claude Code，直接开聊就行。

也支持全局安装或个人/团队项目级安装，文档里写得很清楚。

适合谁用？

设计师想快速验证风格概念 → 开发者想让 AI 生成的设计稿更靠谱 → 产品经理需要随时出高保真原型 → 设计系统团队需要维护多套风格规范——这几类人都能用上。

MIT 协议，商用无忧。

👉 GitHub 仓库戳这里

GitHub: https://github.com/VincentRoole/claude-ui-design-system