ui-feedbacklisted

# 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 全图详细分析**（必做） ```bash glance "<截图路径>" -q "<详细分析 prompt，见下>" ``` 拿到结构化描述，这是反馈报告的主体。 **Pass 2 — 精确色值**（推荐，glance 的颜色只是近似） ```bash palette "<截图路径>" --top 5 # 全图主色 palette "<截图路径>" --region X1,Y1,X2,Y2 # 关键区域 ``` 背景/主色/文字色/强调色分别取。**色号永远从 palette 拿，不要信 glance 的 prose**。 **Pass 3 — 组件清单与坐标**（推荐） ```bash detect "<截图路径>" # 枚举全部 UI 元素，带坐标和可见文字 ``` 补全 glance 可能漏掉的元素（图标、小字、状态指示）。 **合成报告** — 把 Pass 1-3 组织成下面"输出格式"的结构化报��，交给主模型。 ## 详细分析 prompt（喂给 glance 的 -q，信息量最大化） > 你是资深 UI/UX 评审专家，正在给一个 AI 设计师提供详尽设计反馈。请对这张界面截图做**最大化信息量**的描述，不遗漏任何可见元素，让设计师不看原图也能完整还原并改进它。按以下结构逐项输出： > > 1. **总体布局**：页面整体结构、从上到下的分区顺序、左右布局、栅格与对齐方式、内容密度 > 2. **视觉层级**：用户第一眼会看到什么及原因（尺寸/颜色/对比/留白），主次信息的层级关系 > 3. **配色**：背景色、主色、强调色、文字色、组件底色，尽量给近似十六进制值，注明"近似值需二次校准" > 4. **字体排版**：标题/正文/辅助文字的字号层级、字重、行高观感、字族推断 > 5. **组件清单**：列出每个可见组件（按钮/卡片/输入框/导航/图标/图片/徽标/状态指示等）及其位置（上/中/下/左/右、大致百分比或坐标）、内容、状态 > 6. **间距与对齐**：各部分间距、内边距观感；对齐/间距不一致的具体问题（精确到哪个元素与哪个元素之间） > 7. **可用性与可访问性**：对比度不足、文字过小、可点击面积、明确 UX 问题 > 8. **具体改进建议**：按优先级列出可操作的改进项，每条具体到"改哪个元素、改成什么样、为什么" ## 输出格式（喂回给主模型的结构化报告） 按以下 Markdown 组织，覆盖 vision pass 的全部信息： ``