How to make a ChatGPT chat mockup

1. 1

   Build the exchange

   Add the prompt, assistant response, model label, and any images you need.

2. 2

   Polish the mockup

   Switch dark mode, add a device frame, and trim the text so the lesson is readable.

3. 3

   Export

   Hit Export to create a PNG mockup.

What you can do with the ChatGPT mockup generator

• User and assistant messages

  Add user and assistant messages, plus images where the AI chat format supports them.

• Model labels

  Choose model labels from the ChatGPT setup and keep the prompt flow clear.

• Dark mode and device frame

  Switch dark mode and add a device frame or status bar for course and product demos.

• PNG export

  Export a PNG mockup for tutorials, workflow docs, decks, and social content.

Related AI chat pages