Write both sides of a Gemini conversation and export a clean AI chat screenshot. Light or dark, bolded lead-ins, code blocks. Free, no sign-up, all in your browser.
Here is a lean three-day plan. Lisbon rewards walking, so most of this costs nothing but shoe leather.
Day 1, Alfama. Start at Miradouro das Portas do Sol, wander down through the old quarter, and finish at the cathedral.
Day 2, Belem. Take tram 15, see the monastery from outside, and eat exactly one pastel de nata too many.
Day 3, Time Out Market and the riverfront. Cheap lunch, then follow the water east until you run out of afternoon.
For parody, mockups, education, and design comps only. Gemini did not write this, and nothing here was generated by a real model. Do not use it to fake evidence, attribute invented claims to Gemini, or mislead anyone about a real answer.
You just designed an AI conversation. These free CommonNinja widgets put a working one on your own site.
A real AI assistant that answers your visitors from your own content, day and night. The thing your mockup is pretending to be.
One floating button that opens WhatsApp, Messenger, Telegram, or live chat, whichever your visitors actually use.
Answer the questions people keep asking, without a bot. Searchable, collapsible, and indexed by Google.
Let people share your screenshot, post, or page in one tap across every major network.
Other free tools for mockups and social content.
Build a realistic WhatsApp-style conversation mockup with bubbles, ticks, and timestamps. Download a PNG.
Use Tool →Design a Telegram-style chat mockup in light or dark mode and export it as a clean PNG.
Use Tool →Create a Messenger-style conversation mockup with blue pill bubbles. Free, in your browser.
Use Tool →Mock up a Reddit-style post with votes, awards, and a threaded comment section. Export a PNG.
Use Tool →Create realistic X (Twitter) post screenshots with views, checkmark tiers, and bookmarks. Download a clean PNG.
Use Tool →Build an iPhone text message mockup with blue iMessage or green SMS bubbles, reactions, and a Read receipt.
Use Tool →Mock up a Facebook post with reactions, shares, and a comment thread. Export a PNG.
Use Tool →Design an Instagram post mockup around your own photo, with caption, likes, and comments.
Use Tool →Build an Instagram DM mockup with gradient bubbles, heart reactions, and a Seen label.
Use Tool →Create a Snapchat chat mockup with colored side bars, a snap score, and a status on every row.
Use Tool →Place bold text behind your subject in one click. Automatic cutout, no sign-up, all in your browser.
Use Tool →Build a ChatGPT-style conversation mockup in light or dark mode, with reasoning rows and code blocks.
Use Tool →Mock up a Google AI Overview card with a search bar, bulleted answer, and cited source chips.
Use Tool →What it is
Put in the question, put in the reply, and the tool renders it the way Google lays out a Gemini answer. Export it as a PNG when it looks right.
No model runs here. The page never contacts Google, never generates anything, and never sends your text away from your browser. You supply both halves of the conversation and the tool handles the drawing.
People reach for this when they need a specific answer rather than a real one: a screen for a pitch deck, a frame for a tutorial video, a before-and-after showing how a better question gets a better reply, or a joke that only works if the wording is exact.
The details follow the real interface. Your question sits right in a soft bubble, the answer runs full width behind a four-point sparkle, bold lead-ins open each section, and the "Gemini can make mistakes" line sits under the message box where it always does.
How to use it
Nothing to install and nothing to sign up for. The preview tracks every keystroke.
Fill the first turn with whatever was asked. Short, lowercase, and slightly informal reads truer than a polished sentence.
Flip a turn to Gemini and type the reply. Wrap a phrase in **double asterisks** to bold it, which is how Gemini opens most of its sections.
Pick light or dark, set the model chip, and decide whether the message box, the rating icons, and the disclaimer line are visible.
One click gives you a double-density PNG, sized for slides, docs, thumbnails, and posts.
Gemini structures. ChatGPT explains.
If you have used both, the difference is in the shape of the answer. Gemini leans on bold headers and short blocks, breaking a reply into labelled parts. Write it as flowing prose and it reads like the wrong assistant, no matter how accurate the colours are.
Getting it right
Four differences worth copying.
Gemini marks its answers with a four-point sparkle rather than a wordmark or an avatar. It is the fastest visual cue that this is Google's assistant and not someone else's.
Gemini opens sections with a short bolded phrase and then explains. Two or three of those in one answer look right; a single unbroken paragraph does not.
Your side sits in a pale blue-grey rounded block rather than a neutral grey one. Small, but it is the difference people register without noticing.
Google says the answer may be wrong and to double-check it, phrased its own way. Borrowing another product's wording is the kind of small error that undoes an otherwise good mockup.
Where people use it
Design, teaching, and comedy. Never proof of anything.
Put a Gemini mockup beside a ChatGPT one and the differences in structure become the whole argument. Much clearer than describing them.
Screen recordings of a live model are slow and unpredictable. A still you wrote yourself cuts straight to the frame you needed.
Slides need one clean image that says what the step produces. An exported mockup beats a cropped screenshot with someone's sidebar in it.
Comedy needs exact wording. Typing the punchline is faster and funnier than hoping a real model stumbles into it.
If what you actually want is an assistant answering your own visitors, that is a widget rather than a screenshot.
Try the AI Chatbot widget free →A one-line caption is enough. It removes any ambiguity and costs nothing, and it matters more for AI screenshots than for almost any other kind.
Glossary
Handy if you are producing these for a team or a client.
Read next
In this article, we are going to discuss font pairing, and why it’s important to web design
Read article →In this article, we are going to discuss the top 6 Airbnb Reviews widgets for your website.
Read article →In this article, we are going to discuss AI, how it revolutionizes the industry of web design and discuss the future of...
Read article →In this article, we are going to discuss the top ten Google Reviews widgets for your website.
Read article →In this article, we are going to explore Google Sites, explain how to build a functional Google Sites website.
Read article →In this blog post, we will learn how to collect emails with Next.js, Mailchimp, and Chakra UI.
Read article →