Claude screenshots that match the real thing
Claude.ai doesn’t look like every other chatbot. There’s the warm ivory background instead of stark white, the serif typeface on replies that reads more like a book than a terminal, and that little orange starburst sitting next to every answer. Miss any one of those and the mockup feels off. This tool draws all three.
You type the conversation. The canvas renders it as a Claude thread: user messages tucked into a soft bordered bubble on the right, Claude’s replies flowing full-width on the left beside the starburst mark. It’s all hand-drawn with the Canvas 2D API, so the output is a clean PNG with none of the noise a real screen capture drags in.
Building the conversation
Start from the two sample turns or wipe them and write your own. Every turn carries a role toggle (User or Claude) and a text box. Need a longer exchange? Hit Add Message. Reorder with the arrows, drop one with the x. The turn count is entirely up to you.
Claude’s answers love structure, so line breaks matter here. Press Enter inside a message to split paragraphs or lay out a numbered list, and those breaks carry into the final image. That’s the difference between a mockup that reads like a genuine Claude reply and one that looks like a flat wall of text.
The header holds the orange logo, the “Claude” wordmark in serif, and an editable model chip. Set it to “Claude Sonnet 4.5”, “Claude Opus 4.1”, or switch the header off for a bare conversation crop.
Themes and resolution
Two looks ship with it. The default is Claude’s signature warm paper, that soft #FAF9F5 ivory. Toggle dark and you land on the #262624 charcoal the app wears at night, bubble, text, and border all shifting together in one click.
Downloads come out at 2x, roughly 1200 pixels across, with the height sized to your conversation. Crisp on a retina display, crisp in a slide, crisp in print.
Your text never leaves the page. The drawing happens inside your browser, so a rough-draft exchange stays a draft only you can see.
Who reaches for this
Course creators explaining how to prompt an assistant well. Designers mocking up an AI feature in a pitch deck before the API is even wired. Journalists illustrating a piece about Anthropic’s models. Anyone who needs a quick, shareable image.
Keep it honest, though. A generated picture is an illustration, not a real transcript from Claude or Anthropic, so don’t present it as one.
Questions people ask
Is this connected to the real Claude?
No. You write both halves of the chat. Nothing is generated by an actual model, which is exactly why you can script the whole thing word for word.
Will my text get uploaded anywhere?
Nope. The screenshot is painted locally with HTML5 canvas. No message leaves your browser.
Can Claude’s replies have lists and paragraphs?
Yes. Line breaks inside a message are kept, so multi-paragraph answers and numbered steps render just like the real app.
Can I turn the Claude header off?
Sure. Uncheck it for a clean conversation-only image, or leave it on for the full app look with the wordmark and model chip.
What resolution is the PNG?
It’s 2x, about 1200px wide, and the height adjusts to fit however many turns you add.
Does dark mode match Claude’s actual dark theme?
Yep, the charcoal #262624 background and muted text line up with what you see on claude.ai after dark.