AnyDesign 是一个设计分析与文档化技能,角色定位为设计系统分析师,目标是诊断设计决策、识别重复模式与底层 token,并产出可供其他 AI 或人类重建设计的 design.md。
用途与输入:支持三类来源。本地图片(PNG、JPG、WebP)直接多模态视觉分析;网站 URL 采用混合流程,先用 WebFetch 获取 HTML,提取 CSS 变量,必要时用 Playwright 截图;Figma 链接通过 Figma MCP 工具处理,依次调用 get_metadata、get_variable_defs、get_design_context、get_screenshot。多来源可组合使用。
两种模式:完整模式(默认)分析页面/文件/系统,输出 design.md;元素模式针对单个视觉元素(如导航栏、定价卡),输出 element.md,并将其归类为代码、素材或混合。
工作流程:先确认来源与目标,再捕获素材,然后按六层分析——身份、系统(颜色/字体/间距/圆角/层级)、组件、布局、重建、品牌规则,并执行 Art Direction Patterns QA。输出要求真实 hex 码、语义角色、置信度标记,必须包含 Open Questions 与 Do's and Don'ts 章节,必要时生成 DTCG 格式的 design-tokens.json 和可访问性报告。
辅助脚本:capture_site.py(多视口截图)、extract_css_vars.py、extract_colors.py、check_contrast.py、lint_design_md.py、verify_design.py、export_for_claude_design.py。生成 design.md 后应运行 python scripts/lint_design_md.py <generated-design.md> 校验。
限制:需遵循来源捕获流程,失败时明确告知用户而非编造内容;未观察到的 token 不得虚构;无证据不假设框架。具体收费、平台支持范围等资料暂未提供。