Mockups
Some things are easier to show than to specify. A mockup is a lofi wireframe — a hand-drawn-style sketch of a screen, or a short flow of screens — that sits alongside a spec so readers see what the words mean.
Mockups are deliberately rough. They render in a sketched, grayscale, marker-on-paper style: real enough to show layout, controls, and flow; unfinished enough that nobody mistakes them for visual design. The point is what’s on the screen and where, not what it will look like shipped.
Make one
Ask the assistant, in the document you’re working on:
“Add a mockup of the settings screen: workspace name, a members list, and a delete-workspace button behind a confirmation dialog.”
The assistant sketches it and attaches it to the document. Refine it the same way — “make the members list a table”, “show the confirmation dialog open” — and everyone viewing the mockup sees each change as it lands.
You can do the same from Claude or another connected chat app through the MCP server, where the assistant can also show you the mockup rendered right in the conversation.
What a mockup can show
- Real interface pieces — buttons, forms, tables, dialogs, menus, calendars, and the rest of a full component set, drawn in the wireframe style. Squiggles stand in for text that doesn’t matter yet; a crossed box stands in for an image.
- A state, chosen by you — a mockup shows a moment, not behavior. If the interesting moment is the confirmation dialog being open, the mockup shows it open.
- A flow — a mockup can hold several screens, with controls linking one to another. Readers click through the flow the way a user would move through the real thing.
Mockups are static by design: nothing in one executes, computes, or fetches. That’s what makes them safe to share and cheap to keep.
Where they appear
A mockup attached to a document shows up with the document’s attachments and opens in place, like any supported tool’s attachment. It also has its own page, linked wherever the mockup is named.
The attachment always shows the mockup as it currently stands. When a spec truly needs to keep an old version — before-and-after, say — make the rework a new mockup and attach it alongside the old one.