Skip to content
Claude Code Build Playbook

Mobile Journey Template

A standalone prompt for generating clickable walkthroughs of mobile user journeys as single-file HTML artefacts. Same constraints as the Presentation Template — one file, no dependencies, emailable as an attachment — but the centred content is a phone frame showing one screen per step instead of slides.

Default use case is an agentic commerce chat flow: a user chats with an agent, agent surfaces products, user confirms, payment goes through. The component vocabulary is built around that, but works for any conversational mobile flow.

You’ll use two prompts: Prompt A scaffolds the shell with placeholder steps demonstrating each component, Prompt B populates a real journey from a rough content dump.

View sample →

How the journey is structured

Section titled “How the journey is structured”

One phone frame, fixed in the centre of the viewport. The screen content inside the frame changes per step. The side drawer lists every journey step by name; left/right arrows or drawer clicks advance the screen.

Each step is one logical unit of the journey. Default granularity is one step per message exchange — user sends a message, agent responds, that’s one step. For tighter demos where you want to show typing indicators, cards arriving one at a time, or progressive reveals, tag a step as [animated] and the step plays as a sequence of micro-frames before the next key press advances.

Visual style

Section titled “Visual style”

Same priority order as the Presentation Template: a design.md file in the same folder takes precedence, otherwise use any reference URL provided in the prompt, and if neither is available, fall back to the default — Playbook palette, system fonts, and monospace accents on chrome (status bar, drawer labels, and step counter).

The phone frame itself stays neutral by default (rounded corners, thin bezel, status bar with time and battery). The brand styling lives inside the screen.

Prompt A — Shell bootstrap

Section titled “Prompt A — Shell bootstrap”

Run this first. Creates the HTML file with the phone frame, navigation shell, keyboard handling, and placeholder steps demonstrating each component.

You are generating a single-file HTML walkthrough of a mobile user journey.
Read this entire prompt before starting.


OUTPUT:
- One file: journey.html
- Inline CSS in a <style> block, inline JS in a <script> block
- No external dependencies — no CDN links, no fonts loaded over the network,
  no images unless explicitly provided as data URIs
- Must work when opened directly from the file system (file:// protocol)
- Must work when emailed as an attachment


VISUAL STYLE — resolve in this order:
1. If design.md exists in this folder, read it and follow its palette,
   typography, and tone instructions exactly.
2. Else if a reference URL is provided below, fetch it and extract palette,
   typography, and overall feel.
3. Else default to: system font stack, monospace for chrome, neutral
   palette (off-white background, near-black text, single accent colour).


REFERENCE URL (optional, leave blank to skip):
[paste URL here, or leave empty]


SHELL REQUIREMENTS:


1. Phone frame
   - Fixed in the centre of the viewport, vertically and horizontally
   - Realistic proportions: ~390px wide × ~844px tall (iPhone-ish)
   - Rounded corners (~48px radius), thin dark bezel
   - Status bar at top: time on the left, battery + signal on the right
   - Home indicator bar at the bottom
   - Screen area inside the frame is where step content renders
   - Screen content scrolls vertically WITHIN the screen if it overflows
     (the page itself never scrolls)
   - Frame stays fixed; only the screen content changes per step


2. Side drawer navigation
   - Fixed to the left edge, slides in from off-screen
   - Hamburger button top-left toggles it open/closed
   - Lists every journey step by name with the step number
   - Clicking a step jumps the phone to that step and closes the drawer
   - Closes when you click outside it
   - Active step is visually marked


3. Keyboard navigation
   - Left arrow / Page Up: previous step
   - Right arrow / Page Down / Space: next step
   - Home: first step
   - End: last step
   - Escape: close the drawer if open
   - 'M' key: toggle drawer


4. Step indicator
   - Bottom-right corner of the page (outside the phone): "3 / 12" counter
   - Subtle, monospace, low-contrast


5. Progress bar
   - Thin bar across the top edge of the page showing journey progress


6. Animated steps
   - Steps tagged data-animated="true" play a micro-sequence on entry:
     elements appear one at a time with ~300ms staggered delay
   - The next key press advances to the next step (does not replay)
   - Pressing left and returning to the step replays the animation


SCREEN COMPONENTS — implement these as elements that render inside the
phone screen area:


- .user-message       Text bubble, right-aligned, accent colour background,
                      white text. Typically short.


- .agent-message      Text bubble, left-aligned, neutral background.
                      Optional small agent avatar to the left.


- .agent-typing       Three-dot animated typing indicator, left-aligned,
                      same chrome as agent-message.


- .product-card       Vertical card with: square product image (or
                      placeholder), title, short description, price,
                      and an "Add to cart" affordance.


- .product-carousel   Horizontal-scroll row of product-cards. Snap to
                      card edges. ~2 cards visible at a time.


- .confirmation-card  Order summary card. Title, line items (each with
                      qty, name, price), divider, total. Neutral chrome.


- .payment-prompt     Modal-style overlay (semi-transparent backdrop,
                      sheet from bottom of screen). Title like "Confirm
                      with Face ID", an icon, and Confirm/Cancel buttons.


- .success-state      Centred checkmark icon (CSS-drawn, no image),
                      success headline, supporting line. Used for
                      "Order confirmed" or similar terminal states.


- .quick-replies      Row of chip-style buttons below an agent-message.
                      Tappable looking but inert in the demo.


- .chat-header        App header bar at the top of the screen for chat
                      flows. Agent name, "online" status, back chevron.


- .chat-input         Message input bar pinned to the bottom of the
                      screen. Placeholder text + send button. Inert.


Components stack vertically inside the screen in the order they appear
in the step's HTML. The screen scrolls if the content is taller than
the screen area.


PLACEHOLDER CONTENT:


Generate a 6-step placeholder journey demonstrating an agentic commerce
flow. Use these steps:


  1. "Open chat"             — chat-header, agent-message greeting,
                               quick-replies
  2. "Ask for recommendation"— previous content + user-message asking
                               for help
  3. "Agent suggests options"— agent-typing → agent-message →
                               product-carousel  [animated]
  4. "User picks one"        — user-message confirming choice
  5. "Confirm order"         — confirmation-card, payment-prompt
  6. "Order confirmed"       — success-state


Step 3 should be tagged data-animated="true" to demonstrate the
micro-sequence behaviour.


The first step also needs the chat-header and chat-input visible —
keep those persistent across all chat-flow steps so the screen feels
like one continuous app, not separate slides.


CODE QUALITY:


- Semantic HTML where possible
- CSS custom properties for the palette so it's swappable from one place
- Vanilla JS, no frameworks, no build step
- Comment the major sections (phone frame, drawer, keyboard, step state,
  animation engine)


WHEN DONE:


Save as journey.html. Confirm the file size (should be under 80KB
without product images). Tell me how many steps were generated and
which components are demonstrated.

Prompt B — Rough content dump

Section titled “Prompt B — Rough content dump”

Run this after Prompt A produces the shell. Paste your raw journey notes; Claude Code maps them to steps.

Replace the placeholder journey in journey.html with the real journey
from the rough content dump below. Do not change the shell — keep the phone
frame, navigation, keyboard handling, drawer behaviour, and visual
style exactly as is.


RULES:


- Each ## heading in the rough content dump becomes one step.
- The text after each heading describes what's on the phone screen at
  that step.
- Persistent components (chat-header, chat-input) should appear on every
  chat-flow step unless I explicitly say otherwise.
- Steps are CUMULATIVE within a chat flow — once a message is on screen,
  it stays on screen for subsequent steps until the conversation moves
  past it (i.e. scrolls naturally, not disappears). Treat each step as
  "the screen state at this moment in the conversation".
- If a step is tagged [animated] after the heading, set
  data-animated="true" on that step and split the step's components into
  a sequence that reveals one at a time.
- If I don't tag a step, default to a static step (no animation).
- Map my casual phrasing to components:
    "user says X" → user-message with text X
    "agent says X" → agent-message with text X
    "agent shows products" → product-carousel
    "agent thinks" / "..." → agent-typing
    "order summary" → confirmation-card
    "Face ID prompt" / "confirm payment" → payment-prompt
    "done" / "confirmed" / "✓" → success-state
    "[chip] [chip] [chip]" → quick-replies with those labels
- Update the drawer step list to reflect the new step names.
- Update the step count.
- Don't add steps I didn't write. Don't merge steps I separated.
- For product details I leave vague, invent plausible filler — short
  product names, prices in the same currency throughout, generic
  category-appropriate descriptions.


ROUGH CONTENT DUMP:


[paste raw journey notes below this line — anything goes. Use ## for
step breaks. Tag with [animated] for micro-sequences.]


---


## [first step name]


[what's on screen]


## [second step name] [animated]


[what's on screen, in the order things should appear]


[...continue...]


---


WHEN DONE:


Save the updated journey.html. Tell me the new step count, flag any
steps where you guessed at intent, and list any product names or
prices you invented.

design.md — optional style brief

Section titled “design.md — optional style brief”

Same shape as the Presentation Template’s design.md. Drop it in the same folder as the prompt before running Prompt A.

# Design brief — [client / journey name]


## Palette
- Background: #hex
- Text: #hex
- Accent: #hex
- Muted: #hex


## Typography
- Headings: [font name or stack]
- Body: [font name or stack]
- Monospace: [font name or stack]


Use system fonts only — no network requests.


## Tone
[Three or four words.]


## App chrome
[Optional: notes on the chat header, agent name, agent avatar style,
chat input placeholder copy.]


## Don'ts
[Optional.]

Recurring patterns

Section titled “Recurring patterns”

Tweak one step. Open journey.html directly in Claude Code, point at the step by name or number, ask for the change. The shell stays untouched.

Reskin for a new client. Update design.md, ask Claude Code to swap only the CSS custom properties block. Steps and content stay as they are.

Add a step mid-journey. Tell Claude Code where to insert and what the step contains; it’ll renumber the drawer and the counter automatically.

Export to video. Open the HTML in Chrome, screen-record while pressing right arrow at a steady pace. The animated steps play their micro-sequences in time with your input.