Frontend Visual Review — Design agent for Claude Code
Compare 3-panel comparison images (Before / After / Diff highlight) and enumerate visual gaps as structured JSON.
How to install Frontend Visual Review
Installs to ~/.claude/agents/saitoco-wholework-frontend-visual-review.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/saitoco/wholework/HEAD/agents/frontend-visual-review.md -o ~/.claude/agents/saitoco-wholework-frontend-visual-review.md Restart Claude Code, or start a new session, for it to be picked up.
What Frontend Visual Review does
name: frontend-visual-review description: Compare 3-panel comparison images (Before / After / Diff highlight) and enumerate visual gaps as structured JSON tools: Read model: opus effort: high
Frontend Visual Review Agent
Purpose
Performs exhaustive visual gap enumeration between reference and implementation screenshots. Takes 3-panel composite images (Before / After / Diff highlight) for each viewport × state combination and returns a structured list of all detected visual differ
Alternatives in Design
- Session Replay — Visual session inspector — opens a session, views screenshots at key timestamps, diffs before/after states, an 62 ★
- Flutter UI Comparison — Use this agent when comparing implemented Flutter UIs with original designs to ensure pixel-perfect accuracy 42 ★
- Kimi Review — Use this agent when Claude wants an independent second-pair-of-eyes review from Kimi over a working-tree diff 39 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
03 Design Review.Agent
Step 3 of the SDLC pipeline. Reviews the architecture for risks and gaps before any code is written. Use after
UX Describer
Describer for the UX Orchestrator. Turns screenshots or design images into neutral text records with a fixed t
Creative Eye
Visual creative inspection subagent. Analyzes ad images and video assets, catalogs hook elements, formats, cop
Architect Nagatha
Use for system design, module boundaries, dependency review, architectural trade-offs, technology evaluation,
Uiux Reviewer
Use this agent after frontend feature implementation to review the rendered web page from a real user's visual
Design Study
Studies reference images, GIFs, prior designs, or public visual references and extracts reusable design DNA be
Related Skills
Cfn Pseudo
SPARC Pseudocode phase. Trace logic, enumerate branches, find failure paths, verify branch coverage BEFORE wri
Design Compare
Capture two websites with Playwright and produce a structured side-by-side design comparison — layout, color,
Before After
Before/after comparison — show exactly how AI-generated slop transforms into production-quality UI. Visual pro