How to export Claude Design as PNGs for Instagram, Twitter, and LinkedIn

This guide started as a Puppeteer script I wrote because my partner kept sending me Claude Design HTML zips to convert by hand. The principles below work whether you use Renda or roll your own. They are the principles, not the pitch.

Claude Design is great at producing pixel perfect HTML. Its built-in PNG export gives you one artboard at a time, at 1x or 2x, with no platform size presets. That is fine for a single image, less so for a ten slide carousel you need at Instagram's exact size. This guide walks through how to bridge that gap, what dimensions each platform expects, and how to handle multi slide carousels without losing your mind.

What is Claude Design's export format?

Claude Design's source format is HTML. The Export menu gives you a .zip of the project, standalone HTML, PDF, PowerPoint, Google Slides, “send to” Canva, Gamma and other tools, or a handoff to Claude Code. Each artboard can also be downloaded as a PNG at 1x or 2x, one at a time. What it does not do is size images for a platform or export every slide of a carousel as PNGs in one go, so for that you still convert the HTML to images yourself.

The bundler format keeps each design self contained. Fonts are inlined or fetched from Google. Layout is responsive, so the same HTML adapts to whatever viewport opens it. Any state changes (carousel navigation, hover effects, animations) ride on JavaScript. That makes the file easy to preview but awkward to ship as a static asset to Instagram, Twitter, or LinkedIn, all of which expect a fixed pixel image at exact dimensions.

How do I export Claude Design as a PNG?

For a single image, use the built-in export: open the artboard's download menu on the canvas and pick PNG 1x or 2x, or inside a Claude conversation use Share, then Export, then PNG (image). For a whole carousel at a platform's exact size you have three options: a browser screenshot, a Puppeteer or headless Chrome script, or a tool like Renda that renders every slide in one upload. The screenshot is fast but loses pixel density and bakes in browser chrome. Puppeteer gives high quality output but takes a custom script per design. Renda runs the same headless Chrome with an AI generated render recipe, so you don't write a script.

The screenshot path is the obvious one and the worst. Browser screenshots include the URL bar, scroll bars, and a frame of gray padding around your design. The Puppeteer path is the right answer for developers who can spend an hour writing a render script. The third path exists because most people who use Claude Design are marketers and designers, not developers, and writing a script per design is not a workflow.

How do I turn a Claude Design carousel into Instagram slides?

Converting a Claude Design carousel into Instagram slides takes four steps: export the HTML zip from Claude Design, identify how many slides the carousel contains, render each slide individually at Instagram's exact pixel dimensions (1080 by 1350 for 4:5 portrait, 1080 by 1080 for square), and hide the carousel arrows, page counters, and pip dots before capture so they don't bake into the final image.

The third step is where most people get stuck. A browser screenshot at 1080 wide produces a blurry image because your screen renders at the wrong device pixel ratio. Headless Chrome at deviceScaleFactor 2 gives you crisp output. Renda handles this automatically for every preset.

Why aren't screenshots enough?

Browser screenshots fail Claude Design exports for four reasons: they capture browser chrome (URL bar, scroll bars, gray padding) on top of your design, they render at your viewport's pixel ratio rather than the platform's, they only capture the visible slide of a carousel, and they bake in the carousel's interactive UI (arrows, dots, swipe hints) as static visual noise that you cannot remove without Photoshop.

If you only need one image and you don't care about retina sharpness, a screenshot works. If you're shipping a five slide carousel to your client tomorrow, you need exact dimensions, no chrome, no interactive elements, and one PNG per slide. That is the gap this guide fills.

The full guide: exporting Claude Design without losing your mind

The workflow below is what we use to convert any Claude Design HTML export into platform ready images. It works for marketing carousels, social cards, conference slides, and one off graphics. Five steps.

Step 1: Get the HTML zip from Claude Design

Inside Claude Design, open the design you want to export. Click Export in the top right (inside a Claude conversation it sits under Share, then Export). Pick “Download as .zip” for the project with its assets folder, or standalone HTML for a single self contained file with fonts and images bundled in. Either one works for the rest of this workflow.

If you have a multi page design (a deck or a multi slide carousel), the export bundles every page into one HTML file. Your job during the rest of this workflow is to render each page or slide separately.

Step 2: Pick the right size for your platform

The single biggest source of bad social media output is rendering at the wrong dimensions. Instagram, Twitter, and LinkedIn each want specific pixel sizes. Get them wrong and the platform crops, squishes, or compresses your design.

Reference dimensions:

For retina displays, render at 2x scale and let the platform downsample. So target width 2160 instead of 1080 for an Instagram 4:5. Most rendering tools (Puppeteer, Renda, Playwright) call this deviceScaleFactor.

Step 3: Render the HTML at platform dimensions

Three paths.

The browser screenshot path. Open the HTML, hit Cmd+Shift+4, drag a box around the design, save. This is the fastest and the worst. The dimensions match your screen and the box you dragged, not Instagram. Browser chrome is usually included unless you remember to hide it. Skip this unless the design is meant for a personal blog and quality does not matter.

The Puppeteer path. Install Puppeteer, write a script that loads the HTML at viewport (1080, 1350) with deviceScaleFactor 2, waits for fonts to load, and calls page.screenshot. About thirty lines of code per design. The catch is that each design has different selectors to wait for and different elements to hide, so the script gets rewritten every time. If you ship Claude Design output weekly, this becomes a job in itself.

The Renda path. Drop the HTML zip into the upload box, pick a preset (Instagram 4:5, Twitter 16:9, LinkedIn carousel, etc.), wait about thirty seconds, download a zip of one PNG per slide. Renda runs the same headless Chrome under the hood, but the rendering recipe is generated by an AI that reads your design and figures out what to wait for and what to hide. You don't write a script. Try it free.

Step 4: Hide the carousel chrome

Claude Design sometimes adds interactive UI to multi slide designs: left and right arrows, page counters (3 of 7), pip dots at the bottom. These are useful in the browser. They are catastrophic in a screenshot, because they bake in as static visual noise that the platform sees as part of your design.

Three ways to remove them.

CSS. Open the HTML, find the selectors for the arrows and dots, add a style block that sets display: none on each. Tedious but reliable.

Puppeteer. In your render script, call page.evaluate with a snippet that hides the same selectors before screenshotting. Same idea, programmatic.

Renda. Tell the AI in plain English. “Hide the arrows” or “remove the pip dots” reruns the render with new hide selectors. The chat input lives next to the rendered output, so you iterate without leaving the page.

If you are using the Puppeteer path, the selectors to look for are usually [data-arrow], [data-pip], or [aria-label="Next slide"]. Claude Design does not stabilise these names, so check the HTML for each design.

Step 5: Export and post

For carousels, name the files in slide order: slide 01.png, slide 02.png, etc. Instagram and LinkedIn both accept upload order, but pre naming saves you a manual sort. PowerPoint imports slides in alphabetic order, so the same naming works there too.

For single images, just download. Don't run them through a JPEG compressor. PNGs are losslessly compressed already, and any further re encoding hurts gradients and text.

Post directly. Skip Photoshop, Canva, Figma. Your image is already at the dimensions the platform asked for.

Tools that help

Renda

The tool I built. Drop a Claude Design HTML zip, pick a preset, get clean PNGs. Free tier is 5 PNGs per month (each slide counts as one), no card. Pro is £4.99 per month and removes the monthly limit. Handles the AI recipe generation, headless Chrome rendering, multi slide carousels, and the chat refinement step in one upload. Best fit if you ship Claude Design output more than once a week. tryrenda.com.

Puppeteer + headless Chrome

The right answer if you write code. Cloudflare Browser Rendering, Browserless, and ScrapingBee all expose hosted Puppeteer. Cost runs about $0.0005 per render at hosted price, or free if you run Chromium yourself. Plan on one to two hours to write the first script and ten minutes per design after that.

The Canva connector

Claude Design has a “Send to Canva” button. When it works, it opens your design as a new Canva project that you can then export from Canva. Two limitations: Canva converts the design rather than rendering it (decks become editable presentations, other designs import as a basic code design, and complex CSS may not convert exactly), and in our testing it failed silently from our Anthropic workspace. If you want to keep editing inside Canva, try it. If you want a PNG out without going through Canva, look elsewhere.