扔给它任何截图，它给你一套完整设计系统！

做设计最烦的事是什么？看到一个好看的界面，想抄——但不知道从哪里下手。颜色代码是多少？字体是什么？间距怎么算？

这个叫 anydesign 的 Claude Skill，就是来解决这个问题的。你丢给它一张截图、一个网址、或者一个 Figma 文件，它直接给你吐出一个完整的设计规范文档。

它能做什么

两个模式全自动切换：

• 全量分析——输入”分析这个网站的设计系统”，它给你一份 7 段式的 design.md + W3C DTCG 格式的 design-tokens.json，颜色、字体、间距、阴影全部结构化输出
• 元素模式——输入”把这个导航栏 COPY 下来”，它只抓那一个元素，输出重建提示词，任何 AI 工具（v0、Lovable、Cursor、Bolt）都能拿来直接用

而且它的输出不是那种”看起来差不多”的描述——每个推理都带置信度标记（✅/⚠️/❓），颜色是真实 hex 值，不够的信息它直接说”不知道”而不是瞎编。

实测效果

作者测试了三个场景：

• 丢进 Vercel 官网 → 提取 808 个 CSS 变量 → v0 直接跑出一个一模一样的落地页
• 抓取 Poolsuite 的复古播放器 → 提取像素级阴影参数 → v0 重建出可运行的版本
• 抓取 Discord 的 3D 场景 → 生成带精确 hex 的图像生成提示词 → 第一次就命中风格

安装方式

Claude Code 用户：

/plugin marketplace add uxKero/anydesign
/plugin install anydesign@uxKero

其他 Agent（Cursor、Windsurf、Codex 等）：

npx skills add uxKero/anydesign -g

零配置， yt-dlp + ffmpeg 自动装，上手即用。

适合谁

设计师想快速做设计规范？前端想从参考界面提取参数？AI 工具使用者想让生成结果更精准？闭眼入。

GitHub →（⭐ 148）

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