How to Create Before-and-After Comparisons with Claude
Create before-and-after website comparisons with Claude and ToolRouter. Document redesign impact visually.
Tool
Claude turns before-and-after comparison into an interactive terminal workflow. Capture the current state, deploy your changes, then ask Claude to capture again and compare. Claude highlights the key visual differences and discusses their impact, answering questions like "does the new hero section look better on mobile?" or "did the footer layout break?" in real time.
Connect ToolRouter to Claude
1Open connector settings Open Settings
2Add a custom connector with these details
Name
ToolRouterURL
https://api.toolrouter.com/mcp3Let Claude set you up Open Claude
Steps
Once connected (see setup above), use the Web Screenshot tool:
- Before changes: "Capture full-page screenshots of all pages being redesigned"
- Implement your design changes and deploy
- After changes: "Capture the same pages again and compare with the before screenshots"
- Ask Claude to highlight the key visual differences between each pair
Example Prompt
Try this with Claude using the Web Screenshot tool
I just redesigned our pricing page. Capture it now and compare with the previous version. Highlight what changed.
Tips
- Capture at the same viewport width for accurate before-and-after comparison
- Ask Claude to create a presentation-ready comparison summary
- Document the reasoning behind each visual change alongside the comparison