用途：当用户以截图形式反馈界面视觉或体验问题时，用该技能从图像分析入手，识别问题、定位代码、系统性修复并做视觉验证。适用情况包括：带 UI/UX 问题的截图、以“[Image]”前缀加视觉问题描述、对“界面混乱”的抱怨、按钮样式或布局问题的图示，以及“本应像 X 却显示成 Y”的带图说明。不适合纯代码问题、无 UI 稿的功能请求、性能或功能缺陷、后端问题。
主要流程分五个阶段。一、视觉分析：先确认并描述截图内容，列出观察到的问题、用户期望与实际表现，并按样式（颜色、字体、间距、边框）、布局（对齐、定位、响应式）、组件（组件选用错误或缺失）、状态（悬停、激活、禁用）、一致性分类。二、代码排查：用 Glob 查找相关组件文件（如 **/settings.{tsx,jsx,ts,js,vue,svelte}），用 Grep 搜索 className、内联样式或 styled 定义，确认样式方案与设计系统，并阅读受影响文件。三、根因分析：判断问题成因（样式不一致、缺少设计令牌、组件变体用错、状态未处理、响应式缺失、样式覆盖冲突、陈旧写法），定位影响范围，并给出针对性修复、系统性修复或设计系统修复三种方案，必要时用 AskUserQuestion 让用户选择范围。四、实施：为每个问题列出文件、改动前后内容，用 Edit 逐个修复；若用户说“所有地方”，先用 Grep 找出全部实例再逐一修复。五、验证：按视觉、响应式、交互状态清单检查，运行 npm run dev 后打开相关页面比对原截图，并请用户确认。
常见模式包括按钮样式一致性、布局错位（如“右上”显示成“右中”）、设置页应使用下拉而非文本输入、笼统的“界面很乱”反馈。可与其他技能配合：视觉状态异常时用 skill-debug 调查，用户要求“全部修复”时用 skill-audit 找出所有实例，需新建组件时用 flow-tangle 实现。
最佳实践：始终先确认截图证据并具体说明改动，考虑移动端与响应式；避免未分析图片就动手、用户说“所有地方”却只改一处、滥用 !important、硬编码颜色、跳过验证、未经询问擅自假设。该技能面向 Codex CLI 做过适配，交叉引用命令使用 Codex 中已安装的技能名而非 /octo:* 斜杠命令，其他平台、模型或宿主子代理的支持情况暂未提供。