CodeKitHubWhat Is This Tool?
Claude Conversation Generator recreates the look of Anthropic's Claude interface — including its signature warm, off-white background and clay-colored user message bubbles — so you can type your own conversation and export it as a shareable PNG image.
It must never be used to fabricate fraudulent evidence, harass or defame someone, or impersonate a real person's actual posts or messages — doing so may be illegal depending on your jurisdiction.
Everything renders locally in your browser using real HTML/CSS and html2canvas; nothing is ever uploaded to a server.
Why Use It?
- You're writing a tutorial on prompt engineering and want a screenshot showing a realistic before/after exchange, without needing to actually run and screenshot a live Claude session for every example.
- You're making a joke or meme built around a fictional AI response, and want the interface to look authentically like Claude's real cream-and-clay UI instead of a generic chat bubble screenshot.
- You're prototyping an AI-assistant feature for your own app and want a quick, editable reference mockup styled after a real, recognizable chat UI to show teammates or in a pitch deck.
- You're building slides for a talk on AI tools and want a clean example conversation to illustrate a specific capability, without a distracting real username or unrelated chat history visible.
- You want to iterate on a mock conversation quickly — add a message, reorder it, swap an avatar — and download a clean, high-resolution PNG when it's ready, all without an account or watermark.
How to Use
- Optionally upload a photo for your avatar and the assistant's avatar.
- Click "+ Add message" to add a row, choose User or Assistant, and type the message text.
- Reorder or remove rows as needed — the live preview updates instantly.
- Click "Download PNG" to save the finished mockup image.
Example
Input
Message 1 (User): "Can you explain what a black hole is in simple terms?" · Message 2 (Assistant): "Sure! A black hole is a region of space where gravity is so strong that nothing — not even light — can escape it."Output
A PNG showing an alternating conversation styled like Claude's real interface: a gray avatar and tan rounded bubble for the user message, and a clay-orange Claude avatar with plain black text for the assistant reply.The image updates live in the preview panel and downloads as a high-resolution PNG with a single click — no waiting, no server round-trip.
What you can customize
- User and assistant avatar photos (upload your own or use the defaults).
- Any number of alternating user/assistant messages.
- Message order — add, remove or reorder rows freely.
- Layout details matching Claude's real cream-and-clay visual style.
Responsible use
This generator exists to make it easy to create clearly fictional mockup images for humor, storytelling and design work. If you share an image made with this tool, consider adding context so viewers understand it is not a real Claude conversation.
What each field controls
| Field | What it changes |
|---|---|
| User avatar upload | Photo shown next to user messages (default: gray icon) |
| Assistant avatar upload | Photo shown next to assistant messages (default: clay-orange icon) |
| Message role (User/Assistant) | Which bubble style and avatar side the message uses |
| Message text | The content shown inside each message |
| Row order | The sequence messages appear in the exported conversation |
Frequently Asked Questions
Is it legal or ethical to use this tool?
The tool itself is legal to use for entertainment, mockups, presentations and design work. What is not legal or ethical is using the generated image to deceive someone into thinking it's a real Claude conversation. Please only use this for clearly fictional or illustrative purposes.
Does the tool upload my content anywhere?
No. Everything you type stays in your browser's memory and is rendered directly with HTML and CSS, then captured to an image with html2canvas. The PNG is generated and downloaded on your device — nothing is ever sent to a server.
Can I upload a real photo as the avatar?
Yes — you can upload a photo for the user avatar and the assistant avatar, or leave them as the default colored icons.
Should I use this or one of the other AI chat mockup generators?
If your mockup is about coding help, writing assistance or long-form reasoning with a warm, minimal UI, use this Claude generator. If you specifically need a search-style answer with citations, use the Perplexity generator; for a Google Workspace/Android context use the Gemini generator; for a Microsoft 365 or Windows context use the Copilot generator. Pick whichever real product your audience will recognize the scenario from.
Is this affiliated with Anthropic?
No. This is an independent fan-made mockup tool for entertainment and design purposes only. It is not affiliated with, endorsed by, or connected to Anthropic in any way.
Can I reorder messages after I've already added several?
Yes — each message row can be moved up or down or removed entirely, and the live preview updates instantly so you can see the conversation flow before downloading.
Is there a limit on how many messages I can add to one conversation?
There's no hard limit — add as many user/assistant message rows as you need, and the preview grows to fit the full conversation before you export it.
What resolution is the downloaded PNG?
The export is captured at high resolution using html2canvas, sized to fit the full conversation you've built — sharp enough for a slide deck or a blog post screenshot, not a low-res thumbnail.
Does it support markdown formatting in the message text, like bold or code blocks?
No — the message fields render as plain text, matching the tool's focus on quick conversation mockups rather than full markdown rendering. For formatting-heavy examples, you may need to approximate the look manually.
Can I remove the avatars entirely, or do I have to use one?
Leaving the avatar upload empty falls back to the default colored icon for that role (user or assistant) — there isn't a toggle to hide avatars completely, since they're part of the layout matching Claude's real interface.