Mockly

Mockly's Claude chat generator recreates claude.ai: grey user bubbles, full-width responses with the action row, real markdown and code block rendering, an editable model label, both Claude themes, and PNG export.

How to make a fake Claude conversation

  1. 1

    Write the exchange

    Click to add user prompts and Claude responses. Markdown in responses renders as you type it.

  2. 2

    Match the Claude details

    Pick the model label, toggle header and footer, and switch light or dark theme.

  3. 3

    Export

    Hit Export for a PNG mockup.

What you can do with the Claude chat generator

  • Real Claude layout

    Your messages sit right-aligned in Claude's grey bubbles; responses render as full-width text with the copy and thumbs action row, just like claude.ai.

  • Markdown and code blocks

    Responses support full markdown: headings, bold, links, lists, tables, inline code, and dark-styled code blocks.

  • Editable model label

    Set the model name shown in the header (Sonnet, Opus, or anything you type).

  • The Claude composer

    The "Reply to Claude" input pill with the plus, mic, and orange voice buttons.

  • Themes and export

    Claude's cream light theme and warm dark theme, device frame, status bar, and PNG export.