ui-feedback（场景层：UI 设计反馈）

用视觉"眼睛"（glance，视觉模型）对 UI 截图做最大化信息量的结构化分析， 产出可直接喂给无视觉底座模型（DeepSeek）的反馈报告——它不看图也能还原并改进 UI。

核心原则：描述的细节量 = 主模型优化的上限。不要偷懒，宁可多写不可漏。

触发场景

• 用户给 UI 截图路径 / 拖图，要求设计反馈、改进建议、UI 评审、还原描述
• 主模型（如 DeepSeek）设计完 UI，需要"看"自己的作品并优化（AI 设计反馈闭环）

工作流（多 pass，先全后细）

预处理：截图若最长边 >1400px，先缩到最长边 1400 并转 JPEG（q88）再送视觉 API—— 大图+长 prompt 会触发 HTTP 500。坐标以缩放后图为准（原图坐标 ×原边长/1400）。

Pass 1 — glance 全图详细分析（必做）

glance "<截图路径>" -q "<详细分析 prompt，见下>"

拿到结构化描述，这是反馈报告的主体。

Pass 2 — 精确色值（推荐，glance 的颜色只是近似）

palette "<截图路径>" --top 5              # 全图主色
palette "<截图路径>" --region X1,Y1,X2,Y2 # 关键区域

背景/主色/文字色/强调色分别取。色号永远从 palette 拿，不要信 glance 的 prose。

Pass 3 — 组件清单与坐标（推荐）

detect "<截图路径>"      # 枚举全部 UI 元素，带坐标和可见文字

补全 glance 可能漏掉的元素（图标、小字、状态指示）。

合成报告 — 把 Pass 1-3 组织成下面"输出格式"的结构化报告，交给主模型。

详细分析 prompt（喂给 glance 的 -q，信息量最大化）

你是资深 UI/UX 评审专家，正在给一个 AI 设计师提供详尽设计反馈。请对这张界面截图做最大化信息量的描述，不遗漏任何可见元素，让设计师不看原图也能完整还原并改进它。按以下结构逐项输出：

1. 总体布局：页面整体结构、从上到下的分区顺序、左右布局、栅格与对齐方式、内容密度
2. 视觉层级：用户第一眼会看到什么及原因（尺寸/颜色/对比/留白），主次信息的层级关系
3. 配色：背景色、主色、强调色、文字色、组件底色，尽量给近似十六进制值，注明"近似值需二次校准"
4. 字体排版：标题/正文/辅助文字的字号层级、字重、行高观感、字族推断
5. 组件清单：列出每个可见组件（按钮/卡片/输入框/导航/图标/图片/徽标/状态指示等）及其位置（上/中/下/左/右、大致百分比或坐标）、内容、状态
6. 间距与对齐：各部分间距、内边距观感；对齐/间距不一致的具体问题（精确到哪个元素与哪个元素之间）
7. 可用性与可访问性：对比度不足、文字过小、可点击面积、明确 UX 问题
8. 具体改进建议：按优先级列出可操作的改进项，每条具体到"改哪个元素、改成什么样、为什么"

输出格式（喂回给主模型的结构化报告）

按以下 Markdown 组织，覆盖 vision pass 的全部信息：

## UI 反馈报告
**目标**：<用户给的设计意图/目标，如有>

### 布局与层级
- <Pass 1 第1-2点的要点>

### 精确配色
- 背景：`#XXXXXX`  主色：`#XXXXXX`  文字：`#XXXXXX`（均来自 palette 实测）
- <Pass 1 第3点的近似色，标注为近似>

### 排版
- <Pass 1 第4点>

### 组件与坐标
- <Pass 3 detect 的清单，合并 Pass 1 第5点>

### 问题清单（按严重度排序）
- [高] <间距/对齐/对比度等具体问题>
- [中] ...
- [低] ...

### 改进建议（按优先级）
1. <改哪个元素、改成什么样、为什么>
2. ...

### 可直接执行的信息
- 结构骨架、配色 token、组件清单、间距值——让主模型不用看图就能重写/改 UI

工具

• glance / ground / detect / crop / trace / palette：vision-core 提供的命令（python install.py 安装）
• 视觉模型：任意 OpenAI 兼容视觉端点（配置见 ../references/providers.md）
• 长截图/聊天记录：long-ocr
• 出错时如实报告视觉 API 错误，绝不编造图片内容。

Source: 上游 Anionex/agent-vision-toolkit + unblind ui-review 模式 + 自研 prompt