还在手撸 Design Token？我用 Claude 直接生成完整设计系统！

做设计的同学，有没有被这些问题折磨过——

配色全靠感觉，加个新品牌就得重来；组件样式散落各地，改一处破坏十处；设计规范写完没人看，开发说”你这文档太抽象了”……

今天挖到一个超硬核的 Skill，叫 Design System Creator，来自前 Meta 工程师 Erich Owens（12 年经验，12 个专利那种大佬）。它能让你用对话的方式，直接生成一套完整的设计系统——从 Token 到 CSS 架构到设计圣经，一气呵成。

它能做什么？

这个 Skill 专注于三-tier Token 架构：

第一层：Primitive（原始值）
直接用 OKLCH 色值定义基础颜色、间距。你没看错，是 OKLCH，不是 HEX 或 HSL——OKLCH 是目前最符合人眼感知的颜色格式，等亮度的 L 值真的看起来一样亮，设计师和开发者终于能在同一个频道了。

第二层：Semantic（语义层）
把原始值映射成有意义的名字，比如 --color-primary 对应蓝色，--space-component-padding 对应组件间距。这一层是主题化的关键——换品牌只需要改这一层。

第三层：Component（组件层）
组件直接引用语义 Token，而不是硬编码值。按钮背景用 --button-bg，它背后连着 --color-primary，再背后连着具体的 OKLCH 值。

为什么设计师必须关注？

很多人以为设计系统是前端的事，其实不对。设计师才是设计系统的第一受益人——

用这个 Skill，你能让 Claude 帮你生成一份设计圣经（Design Bible），包含：
– 品牌基因 + 设计原则
– 完整色彩系统（含暗色模式）
– 字体层级 + 间距比例
– 组件状态文档（default/hover/active/disabled/focus）
– 无障碍指南（WCAG 对比度要求）

而且它是Opinionated的——强制用 OKLCH、强制三层 Token、强制 ITCSS 组织方式。你不需要懂 CSS 架构，只需要说”我要做设计系统”，Claude 就能给你一套专业、可扩展的完整方案。

适用场景

• 创业公司：从零搭 design system，不需要养专门的前端架构师
• 设计团队：建立统一语言，让设计稿和代码实现一致
• 品牌换肤：多品牌/白标产品，改语义层就能换整套主题
• 设计交接：生成文档驱动的设计系统，减少沟通损耗

怎么安装？

一行命令搞定：

npx skills add https://github.com/erichowens/some_claude_skills --skill design-system-creator

或者通过插件市场：

/plugin marketplace add erichowens/some_claude_skills
/plugin install design-system-creator@some-claude-skills

安装好后，直接跟 Claude 说：”帮我设计一个 SaaS 产品的基础设计系统”，剩下的交给 Skill。

GitHub：https://github.com/erichowens/some_claude_skills

这个仓库本身是个大型 Skill 合集（135+ 个生产级 Skill），design-system-creator 是其中最受欢迎的设计类 Skill 之一，113 Stars，安装量持续增长。值得设计师和前端同学一起收藏研究。

GitHub: https://github.com/erichowens/some_claude_skills