丢一张图，Design Token 全部扒出来：AnyDesign 体验

设计师的AI革命：丢给它任意图片，Design Token 全部扒出来

做设计最烦的事是什么？甲方发来一张参考图说「就这种感觉，你做一个」——结果图里用的什么色值、什么字体、什么圆角，一概不知，全靠猜。

现在有个叫 AnyDesign 的 Claude Skill，专治这个问题。你随便丢给它一张截图、一个网站链接、甚至一个 Figma 文件，它直接给你吐出一份完整的 design.md——包括色板、字体、间距、组件清单、重构建议，连 WCAG 无障碍对比度报告都给你顺带生成。

它能做什么？

核心就一个功能：把任何视觉参考转成 AI 能读懂的设计规格。

• 全模式：分析整张图/网站，输出 design.md（7段式规格文档）+ design-tokens.json（W3C DTCG 标准格式）+ WCAG 对比度报告
• 元素模式：只想要一个组件？「复制这个导航栏」「还原这个 3D 插画」——直接给你代码规格或带色值的 AI 绘图提示词
• 多来源支持：本地图片、URL 网站（连 808 个 CSS 变量都能抽出来）、Figma 文件

实际效果有多离谱？

作者实测：丢一张 Vercel 首页进去，808 个 CSS 变量全部提取，没有瞎编一个色值。然后用 v0 直接重建了一版，设计师看了都说像。

再比如 poolsuite.net 的复古 Mac OS 播放器——元素模式提取了精确的 DOM 结构、像素级采样色板、bevel 阴影系统，然后让 v0 重构，直接还原出一个可用的网页 App。

为什么设计师应该关注？

因为它解决的不是「描述图片」这个低层级问题，而是「把视觉直觉转成可执行规格」这个核心痛点。每一行输出都带置信度标记（✅ 高 / ⚠️ 中 / ❓ 低），不会给你编造一个 #89ABC1 这种没来源的色值。

更重要的是：输出是 Markdown + JSON，不是某个平台的专属格式。v0、Lovable、Cursor、Bolt、Claude Code 都能直接用——没有平台锁定。

适合谁用？

• 设计师：快速建立竞品设计规范文档
• 前端工程师：拿到设计稿直接对标 token 开发，不用反复问设计师「这个间距多少」
• AI 调教党：提取设计语言后喂给 AI，做一致性更强的生成结果
• 独立开发者：没有设计资源，自己撸 UI 时有个参考基准

怎么安装？

一个命令搞定：

git clone https://github.com/uxKero/anydesign.git
cp -r anydesign ~/.claude/skills/

装完 Claude 自动识别，当你说「从这个网站提取设计系统」或「复制这个按钮」时，Skill 自动激活，不需要记任何命令。

设计是一座桥，AnyDesign 是那座桥的桥墩——让 AI 和设计师终于在同一个坐标系里工作了。

GitHub 仓库 →

GitHub: https://github.com/uxKero/anydesign