---
title: ToolRouter — Agent Use Case Guide
description: Step-by-step guide for completing a task with a specific AI agent using ToolRouter.
url: https://toolrouter.com/tools/web-screenshot/use-cases/create-before-after-comparisons/claude
---
# How to Create Before-and-After Comparisons with Claude

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.

## Setup

claude mcp add toolrouter -- npx -y toolrouter-mcp

## Steps

1. Connect ToolRouter: claude mcp add toolrouter -- npx -y toolrouter-mcp
2. Before changes: "Capture full-page screenshots of all pages being redesigned"
3. Implement your design changes and deploy
4. After changes: "Capture the same pages again and compare with the before screenshots"
5. Ask Claude to highlight the key visual differences between each pair

## Example Prompt

```
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
