把竞品截图丢进去，设计系统就出来了？这个 Claude Skill 让设计师少加班

你有没有过这种经历——看到一个好看的 App UI，想借鉴它的设计语言，结果自己手动提取配色、字体、间距……一套下来两小时没了？

或者接了个新项目，老板丢给你一张截图说「照着这个风格做」，然后就没有然后了。

最近我在 GitHub 上挖到一个超实用的 Claude Skill，叫 Design System Generator，作者是 @albertzhangz10。它解决的就是这个问题：给你任意设计参考材料，自动生成一套完整的设计系统文档。

它能做什么？

你扔给它这些东西的任意组合，它就能干活：

• 截图 / UI 图片
• PDF 品牌规范文档
• 设计系统文档链接
• 文字描述（比如说「Material Design 风格」）
• 甚至直接丢 CSS / Tailwind 配置文件

然后它会输出 3 个文件：

• design.md — 完整的 Design Token 表格（颜色、字体、间距、圆角、阴影、动效全部结构化）
• design-guidelines.md — 无障碍规范 + Do’s/Don’ts
• design-components.md — 组件规格说明

实际场景怎么用？

举几个我想到的例子：

1. 借鉴竞品设计：看到某个 App 的 UI 很棒，截图丢给它，直接拿到完整的设计 token，自己开发时照着调用就行。

2. 快速建设计系统：接了新客户，把对方的品牌手册 PDF 扔进去，自动生成 token 表，不用一个个手填。

3. 设计系统审计：把自己项目的 CSS 文件扔进去，它会还原出完整的设计规范，帮你发现不一致的地方。

4. 团队交接文档：设计师交付的截图 + 开发者的 CSS 文件一起丢进去，生成双方都能看懂的规范文档。

上手体验

这个 Skill 的工作流很顺：输入材料 → Claude 分析 → 输出 3 个 Markdown 文件。你可以直接把生成的文件放进自己的项目里，设计师和开发者都能用。

特别是做 AIGC 产品设计的同学，现在 AI 绘图工具生成的 UI 越来越好看，想把它们的设计语言沉淀下来？这个工具就特别适合做这件事。

目前 GitHub 上 34 Stars，还很小众，但内容质量很高，属于那种「知道的人不多但用过的都说好」的工具。

👉 github.com/albertzhangz10/design-system-skill

GitHub: https://github.com/albertzhangz10/design-system-skill