anydesign
提取图像/网站/Figma设计系统生成文档
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：anydesign。 它的用途是：提取图像/网站/Figma设计系统生成文档 完整的 Skill 内容见：https://321skill.com/skills/anydesign/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'分析这个网站的设计系统：https://example.com'，它会先通过WebFetch抓取HTML和CSS文件，提取变量（如颜色、字体、间距），再结合Playwright截图，最后生成design.md文件，包含完整的设计令牌表格、组件清单（如按钮、导航栏）和重构建议，帮助开发者快速复现该设计。
介绍
这个Skill解决了设计师和开发者手动分析视觉设计、提取设计系统时的繁琐低效问题。在实际工作中，当需要复制一个网页的配色、字体、间距，或者想从竞品界面中提取设计令牌时，通常需要反复查看元素、截图、手动记录，费时且容易遗漏。
使用方式很简单，你只需要提供一张图片、一个网址或一个Figma链接。AI会自动识别输入类型：图片直接通过多模态视觉分析，网址先抓取HTML和CSS变量再截图补充，Figma链接则通过Figma MCP获取变量定义和元数据。之后就可以通过自然语言指令来获得完整的design.md，包含令牌系统、组件清单和重构笔记。
它非常适合需要快速理解、复现或审计视觉设计的团队或个人。尤其是UI设计师在做竞品分析时，前端开发在重构界面时，产品经理在审查设计一致性时，都能显著提升效率。也适用于设计系统维护者，需要从现有产品中反向提取已投入使用的设计规范。
建议在分析复杂网站时优先使用网址模式，因为HTML结构能提供更准确的布局和类名信息。需要注意的是，对于纯图片输入，无法提取CSS变量等深层属性，分析结果会更多依赖视觉推测。Figma分析需要预先配置Figma MCP插件，且只支持公开文件或已授权的团队文件。
常见问题
支持哪些输入类型？
支持本地图片（PNG/JPG/WebP）、网站URL、Figma文件链接三种类型，可混合输入。
如何分析Figma文件？
需要先配置Figma MCP工具，然后提供Figma链接，AI会自动获取变量定义、组件信息和截图。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/anydesign/raw/index.md 读取 anydesign 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/anydesign/raw/index.md（查看排版版本）