Claude一眼看穿任意设计：anydesign把网站/图片/Figma变成机器能读的设计系统

赵一凡 内容创作者 2026-10-03 48 阅读

你有没有过这种痛苦——看到一个大神的网站设计，想学但不知道从哪下手？颜色、字体、间距、组件……看着人家的成品流口水，自己的 AI 却永远复制不出那个味道。

anydesign 就是来解决这个问题的。

它是一个 Claude Skill，核心能力就一个：把任意设计（网站、图片、Figma 文件）变成一份机器能读的设计规格文档。

它能做什么

全站设计系统提取：丢给它一个 URL，它能提取出完整的设计令牌（颜色、字体、间距、阴影……），生成 7 个 section 的 design.md 文件，外加一份 W3C DTCG 格式的 design-tokens.json。这个 JSON 可以直接导入 Style Dictionary、Figma Variables、Tokens Studio——设计师用 Figma，开发者用代码，两边无缝对齐。

元素模式：不需要整个设计系统？只要那个导航栏、那个卡片、那个 3D 插图？直接说「复制这个」就行。它会精确捕获目标元素的 DOM 位置、像素级色板、真实的阴影系统，然后给你一个重建 Prompt——直接丢给 v0、Lovable、Cursor、Bolt 就能跑出一样的效果。

游戏资产一致性：AI 生成游戏美术最怕风格不统一。anydesign 只需要一张关键图，就能提取出调色板、光照配方、色彩分配规则，生成一个 Prompt Pack。用这个 Pack 跑出来的所有素材共用同一套视觉基底，一致性拉满。

实际效果什么样

官方给了一个超夸张的例子：它分析了 vercel.com，提取了 808 个 CSS 自定义属性，没有一个是「猜」出来的，然后 v0 根据这份 spec 重建了整个网站。

还有一个更有意思的：它从 poolsuite.net 提取了一个复古 Mac OS 风格的播放器组件，DOM 精准抓取、像素级取色、忠实还原 Bevel 阴影系统——然后 v0 根据提取出来的规格重新构建了一个可以运行的播放器。

Discord 的 3D 英雄图也被它拆解过：提取出来的调色板逐 hex 锁定，Midjourney 第一遍就跑出了风格完全一致的衍生图。

怎么安装

git clone https://github.com/uxKero/anydesign.git
# 全局安装（所有项目可用）
cp -r anydesign ~/.claude/skills/
# 或单项目安装
cp -r anydesign /path/to/project/.claude/skills/

Figma 文件分析需要连接 Figma MCP（设置 → Connectors）。

谁适合用

  • 设计师：想把自己的设计系统化、给 AI 用？直接导出 design-tokens.json
  • 开发者：接到一个设计稿不想手动量？让 anydesign 帮你读
  • AI 应用builder：想让 AI 生成的内容风格一致？用提取出来的 Prompt Pack

GitHub：https://github.com/uxKero/anydesign（⭐ 198）

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

评论区

0 条评论

登录后可评论。

赵一凡 48 阅读