Single-file Artefacts

A set of standalone Claude Code prompts that generate single-file HTML artefacts. Each one is self-contained — inline CSS and JS, no external dependencies, no build step — so you can email the output as an attachment and the recipient can open it directly.

These templates are the lightest-weight option in Static Builds — one-shot generators that don’t require a project scaffold or deploy step. For hosted S3 projects, see the Presentation Bootstrap or App Bootstrap. For server-side projects, see the Workflow templates section.

Shared mechanics

Every artefact in this section follows the same conventions:

Single file output. A single .html file with inline <style> and <script> blocks, no CDN links, no fonts loaded over the network, and no external images unless provided as data URIs.
Two-prompt pattern. Prompt A scaffolds the shell with placeholder content; Prompt B replaces that placeholder content with your brain-dump, leaving the shell unchanged.
Visual style. Follows this priority order: a design.md file in the same folder as the generated file takes precedence, otherwise use any visual reference URL provided in the prompt, and if neither is available, fall back to the default Playbook style (system fonts, neutral palette, and monospace accents).
Keyboard navigation. Where the artefact has steps or slides, left/right arrows advance them; M toggles a side drawer; Escape closes any overlay.
Emailable. Every output works when opened directly from the file system (file:// protocol) and when downloaded from an email attachment.

Where to start

If you’re new to these templates, start with the Flexible Artefact. It’s a general-purpose generator that reads a brain-dump and proposes a layout for you. Once you’ve used it a few times for a particular shape (a pitch, a memo, a journey), graduate to the specific template that matches.

The specific templates have stronger opinions baked in — they know they’re a pitch deck, or a Gantt chart, or a persona walkthrough — and produce a better result for that specific shape than the flexible template can. The flexible one is the entry point; the specific ones are the destination.

The artefacts

One general-purpose template plus ten specific templates. The samples below are live examples generated from each — open one to see what the artefact looks like before deciding which to use.

Flexible Artefact

The gateway template. A loose brain-dump goes in, Claude Code proposes a layout map, you approve or adjust, and the HTML comes out. Seven layouts available — title, prose, bullets, stat, two-column, option-cards (interactive), canvas. Use this when none of the specific templates fit, or when you want to brain-dump first and decide on structure later.

View sample → · Read the template

Presentation

A clickable slide deck. Side drawer navigation, keyboard control, slides centred in the viewport with eight built-in layouts (title, bullets, two-column, quote, image, code, stat, blank).

Use for general-purpose presentations where you want something more considered than a PDF and more portable than a hosted deck.

View sample → · Read the template

Mobile Journey

A walkthrough of a mobile user journey. Phone frame fixed in the viewport, screen content swaps per step. Built-in component vocabulary for chat flows — user messages, agent messages, product cards, payment prompts, success states.

Default use case is an agentic commerce chat flow, but works for any conversational mobile experience.

View sample → · Read the template

Pitch Deck

A pitch deck with a narrative spine. Every slide is tagged by its role in the argument — Problem, Insight, Solution, Proof, Ask, Appendix — and the drawer groups slides by role so a reviewer can see the logic of the deck at a glance.

Use for investor decks, client pitches, and internal proposals where the structure of the argument matters as much as the content.

View sample → · Read the template

Decision Memo

A Bezos-style six-pager. Single scrolling document, sticky table of contents, collapsible appendices, inline footnotes. Asks for a decision and makes the case for it.

Use when “let me send you a deck” is the wrong shape — when the recipient needs to read, annotate, and decide rather than be presented to.

View sample → · Read the template

Strategic Options Canvas

A side-by-side comparison of strategic options. Options as columns, criteria as rows, scoring strip per option, recommendation drawer kept separate from the analysis.

Use for stakeholder workshops and pre-decision alignment when the value lies in making the trade-offs visible rather than recommending an answer.

View sample → · Read the template

Persona Walkthrough

A day-in-the-life walkthrough of a user persona. Persona header with bio, horizontal timeline of moments through the day, scene context per moment with optional phone interaction reusing the Mobile Journey component vocabulary.

Use when bringing a persona to life for stakeholders who can’t quite picture them.

View sample → · Read the template

Project Timeline

A horizontal-scrolling project timeline with full detail. Phases as bands, tracks as lanes, milestones as markers with rationale, dependencies, risks, and owners. Today line drawn at the current date. Detail drawer per milestone.

Replaces the Gantt screenshot with something closer to a working project tool — same data, but the narrative of why the timeline looks this way is built into the artefact.

View sample → · Read the template

Milestone Timeline

A single-screen project overview. Months across the top, activity bars below, milestone markers above, “NOW” indicator at today. No drawer, no detail panels — just a glanceable timeline designed to be screenshot-able and slide-droppable.

Use for steerco overviews and any situation where you want the project at a glance without the cognitive overhead of a full project tool.

View sample → · Read the template

Phased Gantt

A delivery-grain Gantt chart. Activities listed down the left grouped by phase, weeks or sprints across the top, percent-complete fills on each bar. Optional resource names alongside.

Use for delivery plans where the audience cares about week-to-week progress within phases — typically the project manager’s working view.

View sample → · Read the template

Branded Deck

A PDF-first branded slide deck. Fixed slide dimensions (16:9), persistent brand chrome on every slide, interactive shell in the browser and a clean PDF when exported. Eight slide types — cover, disclaimer, content-bullets, content-prose, section dividers (light and dark), title-only-dark, closing. Brand configured entirely via design.md.

Use for client deliverables, board decks, and any deck where the PDF export is the canonical artefact and the deck needs to be visibly part of a brand system.

View sample → · Read the template

Choosing between them

Most decisions are obvious from the description, but a few are worth flagging:

Flexible vs specific. Use the flexible template when you don’t know what shape the artefact wants, or when the content mixes shapes the specific templates don’t combine. Use a specific template when you know what you’re making — the specific ones produce better results for their specific shapes.

Presentation vs Branded Deck. Both are slide decks. Use Presentation when the deck will be viewed in a browser, projected live, or distributed as HTML — it’s web-native, responsive, and content-first. Use Branded Deck when the PDF is the canonical output — it’s print-first, with fixed dimensions and persistent brand chrome on every slide.

Pitch Deck vs Decision Memo. Both make an argument. Use the pitch deck when you’ll present live or when the audience expects a deck. Use the decision memo when the audience will read it asynchronously and you need them to engage with the reasoning, not just the conclusion.

Strategic Options Canvas vs Decision Memo. Both deal with options. Use the canvas when you want stakeholders to form their own view from the trade-offs. Use the memo when you’ve formed a view and need to make the case for it.

The three timeline templates. Three options, three audiences:

	Use when…
Milestone Timeline	Executive overview. 6–18 month horizon, ~5–10 activities, ~3–5 milestones.
Phased Gantt	Delivery view. 8–20 weeks, ~10–20 activities grouped by phase, percent complete matters.
Project Timeline	Working project tool. Need rationale, dependencies, and risks captured per milestone.

Start with the Milestone Timeline for a pitch or kickoff, move to the Phased Gantt once delivery is underway, escalate to the Project Timeline when conversations about the timeline need the why documented.

Cross-template patterns

These artefacts are designed as a connected system, not isolated tools. Some examples:

A column in a Strategic Options Canvas can be promoted into its own Pitch Deck once it emerges as the front-runner.
A milestone slip in a Project Timeline can be extracted into a Decision Memo asking what to do about it.
A Persona Walkthrough’s phone interactions reuse the Mobile Journey component vocabulary, so a flow developed in one is portable to the other.
A Milestone Timeline can be promoted to a Project Timeline when the conversation starts asking why the dates are what they are. The same data carries over; you add rationale, dependencies, and risks per milestone.
A single phase from a Phased Gantt can be promoted to a Project Timeline when one phase becomes complex enough to need its own detail.
A Flexible Artefact that ends up looking mostly like a pitch deck (or a memo, or a journey) can be regenerated using the matching specific template — same content, better-fitted shape.
A Pitch Deck drafted as a working narrative can be regenerated as a Branded Deck for a client-facing PDF version — same content, branded chrome.

The recurring patterns at the bottom of each template document the moves that come up most often.