AI 生成界面丑？是你没上设计系统这课

AI 生成界面丑？是你没上设计系统这课

用过 AI 生成代码的设计师大概都有过这个体验：Claude 给你吐出来一个”功能齐全”的前端——按钮有了，颜色有了，布局也有了——但看起来就是那种扑面而来的”AI 味”。圆角统一、颜色寡淡、间距机械，像是从模板里 Ctrl+C 出来的。

问题不在 AI 不努力，而在没有给它一套设计系统。

最近发现一个 Claude Skill——design-system-patterns，来自 GitHub 3.3 万星的超大型 Agent Skill 仓库 wshobson/agents。这个 Skill 专门教 AI 如何构建一套真正能用的设计系统，不只是颜色代号，而是一套有逻辑、有层次、可维护的架构。

三层 Token 架构，AI 也能读懂

设计系统的核心是 Token（设计变量）。这个 Skill 教 AI 用三层结构组织 Token：

• Primitive Layer：原始值。比如 #3b82f6，只是一个颜色数字，没有任何语义。
• Semantic Layer：语义层。比如 --color-interactive-primary，不再是一个颜色，而是一个”这个界面里代表主要交互的颜色”——换主题时只要改这一层。
• Component Layer：组件层。比如 --button-bg，直接对应组件的具体用途。

这个分层模式是 Tailwind、Figma Variables、Style Dictionary 等主流工具的底层逻辑，AI 学会了就知道什么时候该引用哪一层，而不是硬编码值。

主题切换、组件架构一次搞定

除了 Token，这个 Skill 还覆盖了：

• 主题切换：CSS Custom Properties + React Context 方案，支持亮/暗模式、系统偏好检测、持久化存储
• 组件架构模式：Compound Components（复合组件）、Polymorphic Variants（多态变体）、Slot-based Composition（插槽组合）——这正是 Radix UI、shadcn/ui 背后的设计哲学
• 跨平台输出：通过 Style Dictionary 把 Token 同步到 CSS、iOS、Android、SCSS，与 Figma 保持实时对齐

为什么设计师值得装

你可能觉得”我又不是开发者，装个 Claude Skill 干嘛”？但现实是：

现在用 AI 工具辅助设计的同学越来越多，AI 画出来的组件往往”能用但不好看”，根本原因是 AI 拿到的是开放性提示词，没有任何设计约束。这个 Skill 相当于给 AI 装了一套视觉宪法——它学会了这些模式之后，生成的东西天然就带体系感。

同时，这也是一个很好的设计系统学习资料。Skill 里每一个模式都有错误示例 + 正确示例，直接看代码就能理解为什么 compound components 优于布尔 props。

怎么安装

一行命令搞定：

git clone https://github.com/wshobson/agents.git
cp -r agents/plugins/ui-design/skills/design-system-patterns ~/.claude/skills/

然后在 Claude Code 里直接触发——说”帮我搭建一套暗色主题的设计系统”，它就会按这个 Skill 的模式来构建。

GitHub：https://github.com/wshobson/agents

Skill 路径：plugins/ui-design/skills/design-system-patterns

仓库 Stars：33,871 ★

GitHub: https://github.com/wshobson/agents