Do you get AI to create your Done videos/screenshots?

An AI agent changes a header component, sees the code compile, and reports "done". The reviewer checks out the branch and finds the header overlapping the nav on mobile - a full round trip for a bug the agent could not see.

Loop AI into the visual review, and it can resolve obvious visual bugs before they ever reach you. To do this, the agent takes screenshots in a real browser and fixes obvious issues. Double dip by using these screenshots to document your work on the PR and in a Done comment.

How the agent checks its work and creates a done video

The screenshot is a by-product of a verification loop, not a separate step. Give the agent a browser and make the loop part of its definition of done for any UI change:

1. Open the page - the agent drives a real browser with the Playwright MCP or CLI or the Chrome DevTools MCP
2. Check against the acceptance criteria - it walks the flow the PBI describes and compares what it sees with what the acceptance criteria say
3. Fix what it finds - the agent fixes issues before a human looks
4. Keep the capture - use screenshots or videos as evidence of the work

✅ Figure: Good example - A prompt that asks for the capture as part of the verification

Better still, bake the loop into AGENTS.md, a skill, or the PR template, so every UI change gets the same visual review without anyone asking for it. This is back pressure for UI work - the browser gives the agent a signal it can act on, the same way a linter or a failing test does.

What to capture

Match the capture to the change:

• Before and after screenshots for visual changes. Take both at the same viewport size so the reviewer can compare them
• A short video for flows. Playwright can record the run, and 10 to 30 seconds is enough
• One screenshot per state for conditional UI. These are the states a reviewer rarely clicks through by hand

Where your Done screenshots/videos goes

The agent already has the capture, so put it where the review normally happens.

• The PR description - taking advantage of screenshots or Done videos is an awesome way to improve the review process, see the {{ SCREENSHOT / DONE VIDEO }} line in Do you know how to write a great Pull Request?
• The Done comment on the PBI - Definition of Done lists these kinds of screenshots or Done videos as good evidence when you close out the PBI

❌ Figure: Bad example - The reviewer has to stop what they're doing, check out the branch, and run the app just to see what changed

✅ Figure: Good example - A before/after pair the agent captured during its own verification, so the change is obvious without leaving the PR

Tips

• Keep images small - crop to the component that changed and follow Do you make sure your screenshots are readable?. A full-page capture of a 3,000 px page helps nobody. If the reviewer needs to look at one spot, add a box or arrow
• Caption every image or video - one line saying what the reviewer should look at. See Do you add useful text captions to images and videos?
• Never capture secrets or customer data - the agent runs against a local or test environment with seed data. Apply the same care as Do you hide sensitive information?, because the capture ends up in a PR that stays visible forever
• Prefer the PR body over a comment - the body is what GitHub shows first, and it survives when comments are collapsed

Figure: Taking advantage of tools that easily integrate with agents allows for automated UI checks

Tooling

• Playwright MCP and Playwright CLI - the agent navigates, reads the accessibility tree, and takes screenshots or records video from the same session
• Chrome DevTools MCP - gives the agent a real Chrome instance with screenshots, performance traces, and console access
• Puppeteer - drives Chrome or Firefox from Node and takes screenshots or records the session. A good fit when the project already uses it, or when you do not want a second browser stack
• Steel - open-source cloud browser sessions for agents, with screenshots and session recordings built in. Useful when the agent runs in CI or a sandbox with no local browser
• GitHub CLI - lets the agent write the PR description without leaving the terminal.