AI
AI Chat Mockups for Tutorials and Slides: When and How to Use Them
When a scripted AI chat mockup beats a real screenshot, how to format answers so they read well, and how to label mockups honestly.
By The Mocknex team · Published · Updated · 6 min read
Screenshots of AI conversations have become a standard teaching aid, but real screenshots have problems: answers change every time you ask, they can reveal account names or history, and a great answer from last month might be impossible to reproduce for a re-shoot. A scripted mockup fixes all three — as long as you’re clear that it’s a mockup.
Mockup or real screenshot?
- Use a real screenshot when the point is “this is what the product actually said” — reviews, journalism, bug reports, research.
- Use a mockup when the point is the technique — how to phrase a prompt, how a workflow could look, a product concept, or a slide that needs a clean, consistent example.
Formatting answers so they read well
The AI layouts in our ChatGPT-style, Claude-style, Gemini-style, Perplexity-style and Grok-style generators support simple formatting in the assistant’s messages:
- ✓A blank line starts a new paragraph.
- ✓Lines starting with
-become bullets;1.numbered steps. - ✓
**double asterisks**make bold text. - ✓
`backticks`show inline code. - ✓A paragraph starting with
#becomes a heading.
For screenshots, shorter is better: a heading or one-line intro, three to five bullets, and a closing line.
Prompt-writing lessons: before and after
The most common lesson format is a vague prompt next to a specific one. Mockups let you control both answers, so the difference comes from the prompt and not from luck.
Labelling and honesty
Accessibility
A screenshot of text is invisible to screen readers. When you publish one, include the conversation as alt text or in the body copy — the prompt and a summary of the answer are usually enough. In slides, read the key lines aloud.