# Image Understanding Native

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

- Skill: `infometa/image-understanding-native` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add infometa/image-understanding-native`
- Raw SKILL.md: https://api.skillmd.com/api/skills/infometa/image-understanding-native/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: infometa (https://skillmd.com/u/infometa)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/infometa/image-understanding-native

---


# 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. **图片先准备好** — 分析前确保图片在上下文中可访问