20 openings

Hero recipes

A hero recipe is an idea for how the first screen starts the conversation. It might invite a task, show the product working, frame the problem, or put proof beside the promise. These 20 openings are grouped by the job that first screen needs to do.

Browse all 32 page recipes How the collections fit together

What each card shows

Communication-reviewed cards explain the opening idea and show where it was observed. Older records temporarily show their first 2 structural notes while their copy is reviewed.

Why grouped this way

Each group names the job of the opening, not an industry or a visual style. That lets the same idea work for different kinds of products and different Design Kits.

Free and Pro

Every opening includes enough public guidance to judge it. 5 of these 20 also include their machine-ready implementation guidance free; Pro unlocks the legacy build specs on the rest.

Goal

Access

20 openings

Start with an action

6 openings

Can the visitor take the first meaningful step immediately? The opening earns attention by accepting a prompt, search, transaction, bounded sample, signature gesture, or safe developer input. It only works when that first action returns something genuine.

R02First action

Start with the job

Ask visitors what they want to accomplish before explaining the product. Their answer makes a broad platform personally relevant.

Communication idea

Ask visitors what they want to accomplish before explaining the product. Their answer gives them a personal frame for understanding everything that follows.

Observed in Pipedream, Lovable, v0, Replit

R03First action

Pro

Search-first utility

Put the visitor's query fields above every explanation, then let results, filters and adjacent reassurance do the persuading.

First screen

ActQuery fields
NavigateCategory switcher

Then Result set

The opening asks for: Search
Where the ask sits: Search control in the first screen; a per-result action on every card; account creation only at the transaction.

6 sections in the legacy structure record

R04First action

Pro

Transaction launcher

Open with the parameters of the transaction itself, quote price or availability immediately, then offer the account and the wider catalogue.

First screen

ActParameter form
DemonstratePrice or availability preview

Then Local context

The opening asks for: See the price or availability
Where the ask sits: Form and quote in the first screen; account continuation only after the quote; catalogue routes below the fold.

6 sections in the legacy structure record

R05First action

Pro

Hands-on sample

Let the visitor complete a small, safe version of the core action inside the page, then explain the full product behind it.

First screen

OrientSample framing
ActLive sample

Then Input and output pair

The opening asks for: Try it here
Where the ask sits: Sample in the first or second screen; continuation directly under the output; no CTA interrupts the interaction.

6 sections in the legacy structure record

R06First action

Pro

Signature gesture utility

Name the one gesture the product is organized around, show it working in the first screen, then unfold the catalogue of actions it reaches.

First screen

OrientGesture name
DemonstrateGesture in motion

Then Action catalogue

The opening asks for: Install for the detected platform
Where the ask sits: Install in the header and repeated after the catalogue; nothing competes with it above the fold.

6 sections in the legacy structure record

R21First action

Pro

Sandbox to docs quickstart

Give a runnable start at no cost, show the exact output to expect, then hand off to docs and to a scaling conversation.

First screen

ActRunnable start
DemonstrateExpected output

Then Verification step

The opening asks for: Copy and run it
Where the ask sits: Copy control on the snippet itself; docs link immediately after the expected output; sales last.

6 sections in the legacy structure record

Show the output or product

4 openings

Is the artifact more persuasive than another sentence about it? The first screen carries the claim with finished work, the real workspace, a meaningful interface state, or a visible transformation. Empty or staged states do not count.

R08Show the work

Pro

Output gallery discovery

Lead with finished work, let the visitor browse it by style or job, and reveal the tool only once the output has done the arguing.

First screen

DemonstrateOutput wall
NavigateCollection rail

Then Attribution

The opening asks for: Try it on something of your own, or buy the piece in view
Where the ask sits: An action inside every tile's hover and detail state, plus one persistent action in the header.

6 sections in the legacy structure record

R09Show the work

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.

First screen

OrientCanvas promise
DemonstrateLive-looking canvas

Then Focal interaction

The opening asks for: Open a populated canvas
Where the ask sits: Primary action adjacent to the canvas, so the click happens where the interest is; repeated after the artifact.

6 sections in the legacy structure record

R10Show the work

Pro

Interface as evidence

Pick the one interface state that answers the main objection, show it at full fidelity, then explain why it holds at scale.

First screen

OrientObjection named
DemonstrateMeaningful state

Then Objection-led callout

The opening asks for: Start with your own data
Where the ask sits: The fork sits after the scale section, once the objection has actually been answered.

5 sections in the legacy structure record

R12Show the work

Pro

Before and after artifact

Show the starting artifact, the changed artifact and the single action that did the work.

First screen

OrientProblem state
DemonstrateTransformation

Then After state

The opening asks for: Try it on your own file or text
Where the ask sits: Directly under the after state, while the improvement is still on screen.

5 sections in the legacy structure record

Show how work moves

3 openings

Does the handoff matter as much as the result? A short trigger, handoff, approval, or create-to-publish sequence makes the operating model legible without pretending the product is a one-click trick.

R11Show the work

Workflow storyboard

Walk the trigger, the middle steps, the handoff and the result in the order a real user meets them.

First screen

OrientTrigger
DemonstrateStage cards

Then Handoff

The opening asks for: Start at the stage that hurts most
Where the ask sits: A small action on each stage card, plus one whole-flow action after the result artifact.

5 sections in the legacy structure record

R13Show the work

Pro

Agent inside the workflow

Establish the human process first, place the agent at one named step, and keep the approval and the audit trail visible.

First screen

OrientHuman process
DemonstrateAgent step

Then Approval state

The opening asks for: Enable the agent on one step
Where the ask sits: Primary action after the approval state; the governance routes sit beside it, not in the footer.

6 sections in the legacy structure record

R14Show the work

Pro

Build to publish loop

Show create, revise, integrate and publish as one continuous loop that ends in something live.

First screen

DemonstrateCreate state
DemonstrateRevise state

Then Integration bridge

The opening asks for: Create and publish something
Where the ask sits: Primary action after the published output; the repository route sits beside the integration bridge.

6 sections in the legacy structure record

Put proof next to the promise

4 openings

Is disbelief or consequence the first obstacle? Defensible scale, control, customer outcome, or local availability answers the primary objection near the claim instead of asking the visitor to wait for section five.

R17Earn trust

Pro

Measured scale band

Make a concrete promise, follow it with dated, unit-labelled scale facts, then tie each fact to the surface that produces it.

First screen

OrientConcrete promise
ProveMetric band

Then Fact-to-surface link

The opening asks for: Open the live status or the current report
Where the ask sits: Verification route directly under the band; the commercial CTA stays below, after the reliability detail.

5 sections in the legacy structure record

R18Earn trust

Security and risk counterweight

Lead with the speed or capability, put the controls that bound it immediately after, then hand over the implementation detail.

First screen

OrientCapability promise
DemonstrateThe fast thing, happening

Then Control layer

The opening asks for: Start with the controls already on
Where the ask sits: Self-serve start after the control layer; the review contact sits with the evidence cards, not in the footer.

6 sections in the legacy structure record

R19Earn trust

Pro

Customer outcome ladder

State the job, show product evidence, add one quantified customer result, then offer the step that matches the visitor's stage.

First screen

OrientJob statement
DemonstrateProduct evidence

Then One quantified result

The opening asks for: Start a trial on your own data
Where the ask sits: Stage-matched actions after the case link; the trial route also repeats near the product evidence.

6 sections in the legacy structure record

R32Map breadth

Pro

Network scale with local action

Establish the coverage of the whole network, then immediately let the visitor act in one local, personal or code-level place.

First screen

ProveNetwork metric
ProveCoverage map

Then Local action

The opening asks for: Run the local action for your own location or stack
Where the ask sits: Local action within the first two screens, directly after the coverage map; the network metric never carries a CTA alone.

6 sections in the legacy structure record

Help the visitor choose

3 openings

Would one generic call to action hide a meaningful choice? A template, capability map, or product catalog becomes the first navigation object when the visitor needs to select the right path before committing.

R07First action

Pro

Template to custom path

Give the visitor a finished starting point, show the result it produces, then show exactly what changes when they make it theirs.

First screen

OrientStarting-point promise
NavigateTemplate gallery

Then Result preview

The opening asks for: Start from this template
Where the ask sits: An action on every template card; the from-scratch route sits beside the gallery, not above it.

6 sections in the legacy structure record

R15Map breadth

Pro

Capability constellation

Lead with one umbrella job, arrange the capabilities around it, and give every visitor a route in plus a shared layer to return to.

First screen

OrientUmbrella job
NavigateCapability map

Then Persona routes

The opening asks for: Start with the capability you came for
Where the ask sits: One primary action in the first screen and again after the common layer; per-capability links stay secondary.

5 sections in the legacy structure record

R25Map breadth

Catalog-led commerce

Open with a desired outcome or offer, expose the catalogue as a navigable structure, then make comparison and bundling easy.

First screen

OrientOffer or outcome
NavigateCatalogue rails

Then Category filters

The opening asks for: Add or buy the item in view
Where the ask sits: An action on every card, plus a persistent cart or basket affordance in the header.

6 sections in the legacy structure record

Looking for the full communication idea?

The main catalog groups all 32 recipes by the communication job they perform and lets you search ideas, audiences, examples, and legacy structure notes.

Get them doing the thing Show the product working Answer the objection Map a broad offering