SuperAPI AI 工具集

design-spec-extraction

设计与创作

查看项目

更新于 10-15 20:21

技能介绍

用途:从 Figma 导出、Sketch 导出、UI 稿、线框图、网站截图等视觉输入中提取全面的、可直接用于生产的 JSON 设计规范,用于设计令牌提取、视觉稿转结构化组件规范、开发者交付文档、设计系统文档、代码生成数据准备以及网站设计逆向分析。

主要能力:采用 7 轮串行子任务架构,每轮分别处理源分析布局、颜色与视觉风格、排版、组件检测、间距与尺寸、状态与无障碍、合并输出,以保证覆盖完整并交叉验证。输出 JSON 遵循 W3C Design Tokens Community Group(DTCG)2025.10 格式并带扩展,包含 $version、$source(类型、尺寸、提取时间戳)、tokens(颜色、排版、间距、尺寸、阴影、圆角)、components(带边界框的层级组件树)、accessibility(WCAG 分析、对比度问题、语义结构)、$extensions(布局、组件目录、置信度分数)。

使用方式:提取前创建输出目录 mkdir -p .design-specs/{project-name},每轮必须用 Write 工具将结果写入指定 JSON 文件:第 1 轮 pass-1-layout.json(布局与结构)、第 2 轮 pass-2-colors.json(颜色令牌)、第 3 轮 pass-3-typography.json(排版令牌)、第 4 轮 pass-4-components.json(组件树)、第 5 轮 pass-5-spacing.json(间距与尺寸)、第 6 轮 pass-6-states.json(状态与无障碍)、第 7 轮 design-spec.json(最终合并输出)。每轮需先读取前序文件,完成后再开始下一轮。文件化架构用于持久化以支持中断后续跑、调试中间结果、独立校验、向子任务代理传递上下文并留存审计记录。

适用场景:设计令牌提取、视觉稿转组件规范、开发者交付文档、设计系统文档生成、代码生成数据准备、网站截图逆向工程。

限制:资料仅展示至第 3 轮排版部分内容,后续轮次细节暂未提供;各颜色、字体、尺寸数值均为示例格式而非真实提取结果;提取精度与置信度未提供具体说明。