How to Create Responsive Variants with Claude
Generate responsive image variants with Claude and ToolRouter. Optimal images for every device.
Tool
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.
Connect ToolRouter to Claude
1Go to Settings → Connectors → Add custom connector
2Enter the details below and click Add
Name
ToolRouterURL
https://api.toolrouter.com/mcp3Done — works on Claude chat, desktop, and mobile
Steps
Once connected (see setup above), use the Image Ops tool:
- Ask Claude: "Create responsive variants of this image at 400, 800, 1200, and 2400px widths"
- Claude generates all four variants using transform_image
- Ask Claude to also create WebP versions of each variant
- Request the srcset HTML markup for using the variants on your website
Example Prompt
Try this with Claude using the Image Ops tool
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