anydesign：把任意设计稿变成可执行提示词，AI 建站效率翻倍

赵一凡内容创作者 2026-07-18 23 阅读

anydesign：把任意设计稿变成可执行提示词，AI 建站效率翻倍

做设计最痛苦的是什么？不是画不出来，而是好不容易找到一张满意的参考图、一个 Figma 页面、一个竞品网站，最后却不知道怎么把它“翻译”给 AI，让 v0、Bolt、Lovable、Cursor 这些工具真正复刻出来。

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

它是什么？

anydesign 是一个 Claude Skill，能把图片、网站、Figma 文件直接转成结构化的 design.md + design-tokens.json，里面包含：

完整的 design tokens：颜色、字体、间距、层级，全部用 W3C DTCG 格式输出，可直接导入 Style Dictionary、Figma Variables、Tokens Studio
组件清单与重建备注：每个按钮、卡片、导航栏都能单独拆出“重建提示词”
可选 WCAG 无障碍报告：自动对比颜色对，告诉你哪些配色过不了 AA/AAA
Element mode 单元素提取：只想要那个 navbar？只想要那张 3D hero 图？直接给出可粘贴的复刻提示词

为什么我觉得它很能打？

第一，输出格式干净。它不是给你一段散文式的“设计描述”，而是给 Markdown + JSON，任何支持 AI 编码的工具都能直接吃进去。

第二，跨工具通用。作者实测过：用 anydesign 分析 Vercel 官网 → 输出 design.md → 粘贴到 v0 → 直接复刻出页面。Bolt、Lovable、Claude Code、Cursor 同理。

第三，不只是网页。对游戏美术尤其有用：输入一张关键帧，提取调色板、光照公式、配色分配规则，输出一整套 prompt pack，保证后续生成的角色、道具、UI 素材风格统一。这对 AIGC 工作流太重要了。

第四，配套脚本齐全。7 个纯 Python 小工具：extract_css_vars.py 一键扒站点 CSS 变量、capture_site.py 做 Playwright 截图、extract_colors.py 提取主色、verify_design.py 做漂移审计……不用 Claude 也能单独跑。

适合谁用？

用 v0 / Bolt / Lovable / Cursor 做 AI 建站的设计师
需要把参考图转成可复用设计系统的前端开发者
做 AIGC 素材、希望风格统一的美术 / 独立开发者

怎么用？

git clone https://github.com/uxKero/anydesign.git
cp -r anydesign ~/.claude/skills/
pip install -r requirements.txt
playwright install chromium

装完之后，在 Claude 里直接说“提取这个网站的设计系统”或“复制这个 navbar”，anydesign 会自动识别意图并输出结果。

简单说，anydesign 做的是一件事：把“看到的设计”翻译成“AI 能执行的设计语言”。如果你经常在 AI 建站、AIGC 素材这条路上折腾，这个 Skill 值得装。

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

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

评论区

0 条评论

登录后可评论。

anydesign：把任意设计稿变成可执行提示词，AI 建站效率翻倍