Screenshot Regression Loop
Capture UI screenshots, diff against baselines, fix visual drift, and repeat until pixel diffs are within tolerance.
by Trooper
Start the "Screenshot Regression Loop" loop. Goal: visual regression diff is within approved tolerance Max iterations: 8 Between iterations run: npx playwright test --grep @visual || npm run test:visual Exit when: no unapproved visual diffs remain Step 1: Capture UI screenshots, diff against baselines, fix drift or get approval to update baselines. Self-pace this loop. After each iteration, run the check command, read the output, and only continue if the exit condition is not met. Stop when the exit condition passes or max iterations is reached. Give a short status update each pass.
Paste the kickoff prompt into Cursor, Claude Code, or Codex. Deeplinks do not install hook files.
1. Capture UI
Screenshot key pages and components at target breakpoints.
2. Diff baselines
Compare against stored baselines and highlight drift regions.
3. Fix or approve
Fix unintended drift or get approval to update baselines.
Guardrails
Rules the agent must follow so it cannot cheat the exit condition.
- Do not update baselines without reviewing each diff
- Flag intentional design changes for human approval before accepting
- Capture full-page and component-level shots for context
More Testing loops
Figma-to-Code Loop
Implement a Figma design in code, screenshot the result, diff against the design spec, and iterate until they match.
Landing Page Iteration
Screenshot the live site, annotate weak sections, redesign in code, commit, preview, and iterate until conversion-ready.
E2E Until Green
Run Playwright or Cypress end-to-end tests with annotated failure screenshots, fix root causes, and loop until the suite is green.