随手截一张图，AI 帮你还原整套设计系统！

你有没有过这种经历——看到某个 App 界面特别好看，截图下来想参考，结果只能干瞪眼看着，不知道它用的什么颜色、什么字体、什么间距规范？

现在有个 Claude Skill，能把你随便一张截图，直接还原成一套完整的设计系统文档——颜色 token、排版规范、组件规格，全部给你整理好。

这个 Skill 叫 Design System Generator，来自开发者 albertzhangz10，在 GitHub 上已经有 30 颗星。它的核心能力就一句话：丢给它任何设计参考素材，它给你生成完整的设计系统文档。

支持的输入格式很宽泛：
– 截图 / 图片（UI 界面、Mockup、设计稿导出图）
– PDF 文件（品牌规范、设计指南）
– 网页链接（设计系统官网、组件库文档）
– 文字描述（”想要类似 Linear 的极简风格”）
– 现有代码（Tailwind 配置、CSS 变量、设计 token 文件）

它会输出 3 个标准文件：

1. design.md — Token 参考
   包含所有颜色、字体、圆角、阴影、间距、动效曲线，以表格形式整理，可直接复制到代码里。

2. design-guidelines.md — 可访问性与规范
   对比度要求、触摸目标尺寸、键盘导航规则、Do’s 和 Don’ts，分颜色/形状/排版等类目。

3. design-components.md — 组件规格
   覆盖 6 大类：操作类（按钮、FAB）、输入类（文本框、开关）、导航类（标签栏、菜单）、容器类（卡片、弹窗）、数据展示类（头像、徽章）、反馈类（进度条、Toast）。每个组件都有尺寸、状态、对比度等详细说明。

实际用起来大概是这样：你丢一张竞品截图，它给你还原出一套完整的 Design Token + 组件规范，你设计师拿来直接能跟开发对接，开发拿来直接能写代码——不需要任何手动整理。

它支持的主流平台覆盖 iOS、Android、Web、Flutter、React Native 等，输出的文档格式也是标准的 Markdown，技术团队直接用。

说实话，这类 Skill 之前也有一些，但大多只能识别颜色，这个是真正在做「系统级还原」——不只是给色值，而是把整个设计语言的结构都梳理出来。

如果你经常需要参考/复刻别人的设计，或者 AI 生成的产品需要补设计规范文档，这个 Skill 值得试试。

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

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