---
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/image-ops/use-cases/create-responsive-variants/claude
---
# How to Create Responsive Variants with Claude

Claude turns responsive image generation into an interactive terminal workflow. Describe your breakpoints and design requirements, and Claude generates all variants while explaining the size decisions. Ask follow-up questions like "should we add a 2x retina version?" and Claude produces the additional variants along with ready-to-use HTML srcset markup.

## Setup

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

## Steps

1. Connect ToolRouter: claude mcp add toolrouter -- npx -y toolrouter-mcp
2. Ask Claude: "Create responsive variants of this image at 400, 800, 1200, and 2400px widths"
3. Claude generates all four variants using transform_image
4. Ask Claude to also create WebP versions of each variant
5. Request the srcset HTML markup for using the variants on your website

## Example Prompt

```
Generate responsive variants of our hero image: 400px, 800px, 1200px, and 2400px. Create both WebP and JPEG versions.
```

## Tips

- Ask Claude to generate the picture element HTML alongside the image variants
- Request Retina (2x) variants for high-DPI displays
- Claude can determine optimal breakpoints based on your design system
