skill-visual-feedback

宿主：Codex CLI — 此技能专为 Claude Code 设计，并已适配 Codex。 交叉引用的命令在 Codex 中使用已安装的技能名称，而非 /octo:* 斜杠命令。 使用当前 Codex 会话中的 Shell 和子 Agent 工具。在当前会话尚未提供相应能力之前，不要声称某个提供方、模型或宿主子 Agent 可用。 宿主工具的对应项请参阅 skills/blocks/codex-host-adapter.md。

视觉反馈处理

概述

系统地处理基于图像的 UI/UX 反馈，识别视觉问题并实施修复。

核心原则： 分析图像 → 识别问题 → 定位代码 → 系统地修复 → 目视验证。

适用场景

用户提供以下内容时，请使用此技能：

• 存在 UI/UX 问题的屏幕截图
• 以「[Image]」开头并描述视觉问题的内容
• 抱怨「界面很乱」或「UX 一团糟」
• 附有视觉示例的按钮样式或布局问题
• 附有图像并说明「本应看起来像 X，却显示为 Y」

以下情况请勿使用：

• 没有视觉上下文的纯代码问题
• 没有 UI 模型的功能请求
• 性能或功能缺陷
• 后端问题

流程

阶段 1：视觉分析

用户提供视觉反馈时：

步骤 1：确认并检查

I can see the screenshot showing [describe what you observe].

Let me analyze the visual issues:

**Observed Problems:**
1. [Issue 1: e.g., Button styles inconsistent]
2. [Issue 2: e.g., Layout misaligned]
3. [Issue 3: e.g., Colors don't match design system]

**Expected Behavior (from description):**
- [What user said it should be]

**Actual Behavior (from image):**
- [What the image shows]

步骤 2：对问题分类

问题类型	示例
样式	颜色、字体、间距、边框
布局	对齐、定位、响应式行为
组件	使用了错误的组件、缺少组件
状态	悬停状态、激活状态、禁用状态
一致性	UI 中的模式不一致

**Issue Categories:**
- Styling: [list specific styling issues]
- Layout: [list layout issues]
- Component: [list component issues]
- State: [list state-related issues]
- Consistency: [list inconsistency issues]

阶段 2：代码调查

步骤 1：定位相关组件

# Search for component files related to the issue
# Example: For settings page issues

使用 Glob 查找组件文件：

**/*settings*.{tsx,jsx,ts,js,vue,svelte}
**/*button*.{tsx,jsx,ts,js,vue,svelte}

使用 Grep 查找特定元素：

# Search for className patterns
pattern: "className.*button|btn-"

# Search for style definitions
pattern: "style={{|styled\.|makeStyles"

步骤 2：识别样式系统

**Styling Approach Detected:**
- [ ] CSS Modules
- [ ] Styled Components
- [ ] Tailwind CSS
- [ ] Emotion/styled
- [ ] Plain CSS
- [ ] CSS-in-JS (other)

**Design System:**
- [ ] Custom design system
- [ ] Material-UI
- [ ] Ant Design
- [ ] Chakra UI
- [ ] Other: [name]

步骤 3：读取受影响的文件

读取组件文件及相关样式，了解当前实现。

阶段 3：根因分析

步骤 1：确定问题存在的原因

常见根因：

根因	迹象
样式不一致	同一元素有多种样式设置方式
缺少设计令牌	颜色或间距采用硬编码
组件变体错误	应使用次要样式，却使用了主要样式
未处理状态	缺少悬停、激活或禁用样式
响应式问题	宽度固定、缺少断点
样式覆盖冲突	优先级冲突、过度使用 !important
已弃用的模式	仍在使用旧的样式方案

**Root Cause Analysis:**

Issue: [specific visual problem]
Root Cause: [why it's happening]
Evidence: [code snippet or pattern showing the cause]

Impact:
- Affects: [which pages/components]
- Frequency: [how often users see this]
- Scope: [single instance or systemic]

步骤 2：确定修复范围

**Fix Scope:**

Option 1: **Targeted Fix** (fix just this instance)
- Files to modify: [list]
- Risk: Low
- Coverage: Fixes reported issue only

Option 2: **Systematic Fix** (fix pattern everywhere)
- Files to modify: [list]
- Risk: Medium
- Coverage: Fixes all instances of this pattern

Option 3: **Design System Fix** (update base component)
- Files to modify: [design system files]
- Risk: Higher (affects many components)
- Coverage: Fixes root cause system-wide

**Recommendation:** [which option and why]

使用 AskUserQuestion 了解用户对修复范围的偏好。

阶段 4：实施

步骤 1：制定修复计划

针对每个已识别的问题：

**Fix Plan:**

Issue: [description]
File: [file path]
Change: [what to change]
Before: [code snippet or description]
After: [code snippet or description]

步骤 2：实施修复

使用 Edit 工具逐项应用修复：

Fixing [Issue 1]...
- File: [path]
- Change: [description]
✓ Fixed

Fixing [Issue 2]...
- File: [path]
- Change: [description]
✓ Fixed

步骤 3：确保一致性

如果提到「所有地方」或「所有实例」：

# Search for all instances of the pattern
# Example: Find all primary buttons

使用 Grep 查找所有实例，然后逐一修复：

**Pattern Search:** "button.*primary"

Found in:
1. src/components/Header.tsx:45
2. src/pages/Settings.tsx:123
3. src/pages/Dashboard.tsx:67

Fixing all instances...

系统地修复每个文件。

阶段 5：验证

步骤 1：视觉验证清单

**Verification Checklist:**

Visual Issues:
- [ ] Button styles consistent
- [ ] Layout aligned properly
- [ ] Colors match design system
- [ ] Spacing is uniform
- [ ] Typography consistent

Responsive:
- [ ] Works on mobile
- [ ] Works on tablet
- [ ] Works on desktop

States:
- [ ] Default state correct
- [ ] Hover state correct
- [ ] Active state correct
- [ ] Disabled state correct
- [ ] Focus state accessible

**How to verify:**
1. Run dev server: `npm run dev`
2. Navigate to [affected page]
3. Check all items above
4. Compare with original screenshot

步骤 2：请用户确认

✅ **Fixes Applied**

Changes made:
1. [Change 1]
2. [Change 2]
3. [Change 3]

**Please verify:**
- Open [URL or page]
- Check that [specific issue] is now resolved
- Verify no new issues introduced

Let me know if the visual issues are resolved or if further adjustments are needed.

常见模式

模式 1：按钮样式一致性

User: "[Image] these button styles need to be fixed everywhere"

Process:
1. Analyze image - identify button style issues
2. Search for all button components
3. Identify design system button component
4. Update base button component OR
5. Update all instances to use correct variant
6. Verify consistency across app

模式 2：布局错位

User: "[Image] When logo position is set to Top right, it shows as Middle right"

Process:
1. Analyze image - see position mismatch
2. Find logo positioning code
3. Identify why "Top right" maps to "Middle right"
4. Fix the mapping or positioning logic
5. Test all position options
6. Verify with user

模式 3：设置界面问题

User: "[Image] The /settings should be dropdowns not text inputs"

Process:
1. Analyze image - see text inputs instead of dropdowns
2. Navigate to settings component code
3. Identify field definitions
4. Replace input components with select/dropdown
5. Ensure options are populated correctly
6. Verify all settings fields

模式 4：笼统的「一团糟」反馈

User: "why is the Display Ad Creator UX still a hot mess?"

Process:
1. Ask for specific issues or screenshot
2. If provided, analyze systematically
3. Create prioritized list of issues
4. Fix highest-impact issues first
5. Verify improvements with user

与其他技能集成

与 skill-debug 集成

Visual issue that doesn't make sense?
→ Use skill-debug to investigate why visual state is incorrect

与 skill-audit 集成

User says "fix these everywhere"?
→ Use skill-audit to find all instances
→ Use skill-visual-feedback to fix each systematically

与 flow-tangle 集成

Visual feedback requires new component?
→ Use flow-tangle to implement the component
→ Use skill-visual-feedback to verify it matches design

最佳实践

1. 始终确认视觉证据

良好示例：

I can see in the screenshot that the button has inconsistent padding and the wrong color scheme compared to other primary buttons in the interface.

不佳示例：

I'll fix the button.

2. 明确说明更改内容

良好示例：

Changing:
- Button background: #3498db → #2563eb (primary-600)
- Padding: 8px 12px → 12px 16px
- Border radius: 4px → 6px

不佳示例：

Updating button styles.

3. 考虑移动设备和响应式布局

始终检查修复在不同断点下是否有效：

**Responsive Verification:**
- Mobile (< 768px): [status]
- Tablet (768px - 1024px): [status]
- Desktop (> 1024px): [status]

危险信号——不要这样做

操作	错误原因
不分析图片就修复	可能会修错问题
用户说“所有地方”时只改一处	修复不完整
使用 !important 强制应用样式	会造成优先级问题
硬编码颜色，而不使用设计令牌	与系统不一致
跳过验证	用户不得不再次报告同一问题
不询问就自行假设	可能不符合用户的设想

快速参考

用户反馈模式	所需操作
“[图片] X 应该是 Y”	分析图片 → 查找代码 → 修复 → 验证
“所有地方的按钮样式”	找出所有实例 → 系统地修复
“UI 一团糟”	询问具体情况 → 确定优先级 → 逐步修复
“当 X 时，显示 Y 而不是 Z”	调试状态/逻辑 → 修复映射 → 测试所有情况

要点

Visual feedback → Image analysis + Systematic fix + Visual verification
Otherwise → Guessing at fixes + Incomplete coverage

查看问题。了解根本原因。在所有地方修复。进行视觉验证。