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 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“分析一下这个网站 [URL] 的设计系统。”，AnyDesign 会自动抓取网页，解析其 CSS 变量、颜色、版式等，并生成一份结构化的设计文档。或者，当你看到一张精美的仪表盘截图时，可以说：“帮我提取这张图片里的设计令牌和组件清单。”，它便会进行视觉分析并输出可用于重建的详细规范。
介绍
AnyDesign 是一款专为 AI 工作流设计的视觉分析工具，它能解决设计师和开发者手动提取设计系统、记录设计规范的繁琐问题。用户只需提供一张截图、一个网站链接或一个 Figma 文件，它便能自动分析其中的视觉元素、布局模式和设计决策，并生成一份包含设计令牌、组件清单和重构说明的详细 design.md 文档。
使用方式非常直观：当你面对一个想要理解、复刻或审计的视觉设计时，直接将素材交给 AnyDesign。它支持三种输入源：本地图片、网页 URL 和 Figma 链接，并会根据素材类型采用不同的技术栈（如多模态视觉分析、HTML/CSS 解析、Figma API）进行深度解析。
这个技能主要面向产品设计师、前端工程师和 AI 体验设计师，尤其适合那些需要快速理解竞品设计、为 AI 生成提供精确设计参考，或在缺乏原始设计文件时进行项目重构的从业者。
与同类设计分析工具或简单的截图标注工具相比，AnyDesign 的核心优势在于其“系统化思维”。它不止于描述颜色和字体，而是像一位设计系统分析师，深入诊断底层可复用的设计模式、变量（Tokens）和组件结构，输出的是可供另一个 AI 或开发者直接用于高保真重建的工程化文档。
核心特点
AnyDesign 的核心区别在于其“诊断式”分析和“工程化”输出：它不仅能识别视觉样式，更能像设计系统分析师一样，逆向推导出底层的设计令牌（Tokens）、可复用组件和构建逻辑，生成可直接用于开发或 AI 重构的 `design.md` 文档，而非简单的视觉描述报告。
注意事项
对于极度复杂、动态或严重依赖脚本渲染的网页，自动提取的设计令牌和结构可能不完整，需要人工复核。
常见问题
AnyDesign 能分析手机截图吗？
可以，它支持分析任何 PNG、JPG 等格式的本地图片，包括手机截图、设计稿截图等。
生成的 design.md 包含代码吗？
主要包含设计令牌（如颜色、间距变量）、组件清单和重构说明，不直接生成前端代码，但为编写代码提供了完整的设计规范。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/anydesign/raw/index.md 读取 anydesign 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/anydesign/raw/index.md（查看排版版本）