Interactive product canvas
Put the real workspace at the centre of the page, annotate the one interaction that matters, then map the workflow around it.
Section sequence
6sections, in the order the visitor meets them. Bar height is the section's weight in the page.
- OrientCanvas promise
- DemonstrateLive-looking canvas
- DemonstrateFocal interaction
- ProveReal artifact
- NavigateWorkflow annotations
- ConvertOpen the canvas
How the page argues
- 1
State the canvas promise in one line: what this surface is for.
- 2
Show the workspace at real density, populated with believable work.
- 3
Draw attention to the single focal interaction that defines the product.
- 4
Show a real artifact produced on the canvas, so the surface has an output.
- 5
Annotate the surrounding workflow: what happens before and after this screen.
- 6
Invite the visitor onto the canvas rather than into a form.
What each section has to be
- OrientCanvas promise
- One sentence naming what the surface is for, so the dense screenshot below is readable.
- DemonstrateLive-looking canvas
- The real workspace at real density with real-looking content. Empty states and lorem ipsum both break the spell.
- DemonstrateFocal interaction
- One interaction — drag, multiplayer cursor, command, inline edit — isolated and shown working.
- ProveReal artifact
- Something finished that came off this canvas, proving the surface produces outcomes, not just views.
- NavigateWorkflow annotations
- Short labels placing this screen in the wider process: what feeds it, what it hands off.
- ConvertOpen the canvas
- An entry that lands the visitor on a populated canvas, never on an empty document.
Is this the right sequence?
Who it is for
Practitioners who will recognize a real workspace instantly and dismiss a fake one just as fast.
Products it suits
Canvas, editor and workspace products where the surface itself is the argument.
Not for
Backend services where the UI is incidental, so a staged canvas would flatter the wrong thing.
Evidence strategy
Which proof modes carry the page, in the order they land.
- Primary: the workspace at real density, which practitioners read as authenticity.
- Secondary: the focal interaction, which shows what is different about this surface.
- Tertiary: the finished artifact, which converts a nice surface into a result.
CTA plan
What the page asks for, what it offers instead, and where.
- Primary
- Open a populated canvas
- Secondary
- Watch the focal interaction, or explore the workflow around it
- Placement
- Primary action adjacent to the canvas, so the click happens where the interest is; repeated after the artifact.
Responsive behavior
What the sequence has to do when the viewport stops cooperating.
- The canvas crops rather than scales below tablet width: keep one region legible instead of shrinking everything.
- The focal interaction becomes a short looping clip on mobile rather than a hover-dependent demo.
- Workflow annotations move from callouts pinned to the canvas into an ordered list beneath it.
Anti-patterns
The failure modes that make this sequence stop working.
- A shrunken full-screenshot where nothing is readable, which proves only that a UI exists.
- An empty canvas, which shows the product's worst state as its first impression.
- Fabricated content that a practitioner will identify as fake in a second.
- Annotating twelve features instead of one focal interaction.
Build spec
What an agent needs in order to build Interactive product canvas: what each section must contain, the copy rule that keeps it honest, the slots to resolve from your product, and the order to build in.
Section specs
- 1.
Canvas promise
- Surface purpose sentence
- Who shares it
- No feature enumeration
Copy rule: Name the shared object ('one canvas your whole team edits'), in under twelve words.
- 2.
Live-looking canvas
- Populated real workspace
- Legible primary region at 1x
- Collaborator or state indicators
- Correct typography and tokens from the product
Copy rule: Content inside the canvas must read as real work, with plausible names and dates.
- 3.
Focal interaction
- One isolated interaction
- Before and after state
- Loop under five seconds
Copy rule: Caption the interaction with the verb the user performs, once.
- 4.
Real artifact
- Finished output
- Its origin on the canvas
- Who made it
Copy rule: Say what the artifact was used for after it left the canvas.
- 5.
Workflow annotations
- Upstream input
- This screen's job
- Downstream handoff
Copy rule: Three labels, four words each, in process order.
- 6.
Open the canvas
- Populated-entry action
- Guest or no-account path if it exists
- Sample file link
Copy rule: Promise a populated starting state explicitly.
Content slots
- canvasCapture
- A real, populated workspace capture at a resolution that stays legible at 1x.
- focalInteraction
- The one interaction that best distinguishes this surface, with before/after states.
- artifactExample
- A finished artifact produced on the canvas, with its purpose and maker.
- workflowNeighbours
- What feeds the canvas and what it hands off to.
- populatedEntry
- The URL or flow that opens a pre-filled canvas rather than an empty document.
Build order
- Capture the populated canvas first and confirm the primary region is legible at 1x.
- Isolate the focal interaction and produce its loop.
- Write the canvas promise from what the capture actually shows.
- Add the artifact and its origin, then the three workflow annotations.
- Wire the populated entry and verify it never lands on an empty state.
QA checks
- Text inside the canvas is readable without zooming on a laptop viewport.
- The canvas contains no lorem ipsum and no placeholder avatars.
- The focal interaction is understandable without its caption.
- The entry action opens a populated canvas.
- Only one interaction is annotated as focal.
Agent tags
The vocabulary an agent matches this recipe on.
- product-canvas
- focal-interaction
- real-density
- workflow-annotation
- workspace-entry