Image Understanding Native — 图片结构化语义分析
Agent 直接利用自身多模态能力,将 UI 截图/设计稿转化为结构化 JSON。零外部依赖,不启动 MCP Server,不调用外部模型。
四种分析任务
| 任务 | 输入 | 输出 | 加载文档 | 何时使用 |
|---|---|---|---|---|
| A. 全页面结构分析 | 截图 | page_structure |
task-a-page-structure.md |
"分析截图"、"看看布局" |
| B. 设计风格提取 | 截图 | design_spec |
task-b-design-spec.md |
image-to-ui Phase 1,或"提取设计风格" |
| C. 区域语义描述 | 截图 + 区域 | region_description |
task-c-region.md |
"描述这个区域"、"这块是什么" |
| D. 对比差异分析 | 两张截图 | comparison |
task-d-comparison.md |
"对比差异"、"改了什么" |
任务合并:用户同时要结构分析和风格提取(如"分析截图并提取设计规范"),合并为一次输出。
加载协议
每次任务必须加载:
references/common.md— 通用约定(坐标系、精度、视口推断、bbox 方法论)- 对应任务的 reference 文件(见上表)
工作流
- 准备图片 — 确保图片已在上下文中可访问(用户上传、COS 下载、截图工具等)
- 加载文档 — 按加载协议加载
common.md+ 对应任务文件 - 执行分析 — 看图 → 按 Schema 输出 JSON
- 输出 — JSON 代码块 + 自然语言摘要
分析原则:系统性扫描(从上到下、从左到右)→ 识别平台和视口 → 追求精确(颜色 hex、字号 px、间距具体值)→ 不确定时 ~ 前缀但不过度标注。
关键规则
- 零外部依赖 — 全部分析由 Agent 自身完成
- 输出即产物 — JSON 是自包含的,不假设特定下游
- 追求精确 — 能给具体值就不用"约"
- 严格遵循 Schema — 按各任务文件中的 Schema 输出
- 图片先准备好 — 分析前确保图片在上下文中可访问