Claude 代码了这个设计系统 Skill！66 个真实品牌的 Design Token 直接用

做设计的时候，有没有遇到过这种情况——品牌色是什么？按钮圆角用多少？字体层级怎么定？每次都要从零开始翻 Figma 文件，或者直接凭感觉来？

今天挖到一个让我眼前一亮的 Skill——design-kit，来自开源项目 UltraThink。它不是那种单独的工具 Skill，而是一套完整的设计系统基础设施。

它能做什么？

简单说，这个 Skill 把设计师和开发者常用的设计系统搭建流程，全部封装进了 Claude Code。你告诉它你想要什么风格，它就能给你生成一整套可用的设计方案。

核心能力包括：设计系统架构搭建、Design Token 生成、组件规范定义、视觉原则制定，还直接接入了 Figma。最夸张的是——它内置了 66 个真实品牌的 DESIGN.md 文件，包括 Linear、Stripe、Figma、Vercel 这些我们每天都在用的产品，直接拿来当参考。

为什么设计师应该关注？

传统的 Design Token 工作流，是设计师手动维护一份设计规范文档，开发再转换成代码。这个 Skill 相当于把这个流程反过来——你用自然语言描述需求，Claude 直接给你输出符合品牌规范的 Design Token 文件，可以直接用在 Tailwind v4 或者 CSS 自定义属性里。

它还内置了一个品牌设计系统加载器，能读取现成的 DESIGN.md 文件做融合——比如你可以说「把 Linear 的布局和 Stripe 的颜色结合起来」，它会帮你做合并和冲突处理。

适合谁用？

如果你经常需要快速出设计稿，或者团队没有统一的设计系统，这个 Skill 能帮你省大量重复劳动。UI 设计师、品牌设计师、产品经理都可以试试。

GitHub 仓库目前 44 Stars，定位是 Graphic Designers 类目，最近一次更新是 2026 年 5 月，还是热乎的。

怎么安装？

在 Claude Code 里直接克隆仓库就行：

git clone https://github.com/InugamiDev/ultrathink-oss ~/.claude/skills/

然后在 .agents/skills/design-kit/ 目录下找到 SKILL.md，Claude Code 会自动识别。

说实话，这种把设计系统工程化的思路，可能是未来 AI 设计工具的方向——不是替代设计师，而是帮设计师把那些繁琐的重复劳动自动化。

https://github.com/InugamiDev/ultrathink-oss

GitHub: https://github.com/InugamiDev/ultrathink-oss