Tools / Web Screenshot / Use Cases / Create Before-and-After Comparisons / Claude

How to Create Before-and-After Comparisons with Claude

Create before-and-after website comparisons with Claude and ToolRouter. Document redesign impact visually.

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

1Go to Settings → Connectors → Add custom connector

2Enter the details below and click Add

Name

ToolRouter

URL

https://api.toolrouter.com/mcp

3Done — works on Claude chat, desktop, and mobile

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

More Claude Guides

How to Capture Full-Page Screenshots with Claude How to Monitor Visual Changes with Claude How to Create Portfolio Screenshots with Claude How to Capture Competitor Designs with Claude How to Build a Visual Sitemap with Claude

Related Workflows

Comprehensive Website AuditRun a full-spectrum website audit combining SEO analysis, performance testing, site crawling, and visual documentation in one workflow.Landing Page OptimizerOptimize landing pages by auditing SEO elements, testing performance, capturing responsive screenshots, and generating new hero visuals.Visual Brand AuditAudit your visual brand identity by extracting design elements, capturing brand touchpoints, checking logo consistency, and generating updated assets.Subdomain Security ScanEnumerate subdomains, probe services, scan for takeover vulnerabilities, and capture visual evidence.Web Application Security TestCrawl a web application, analyze HTTP security, test for injections, and document findings with screenshots.Phishing Infrastructure AnalysisInvestigate suspected phishing domains through registration analysis, DNS inspection, geolocation, and evidence capture.Product Demo CreatorBuild professional product demo videos from screenshots, animated transitions, and AI narration.Thumbnail and Preview FactoryMass-produce optimized thumbnails and preview images with AI generation, web captures, and automated formatting.Web Content ArchiverArchive web pages completely with archive checks, content extraction, and visual screenshots.