How to Verify AI Agent UI Output

AI coding agents write code blind — they can’t see if the button renders, the layout works, or the form throws errors. Here’s how to close that feedback loop.

Last verified: March 29, 2026

The Problem

When Claude Code, Cursor, or Codex builds a frontend feature:

• They modify files but don’t open a browser
• Layout bugs, missing elements, and visual regressions go unnoticed
• You manually check every change — eating 30-40% of development time

Solution 1: ProofShot (Recommended)

The simplest approach — install once, works with any agent:

npm install -g proofshot
proofshot install  # Auto-detects your agents

Then in your agent:

proofshot start --run "npm run dev" --port 3000
agent-browser open http://localhost:3000
agent-browser screenshot ./proofshot-artifacts/homepage.png
proofshot stop

Output: Video recording, screenshots, interactive HTML viewer, error logs.

Solution 2: Playwright Scripts

For more control, write Playwright tests that your agent runs:

import { test, expect } from '@playwright/test';

test('login page renders correctly', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await expect(page.getByRole('button', { name: 'Sign In' })).toBeVisible();
  await page.screenshot({ path: 'screenshots/login.png' });
});

Tell your agent: “After making changes, run npx playwright test to verify.”

Solution 3: Visual Diff with Baseline

# Save baseline screenshots
proofshot start && agent-browser screenshot ./baseline/page.png && proofshot stop

# After changes, compare
proofshot diff --baseline ./baseline

PR Integration

Upload proof to GitHub PRs:

proofshot pr        # Auto-detect current PR
proofshot pr 42     # Specific PR number

Reviewers see video proof and screenshots inline with the code diff.

Best Practices

1. Always verify after UI changes — Make it part of your agent workflow
2. Screenshot key states — Empty states, loading states, error states
3. Check console errors — ProofShot captures these automatically
4. Use baselines — Visual regression catches subtle breaks
5. Include proof in PRs — Visual evidence > trust