视觉理解与 UI 设计分析
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_ae22680b/visual-ui-understander。
技能介绍
问题场景
当工程师或 Agent 处理一张截图时，需求常不是简单“识别图片”，而是判断 UI 层级、文案提取、设计差异和可访问性风险。这类任务如果让模型自由回答，输出容易不稳定，也难以被后续流程解析。
工作方式
该技能面向 AI Agent 的视觉理解场景，围绕截图、UI 设计、OCR、多图对比和 a11y 检查组织调用。核心流程是：先确认图片路径，再根据用户意图选择对应模式，最后以 JSON 或结构化结果返回。它支持通用理解、UI 设计问题分析、文字提取、多图片输入，以及 50 字以内的一句话概括，便于 Slack 广播等快速通知场景。内部会自动处理常见图片问题：最长边大于 2048px 时缩放，RGBA/PNG/WebP 转 JPG，体积大于 2MB 时降质；网络超时按指数退避重试 3 次，限流等待 2 秒后重试，授权或配额错误立即返回修复建议。错误统一使用 ERROR:类型|说明 格式，方便 Agent 解析。
边界与注意点
该技能依赖腾讯混元大模型服务和相应云权限，需要配置 TENCENTCLOUD_SECRET_ID 与 TENCENTCLOUD_SECRET_KEY。多图模式下，目前第一张图进入视觉分析，其余图以文本描述方式传入；如果每张图都要精确分析，建议分别调用。
使用场景
- 收到产品截图后，快速提取按钮、表单和报错文案，整理成可评审的文字清单
- 对比设计稿与实现截图，定位间距、颜色、组件状态或流程节点差异
- 检查界面截图是否存在对比度不足、控件不可读或无障碍标记缺失
- 让 Agent 用一句 50 字以内摘要播报截图问题，方便贴进 Slack 或工单
适合人员
- 需要把 UI 截图转成结构化评审意见的前端或产品设计工程师
- 希望 Agent 自动提取 OCR 文案并生成检查清单的自动化工程师
- 负责无障碍验收、需要判断截图中 a11y 风险的 QA 工程师
- 在 Slack 或工单中快速播报设计稿与实现差异的产品经理
相关技能
通过分步选择题确认业务、配色与布局，输出可编辑的 .drawio 专业技术架构图。
基于妙音 AI REST API 的音乐助手，支持调用 SUNO/Mureka 模型生成歌曲、续写、翻唱、生成视频、WAV 与音频分轨。
将文字、文件或图片提炼为结构化知识，生成绘图工具可用的知识卡片提示词，支持3:4竖版与16:9横版，并按内容量拆分为多张独立图片。
基于 Playwright 捕获整页、视口或指定元素截图，自动处理懒加载、内部滚动、移动布局及 Linux CJK 字体。