| name | visual-feedback-loop |
| description | Analyze screenshots or screen recordings of UIs to detect visual issues and usability problems, then propose automatic improvements. |
Skill: Visual Feedback Loop
Category: UI/UX Engineering
Priority: High
Description
This skill enables DevinOS to analyze screenshots or screen recordings of user interfaces, detect visual issues and usability problems, and propose or apply improvements. It turns visual quality assurance into a repeatable, AI-assisted loop.
Purpose
To ensure visual quality, reduce manual UI review, and speed up continuous improvement of interfaces by catching layout, contrast, alignment, and consistency issues automatically.
Trigger
Use this skill when:
- A user wants to review a UI for visual or usability issues.
- You have finished a frontend feature and want to validate it visually.
- You need to compare a UI against a design mockup or design system.
- You are setting up visual regression testing.
Context
- Screenshots, screen recordings, or Figma/Storybook URLs.
- Design system or mockup to compare against.
- Target device and viewport.
- Accessibility and brand guidelines.
Workflow
- Capture visual assets. Take screenshots, collect recordings, or export frames from Storybook/Figma.
- Define checks. Identify what to look for: alignment, spacing, contrast, typography, component usage, visual regressions.
- Run analysis. Use computer vision or AI vision models to detect anomalies.
- Compare against reference. Diff against the design system or previous approved version.
- Generate findings. Produce a list of issues with severity, location, and suggested fixes.
- Apply safe fixes. For minor issues (e.g., spacing, color token), apply the fix automatically when safe.
- Report and iterate. Summarize results, update tests, and loop back if needed.
Examples
Good: Review a landing page screenshot
User Input: "Review this landing page screenshot and tell me what looks wrong."
Agent Action:
- Loads the screenshot.
- Detects misaligned cards, inconsistent spacing, and a button with insufficient contrast.
- Reports findings with annotated crop suggestions.
- Proposes CSS fixes and applies the safe ones if the user agrees.
Bad: Review without a reference or goal
User Input: "Is this UI good?"
Agent Action:
- Asks for the target audience, design system, and acceptance criteria.
- Does not give vague aesthetic opinions.
Anti-patterns
- Reviewing UI without a reference design or acceptance criteria.
- Applying visual fixes that break accessibility or responsiveness.
- Relying solely on automated detection without human review for subjective issues.
- Failing to update visual regression tests after intentional design changes.
- Running visual checks in a single viewport only.
Verification
Cross Skill References
- UI/UX Pro Max: Design quality, spacing, alignment, typography.
- Frontend Engineering: CSS fixes, component structure, responsive behavior.
- Testing: Visual regression, snapshot tests, automated checks.
- AI-Driven Design System: Comparing UI against design tokens and components.
- Contextual UI Adaptation: Testing across contexts and preferences.
References
