image-understanding-native

name	image-understanding-native
description	图片结构化语义分析。Agent 直接看图输出结构化 JSON，零外部依赖。四种分析任务：全页面结构分析、设计风格提取、区域语义描述、对比差异分析。

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	"对比差异"、"改了什么"

任务合并：用户同时要结构分析和风格提取（如"分析截图并提取设计规范"），合并为一次输出。

加载协议

每次任务必须加载：

1. references/common.md — 通用约定（坐标系、精度、视口推断、bbox 方法论）
2. 对应任务的 reference 文件（见上表）

工作流

1. 准备图片 — 确保图片已在上下文中可访问（用户上传、COS 下载、截图工具等）
2. 加载文档 — 按加载协议加载 common.md + 对应任务文件
3. 执行分析 — 看图 → 按 Schema 输出 JSON
4. 输出 — JSON 代码块 + 自然语言摘要

分析原则：系统性扫描（从上到下、从左到右）→ 识别平台和视口 → 追求精确（颜色 hex、字号 px、间距具体值）→ 不确定时 ~ 前缀但不过度标注。

关键规则

1. 零外部依赖 — 全部分析由 Agent 自身完成
2. 输出即产物 — JSON 是自包含的，不假设特定下游
3. 追求精确 — 能给具体值就不用"约"
4. 严格遵循 Schema — 按各任务文件中的 Schema 输出
5. 图片先准备好 — 分析前确保图片在上下文中可访问