Image Understanding Native

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

infometa Updated 228 repo stars

File contents

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

infometa/workbuddyskills/tree/main/plugins/cb_teams_marketplace/plugins/ardot-design-generator/skills/image-understanding-native commit 53ad11c098

Frequently asked questions

npx skillmds@latest add infometa/image-understanding-native