Persona Walkthrough

A standalone prompt for generating persona walkthroughs as single-file HTML artefacts. Borrows the phone-frame mechanics from the Mobile Journey Template, but instead of stepping through a single user flow, it cycles through moments in a persona’s day.

The drawer lists timestamped moments — “07:15 — Morning commute”, “12:30 — Lunch break decision”, “18:45 — Evening wind-down”. Each moment shows the persona’s context (where they are, what they’re doing, what they’re thinking) alongside any digital interaction relevant to your product.

Useful when bringing a persona to life for stakeholders who can’t quite picture them. Stronger than a static persona one-pager because the moments build a narrative; lighter than a research readout because it’s optimised for skim-reading.

You’ll use two prompts: Prompt A scaffolds the shell with a placeholder day, Prompt B populates a real persona from a rough content dump.

View sample →

How a persona day is structured

The walkthrough has three layers:

Persona header — a fixed strip at the top with the persona’s name, role, demographic essentials, and a short bio. Always visible.
Moment timeline — a horizontal timeline strip showing every moment of the day; the active moment is highlighted. Tappable.
Moment view — the main body. For each moment: a contextual scene description on the left (where, what, thinking), and an optional phone frame on the right showing relevant app interaction.

A moment without phone interaction is fine — life happens off-screen. The walkthrough doesn’t pretend every moment involves your product.

Visual style

As with the other templates, this follows a priority order: 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 style. That default favours warmth over clinicalness — personas are about empathy, and a sterile palette undercuts that. The default uses a slightly warmer neutral background, generous whitespace, and a hand-drawn-feeling accent.

Prompt A — Shell bootstrap

You are generating a single-file HTML persona walkthrough. Read this
entire prompt before starting.

OUTPUT:
- One file: persona.html
- Inline CSS in a <style> block, inline JS in a <script> block
- No external dependencies
- Must work from file:// and as an email attachment

VISUAL STYLE — resolve in this order:
1. design.md in this folder, if present
2. Reference URL below, if provided
3. Default: system fonts, warm neutral palette (off-white that's
   slightly warm, near-black text, single accent that suggests
   warmth — not corporate blue)

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

SHELL REQUIREMENTS:

1. Persona header
   - Fixed at the top, full width, ~140px tall
   - Left side: persona avatar (placeholder circle if no image
     provided) + name (large) + role/title (smaller) + demographic
     line (age, location, household)
   - Right side: a 2-3 sentence bio in a slightly oversized,
     italic-leaning style
   - Subtle border at the bottom separating from the main area

2. Moment timeline
   - Horizontal strip below the header, full width, ~80px tall
   - Shows every moment as a tick on a 24-hour timeline
   - Each tick has the timestamp above and a short label below
     (truncated to ~20 chars with ellipsis)
   - Active moment is enlarged and highlighted
   - Inactive moments are dimmed
   - Click any moment to jump
   - Visually shows roughly where in the day each moment sits
     (not perfectly to scale — readability wins over precision)

3. Moment view (main body)
   - Two-column layout, equal width on wide viewports
   - Left column: scene context
       - Section: WHERE — location, environment
       - Section: WHAT — what they're doing, who they're with
       - Section: THINKING — internal monologue, in italics
       - Section: FEELING — one or two emotion words, large,
         set apart
   - Right column: phone frame (optional per moment)
       - Same phone frame as the Mobile Journey Template
       - Used when the moment involves interaction with a digital
         product
       - Components reused from that template: chat-header,
         user-message, agent-message, product-card, etc.
       - When no phone interaction in this moment, the column shows
         a simple illustration placeholder ("Off-screen") and the
         scene context column expands to full width

4. Side drawer
   - Fixed left edge, slides in from off-screen
   - Hamburger button toggles
   - Lists every moment with timestamp + full label
   - Active moment highlighted
   - Clicking a moment jumps to it and closes drawer

5. Keyboard
   - Left / Right: previous / next moment
   - Home / End: first / last moment
   - 'M' toggles drawer
   - Escape closes drawer

6. Moment indicator
   - Bottom-right of the page: "Moment 4 of 9"

7. Progress bar
   - Top edge of the page, shows progress through the day

PHONE FRAME COMPONENTS:

Reuse the component vocabulary from the Mobile Journey Template:
chat-header, chat-input, user-message, agent-message, agent-typing,
product-card, product-carousel, confirmation-card, payment-prompt,
success-state, quick-replies. Plus:

- .app-screen-generic   A non-chat app screen — header bar, list
                        items, generic UI. Used when the persona is
                        in an app that isn't a chat interface
                        (e.g. browsing email, scrolling a feed).

PLACEHOLDER CONTENT:

Generate a placeholder persona day with 7 moments demonstrating the
range of moment types:

  Persona: "Maya Chen", "Senior Product Manager",
           "34, London, lives with partner and one child"
           Bio: 2-3 sentences about her role, pressures, motivations

  Moments:
    07:15  Morning commute      [no phone]
    08:30  Coffee + email triage [phone: app-screen-generic]
    11:00  Stand-up running long [no phone]
    12:45  Lunch decision        [phone: chat with agent for food]
    15:20  Mid-afternoon slump   [phone: scrolling, app-screen-generic]
    18:00  School pickup         [no phone]
    21:30  Wind-down             [phone: agent recommendation flow]

For each moment, write realistic scene context (WHERE, WHAT, THINKING,
FEELING) using lorem-style filler that's the right shape — concrete
sensory detail in WHERE, action in WHAT, doubt or pressure in
THINKING, single-word emotions in FEELING.

CODE QUALITY:

- Semantic HTML
- CSS custom properties for palette and spacing
- Vanilla JS, comment major sections (header, timeline, moment state,
  drawer, keyboard, phone frame)
- Reuse the phone frame CSS architecture from the Mobile Journey
  Template if generating both

WHEN DONE:

Save as persona.html. Confirm file size (under 80KB). Tell me the
moment count and how many moments include phone interaction.

Prompt B — Rough content dump

Replace the placeholder content in persona.html with the real persona
day from the rough content dump below. Do not change the shell — header,
timeline, moment layout, drawer, keyboard, visual style stay as is.

RULES:

- Rough content dump starts with a PERSONA block (name, role, demographics,
  bio) that populates the header.
- Each ## heading marks one moment. The heading format is
  "## HH:MM — Short label".
- Within each moment, four sub-sections are expected:
  WHERE / WHAT / THINKING / FEELING.
- If a moment has digital interaction, include a PHONE block listing
  components (same vocabulary as Mobile Journey Template).
- Phone interactions follow the same persistence rule as the Mobile
  Journey Template — within a chat flow, prior messages persist
  unless the moment indicates the persona has moved on.
- If no PHONE block, render the moment with the phone column
  collapsed and the scene context full-width.
- Update the timeline, drawer, and counter to reflect the real
  moments.
- Don't invent moments, scene details, or phone interactions I
  didn't write. If I leave THINKING blank, leave it blank.
- Tighten typos and casual phrasing. Keep my voice, particularly
  in the THINKING blocks — the persona's voice matters here.

ROUGH CONTENT DUMP:

[paste below this line.]

---

# PERSONA

NAME: [persona name]
ROLE: [job title]
DEMOGRAPHICS: [age, location, household]
BIO: [2-3 sentences]

# DAY

## 07:15 — [moment label]

WHERE: [setting]
WHAT: [action]
THINKING: [internal voice, in their words]
FEELING: [one or two words]

## 08:30 — [moment label]

WHERE: [setting]
WHAT: [action]
THINKING: [internal voice]
FEELING: [emotion]

PHONE:
- chat-header (App Name)
- agent-message: "Morning Maya — three things on your radar today"
- quick-replies: [Show me], [Later]

## 11:00 — [moment label]

WHERE: ...
[no PHONE block — moment is off-screen]

[...continue through the day...]

---

WHEN DONE:

Save the updated persona.html. Tell me the moment count, how many
include phone interaction, and flag any moments where THINKING came
out generic — those are usually the moments that need more research.

design.md — optional style brief

Same shape as other templates. For personas, the Tone field is doing real work — “intimate, observational” produces a different walkthrough than “clinical, behavioural”. Worth being deliberate.

Recurring patterns

Cut to the moments that matter. First drafts often have 12+ moments. Ask Claude Code to identify the 5-6 moments most relevant to a specific product question, hide the rest, and produce a focused version.

Compare two personas. Generate two persona walkthroughs, then ask Claude Code to produce a “moments where they differ” summary slide using the Presentation Template.

Validate against research. Annotate moments with research provenance — link each scene detail or quote to its source. Useful when the persona will be challenged.

Animate a moment. For high-stakes moments where you want stakeholders to feel the texture, tag the phone interaction as [animated] (same mechanic as Mobile Journey Template) so cards arrive one at a time.