visual-review-pipeline

Visual Review Pipeline

Automated visual review: Aphrodite captures screenshots via Playwright MCP → Self-analyzes for visual issues → Addresses findings in a loop.

Overview

This pipeline establishes a formal workflow for detecting and resolving visual regressions and design issues. It enforces structured JSON output, iteration limits, and escalation criteria to prevent infinite fix loops.

Pipeline Flow

Aphrodite implements UI
    ↓
Playwright screenshot (browser/screenshotPage)
    ↓
Aphrodite self-analyzes (layout, contrast, responsive, accessibility)
    ↓
├─ verdict: pass → proceed to Themis review
├─ verdict: fail + iteration < 3 → fix → re-capture
└─ verdict: fail + iteration = 3 → Zeus escalation

Workflow Steps

Step 1: Capture

Aphrodite uses Playwright MCP to capture screenshots.

• Navigate to target URL or render component
• Capture full-page screenshot via browser/screenshotPage
• Capture viewport-specific screenshots for responsive checks
• Name files descriptively: screenshot-iteration-N-component.png

Step 2: Analyze

Aphrodite self-analyzes screenshots visually.

• Examine screenshot(s) for visual issues
• Identify problems in layout, contrast, responsive behavior, and accessibility
• Return findings in the structured JSON schema (below)
• Include iteration number in findings
• Mark issues with pass_if_fixed IDs

Step 3: Fix

Aphrodite addresses each finding from self-analysis.

• Triage findings by severity (critical → high → medium → low)
• Fix each issue in component code
• Commit changes with descriptive message
• Re-capture screenshot for next iteration

Step 4: Loop

Repeat Steps 1-3 for up to 3 iterations.

• Each iteration must fix at least one pass_if_fixed issue
• Track iteration count in findings object
• If no progress detected (zero fixes applied), escalate immediately
• Compare before/after screenshots to verify fixes

Step 5: Escalate

Zeus intervenes if issues persist after 3 iterations.

• Trigger: 3 iterations exhausted or zero-progress detected
• Action: Zeus coordinates manual review or architectural decision