Flexible Artefact

A general-purpose template that generates a single-file HTML artefact from a loose brain-dump. Same shell mechanics as the specific templates (drawer, keyboard navigation, single-file output, design.md precedence), but the content shape is determined at generation time — Claude Code picks a layout per section based on what the content looks like.

This is the gateway template. Use it when:

You don’t know which specific template fits, or none of them quite do
The content mixes shapes the specific templates don’t combine (e.g. a strategy document that has interactive option cards inside it)
You want to brain-dump first and decide on structure later
You want layouts designed bespoke to your content (using the optional layout-designer skill)

Once you’ve used the flexible template a few times for a particular shape, the right move is usually to graduate to one of the specific templates. The flexible template is the entry point, not the destination.

How it differs from the specific templates

The specific templates (Pitch Deck, Decision Memo, etc.) have a defined structure baked into the prompt — Claude Code knows it’s making a pitch deck, so it knows what slides should exist. The flexible template doesn’t know what it’s making. It reads your brain-dump, proposes a layout map, and waits for you to approve before generating the artefact.

That extra approval gate — between brain-dump and HTML — is the heart of exploration mode. You see how Claude Code is interpreting your content before it commits to a structure.

The layout vocabulary

Seven default layouts. Claude Code picks one per slide based on content shape:

Layout	Best for
title	Section dividers, deck opens, single statements
prose	A short written section. Heading + paragraphs. Vertical scroll within the slide if it’s long.
bullets	A list of parallel items. Up to ~7. Optional progressive reveal.
stat	One headline number with a label.
two-column	Comparison, before/after, parallel ideas. Stacks on narrow viewports.
option-cards	Interactive. Clickable cards that expand to reveal detail. Use for choices, options, or any “pick one of these” content.
canvas	Full-bleed area for an image, diagram, or composed visual. Optional caption.

This vocabulary is intentionally tight — too many layouts and Claude Code’s choices get noisy.

Optional: bespoke layouts via the `layout-designer` skill

For artefacts where the content has shapes the existing 7 layouts can’t capture, you can run the layout-designer skill before invoking this template. The skill designs new layouts tailored to your specific brain-dump, and the prompts below know how to consume the resulting specs.

The flow is:

Run layout-designer on your brain-dump. Output: a layout map with some slides marked BESPOKE: and a spec block per bespoke layout.
Pass the layout map + specs into Prompt A. The shell is scaffolded with both default and bespoke layouts.
Run Prompt B as normal. The brain-dump is rendered using the layouts from the map.

If you don’t run layout-designer, the prompts below operate using only the seven default layouts. The skill is opt-in.

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.

The `content-to-layout` skill (for default-vocabulary mode)

A separate skill (content-to-layout) contains the layout-decision logic for picking from the seven default layouts. The skill is optional — Prompt B’s embedded logic does the same job — but if you use this template across many projects, the skill makes the decision logic easier to iterate on.

If the skill is present, Claude Code references it. If not, Prompt B’s embedded logic kicks in. Either way, the output is the same.

Prompt A — Shell bootstrap

Run this first. Creates the HTML file with the navigation shell, keyboard handling, and a small set of placeholder slides demonstrating each layout.

If you’re using bespoke layouts from layout-designer, paste the layout map and spec blocks at the end of this prompt where indicated. Otherwise, leave that section blank.

You are generating a single-file HTML artefact with a flexible content
structure. Read this entire prompt before starting.

OUTPUT:
- One file: artefact.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, neutral palette, single accent colour

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

SHELL REQUIREMENTS:

1. Side drawer navigation
   - Hamburger top-left toggles open/closed
   - Lists every slide by title with the slide number
   - Clicking a slide jumps to it and closes the drawer
   - Closes when you click outside it
   - Active slide highlighted

2. Slide container
   - Slides are <section data-slide data-layout="..."> elements
   - One slide visible at a time
   - Slide content is centred horizontally in the viewport
   - Slide content is centred vertically when it fits
   - Slide content scrolls vertically WITHIN the slide if it overflows
     (the page itself never scrolls — overflow is per-slide)
   - Comfortable reading width: max ~720px for prose-heavy slides;
     wider for two-column, option-cards, and canvas

3. Keyboard navigation
   - Left arrow / Page Up: previous slide
   - Right arrow / Page Down / Space: next slide
   - Home / End: first / last slide
   - Escape: close drawer or close any expanded option-card
   - 'M': toggle drawer

4. Slide indicator
   - Bottom-right: "3 / 12" counter, monospace, low contrast

5. Progress bar
   - Thin bar across the top showing progress through the deck

DEFAULT LAYOUTS — implement these as values for data-layout:

- "title"        Big centred title + optional subtitle. For dividers
                 and single statements.

- "prose"        Heading + paragraphs at comfortable reading width.
                 Slide scrolls vertically if content overflows.

- "bullets"      Heading + bullet list (up to 7 items). When the slide
                 has data-progressive="true", bullets reveal one at a
                 time on key press; otherwise all visible at once.

- "stat"         One large number/figure + a label below.

- "two-column"   Heading + two equal columns. Each column is its own
                 prose block. Stacks vertically on narrow viewports
                 (<720px).

- "option-cards" Heading + a grid of clickable cards. Each card has a
                 short title and a one-line summary. Click a card to
                 expand it into a detail view that overlays the slide
                 (with longer description, optional bullet list of
                 details, optional CTA-style label). Click outside or
                 press Escape to close. The card itself remains in
                 the grid; the expanded view is an overlay. Track
                 which cards have been opened with a subtle visual
                 marker on the card.

- "canvas"       Full-bleed area for an image (data URI) or composed
                 visual (inline SVG). Optional caption below. If no
                 image is provided, render a placeholder box with
                 the alt text written inside.

BESPOKE LAYOUTS (optional):

If layout specs from the layout-designer skill are pasted at the end
of this prompt, build each bespoke layout into the shell alongside
the default layouts. Each bespoke layout becomes a new value for
data-layout (e.g. data-layout="decision-tree").

Apply these constraints to every bespoke layout:
- Single-file: inline CSS and JS only
- No external dependencies, no fonts loaded over the network
- Must work from file:// and as an email attachment
- Match the artefact's overall palette, type scale, and interaction
  patterns (keyboard-first, escape closes overlays, etc.)

If no bespoke specs are provided, skip this section entirely.

PLACEHOLDER CONTENT:

Generate placeholder slides demonstrating each layout that will be
used in the artefact:

- One slide per default layout that's likely to be used (start with
  all seven; the user can prune later).
- One slide per bespoke layout if specs are provided.

The first slide is always "title" with the title "Flexible Artefact"
and subtitle "Brain-dump first, structure later".

For "option-cards", show 3 cards. Each expands to a detail view with
2-3 bullet points and a closing summary line.

For "prose", make the placeholder long enough to demonstrate vertical
scroll within the slide.

For "bullets", set data-progressive="true" on the placeholder so the
behaviour is visible.

For bespoke layouts, render the placeholder using the spec's
"CONTENT FROM DUMP" section if provided, else lorem-style filler
appropriate to the spec's visual structure.

CODE QUALITY:

- Semantic HTML
- CSS custom properties for palette, spacing, type scale
- Vanilla JS, comment major sections (drawer, keyboard, slide state,
  option-cards expansion, progressive reveal, plus a section per
  bespoke layout's interaction logic)

WHEN DONE:

Save as artefact.html. Confirm file size (under 60KB; bespoke layouts
may push this slightly, flag if over 100KB).
Tell me the slide count, which default layouts are demonstrated, and
which bespoke layouts (if any) were built.

---

LAYOUT-DESIGNER SPECS (paste below this line if using; leave blank
if not):

[paste layout map + bespoke spec blocks from layout-designer here]

Prompt B — Brain-dump → layout map → artefact

Run this after Prompt A produces the shell. The flow is:

You paste the brain-dump.
Claude Code reads it and proposes a layout map (no HTML yet).
You approve, adjust, or rewrite the map.
Claude Code generates the HTML.

The approval gate between map and HTML is the heart of this template. Don’t skip it — that’s where you catch misinterpretations cheaply.

If you’re using bespoke layouts from layout-designer, the layout map is already produced — paste it (and the specs) at the top of this prompt and skip the proposal step.

Read the brain-dump below. DO NOT generate any HTML yet.

WORKFLOW:

If a layout map from layout-designer is pasted at the top of this
prompt:
  - Use that map as-is. Do NOT propose a new map.
  - Skip directly to step 3.

Otherwise:
  Step 1 — Read the brain-dump and propose a layout map.
  Step 2 — STOP. Wait for my approval of the map.
  Step 3 — When I say "Map approved, proceed", generate the HTML by
           replacing the placeholder slides in artefact.html with
           the real content using the approved map.
  Step 4 — If I say "Adjust X then re-propose", redo the map and
           stop again.

If a content-to-layout skill exists in this project's .claude/skills/
folder, read and apply it for the proposal step. Otherwise, use the
layout-decision logic embedded below.

LAYOUT-DECISION LOGIC (used when content-to-layout skill is not
present and no layout-designer map is provided):

Read the brain-dump as a whole document. Identify natural section
breaks — these become slides. Default break markers:
- Lines starting with ## become a new slide (explicit break)
- A blank line followed by a clear topic shift is also a break
- Don't be aggressive about breaking; under-breaking is recoverable
  through re-prompting, over-breaking creates filler slides

For each section, pick a layout from this set:

  title         Single short statement or section divider. The first
                section is almost always "title".

  prose         Two or more paragraphs of running text. Default for
                anything substantial that isn't list-shaped.

  bullets       3+ short parallel items. Items don't need to be the
                same length but should be the same shape (all
                actions, all features, all reasons, etc.).

  stat          One headline figure + label. Use only when the
                section's whole point is a single number.

  two-column    Explicit comparison ("X vs Y", "before / after",
                "current / proposed"). Don't force two-column on
                content that just happens to have two paragraphs.

  option-cards  3-6 parallel choices that the audience needs to
                consider individually. Triggered by language like
                "we could either... or...", "three options:", "we
                considered...". The cards are interactive — clickable
                to expand. Use sparingly; not every list is
                option-cards.

  canvas        A diagram, image, or composed visual is described
                or referenced. If the brain-dump says "[diagram]"
                or "[image: ...]" or describes a visual, use canvas.

When in doubt between two layouts, pick the simpler one. Prose is
almost always a safe default.

LAYOUT HINTS:

If a section's heading ends with a tag in square brackets, use that
layout regardless of content shape:
  ## Three options [option-cards]
  ## Q3 results [stat]
  ## Architecture [canvas]
  ## Why now (prose with vertical scroll OK) [prose]

LAYOUT MAP FORMAT (when proposing a new map):

Output the map as a numbered list, one line per slide:

  1. "Title of slide" → layout
  2. "Title of slide" → layout (note about why this layout)
  3. ...

Slides using bespoke layouts (if a layout-designer map was provided
at the top) appear as:

  3. "Title of slide" → BESPOKE: layout-name

After the map, list:
  - Total slide count
  - Layout distribution (e.g. "3 prose, 2 bullets, 1 option-cards")
  - Any sections where the layout was a close call between two
    options
  - Any layout hints in the brain-dump that overrode your default
    choice

Then STOP and wait for my response (only when proposing — skip if
using a layout-designer map).

WHEN GENERATING THE HTML:

Replace the placeholder slides in artefact.html with the real content
using the map (either the approved one or the layout-designer one).
Do not change the shell — drawer, keyboard, visual style stay as is.

Update the drawer to reflect the new slide titles. Update the slide
count and progress bar.

Don't add slides not in the map. Don't change layouts after the
map is set — if a layout doesn't work on the rendered slide, flag
it in the report and let me decide whether to re-map.

For option-cards specifically (and any bespoke layout with similar
expand-to-detail behaviour), extract the per-card detail from the
brain-dump if I provide it (sub-bullets under the option, indented
prose after the option name, etc.). If I don't provide detail per
card, use the option's name only and flag in the report that detail
is missing.

For bespoke layouts, use the spec's "CONTENT FROM DUMP" section
to populate the layout. If the brain-dump has additional content
relevant to the bespoke layout that isn't in the spec, include it
where it fits the spec's visual structure.

Keep my voice. Tighten typos and casual phrasing only.

LAYOUT-DESIGNER MAP AND SPECS (paste below this line if using;
leave blank if proposing a new map):

[paste layout map + bespoke spec blocks from layout-designer here]

BRAIN-DUMP:

[paste below this line. Loose format — anything goes. ## marks
explicit section breaks if you want them. [layout-hint] tags after
a heading override the default layout choice. Ignored if a
layout-designer map was provided.]

---

[brain-dump goes here]

---

WHEN DONE (after generation):

Save the updated artefact.html. Tell me:
- Final slide count and layout distribution (default vs. bespoke)
- Any sections where the layout produced an awkward result
- Any option-cards or bespoke expand-to-detail layouts rendered
  without per-card detail (and which ones)
- Any sections that looked like they wanted a layout from a specific
  template — flag these as candidates for migrating to that
  template later

Recurring patterns

Re-map after rendering. If the rendered artefact reveals a layout that doesn’t quite work, ask Claude Code to re-map only the affected slides without regenerating the others. The shell and other slides stay; only the changed slides re-render.

Run brain-dump-cleaner first. If your brain-dump is genuinely raw (typos, contradictions, duplicate ideas), run the brain-dump-cleaner skill before this template’s prompts. The cleaned dump produces better layout decisions.

Run layout-designer for bespoke layouts. If your content has shapes the seven default layouts can’t capture — decision trees, scrolling comparisons, novel interactions — run the layout-designer skill before Prompt A. Paste its output into both Prompt A and Prompt B.

Graduate to a specific template. If the artefact is mostly working as a pitch deck, decision memo, or any other specific shape, ask Claude Code to identify which specific template fits best and regenerate from that template using the same content. The flexible template is the entry point; the specific template is where the artefact lives long-term.

Promote a section to its own artefact. If one section deserves more depth — typically an option-cards slide where each option could be its own pitch deck — ask Claude Code to extract that section into a separate artefact using the appropriate specific template, and link to it from the original.

Reduce the noise. First drafts often have too many slides. Ask Claude Code to identify slides that could merge or move to an “appendix” section (using the option-cards layout for skim-readable supporting detail).