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. It is not great at producing the PNGs you actually need to post on Instagram, Twitter, or LinkedIn. This guide walks through exactly 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 exports your work as an HTML zip. Inside you get HTML, CSS, JavaScript, and asset files in a bundler format that loads in any modern browser. There is no native PNG, JPEG, or PowerPoint export. To use Claude Design output anywhere outside a browser, you have to 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?

To convert Claude Design HTML into a PNG, you have three options: a browser screenshot, a Puppeteer or headless Chrome script, or a tool like Renda that handles both for you 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 the export button in the top right, next to share. Pick “Download HTML” from the menu. You will get a zip file containing index.html, a CSS bundle, a JavaScript bundle, and an assets folder with any images or fonts the design uses.

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. You get a JPEG, which already loses some quality. The dimensions match your screen, 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 10 PNGs per month, no card. Pro is £4.99 per month for unlimited. 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: it requires a paid Canva account, and in our testing it failed silently from our Anthropic workspace. If you already pay for Canva and want to keep editing inside their tool, try it. If you want a PNG out without going through Canva, look elsewhere.