Strategic Options Canvas

A standalone prompt for generating a side-by-side comparison of strategic options as a single-file HTML artefact. Unlike the Decision Memo (which makes the case for a recommendation in prose), the Options Canvas presents options in parallel and lets the reader form their own view.

Two or four options arranged as columns, each evaluated against the same set of criteria as rows. Click a column to expand it into a detailed view; click a row to compare options on just that criterion. A scoring strip at the bottom of each column gives a quick visual summary.

Useful for stakeholder workshops, pre-decision alignment, and any situation where the right answer isn’t obvious and the value lies in making the trade-offs visible.

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

View sample →

The canvas structure

The canvas is a matrix:

Columns are the options being compared (typically 2–4)
Rows are the evaluation criteria (typically 4–8)
Cells hold the assessment of one option against one criterion

Plus three structural elements:

Context strip at the top — the question being answered, the constraints, the decision deadline
Score strip at the bottom of each option — a visual summary (traffic-light, score out of 10, or weighted total)
Recommendation drawer on the right — slides out to show your view, kept separate from the canvas itself

The discipline is that every option is judged against the same criteria. If a criterion only matters for one option, it’s the wrong criterion.

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 legibility and scan-ability — clear column gutters, distinct cell borders, restrained colour used only for the score strip and active state.

Prompt A — Shell bootstrap

You are generating a single-file HTML strategic options canvas. Read
this entire prompt before starting.

OUTPUT:
- One file: canvas.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
- Print stylesheet: canvas fits on a single landscape A4 page

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, clear cell borders,
   accent colour reserved for score strip and active state

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

SHELL REQUIREMENTS:

1. Page layout
   - Full-viewport canvas, no page scroll
   - Three rows: context strip (top), canvas grid (middle, takes
     remaining height), score strip (bottom of each column)
   - Recommendation drawer slides out from the right edge

2. Context strip
   - Top of the page, full width, fixed height
   - Shows: the strategic question, key constraints, decision
     deadline, decision-maker(s)
   - Monospace metadata, prose for the question

3. Canvas grid
   - 2-4 option columns, equal width
   - 4-8 criterion rows, height adapts to content
   - First column is sticky-left and contains the criterion labels
   - Header row pinned to the top during vertical scroll
   - Each cell shows: a short assessment (1-2 sentences) and a
     score indicator (e.g. ●●●○○ or a coloured dot)

4. Interactions
   - Click a column header → expand that option into a full-width
     detail view (overlay), with longer-form description and
     supporting notes per criterion
   - Click a row label → highlight that row across all columns
     (dim the others) for criterion-level comparison
   - Escape closes any expanded view

5. Score strip
   - Bottom of each column, fixed height
   - Shows: weighted total (if criteria are weighted) and a
     visual bar chart of scores per criterion within the column
   - Optional "headline" word per option (e.g. "Fastest", "Safest",
     "Cheapest") set in the rough content dump

6. Recommendation drawer
   - Slides from the right edge
   - Triggered by a button in the top-right corner ("Our view")
   - Contains: which option is recommended, why, what would change
     the recommendation
   - Visually separate from the canvas — this is the consultant's
     opinion, not the analysis

7. Keyboard
   - Numbers 1-4 expand options 1-4
   - Escape closes any overlay or drawer
   - 'R' toggles recommendation drawer
   - Arrow keys navigate between cells when no overlay is open

8. Score system
   - Configurable in the rough content dump: out-of-5 dots, out-of-10 number,
     or traffic-light (red/amber/green)
   - Default: out-of-5 dots
   - Criteria can carry weights (1.0 default); weighted totals
     shown in the score strip

CRITERION TYPES:

- evaluative (default): score + assessment text
- descriptive: text only, no score (used for criteria like
  "Implementation timeline" where you describe rather than score)
- numeric: a raw number with units (e.g. cost: "£120k", time: "6 weeks")

PLACEHOLDER CONTENT:

Generate a placeholder canvas with realistic structure:

  Context: "Which architecture approach should we adopt for the
           Q2 platform rebuild?"
  Constraints: "Budget £500k, deliver by end of Q3, team of 6"
  Deadline: "Decision by [date]"
  Decision-maker: "Steering committee"

  Three options:
    Option A: "Lift-and-shift to managed services"
    Option B: "Selective rewrite, retain core"
    Option C: "Full rebuild on modern stack"

  Six criteria:
    1. Time to deliver         (evaluative, dots)
    2. Total cost              (numeric, £)
    3. Risk to existing users  (evaluative, traffic-light)
    4. Team capability fit     (evaluative, dots)
    5. Long-term flexibility   (evaluative, dots)
    6. Implementation timeline (descriptive)

  Each cell has lorem-style assessment text and a plausible score.

  Score strip: weighted totals (use weights 2,1,2,1,1,0 — last
  criterion is descriptive so weight 0).

  Recommendation drawer: prose recommending Option B with a
  one-line "what would change our mind" note.

CODE QUALITY:

- Semantic HTML (table for the grid, with proper thead/tbody/th)
- CSS custom properties for palette and scoring colours
- Vanilla JS for expand/collapse, row highlight, drawer
- Comment major sections

WHEN DONE:

Save as canvas.html. Confirm file size (under 50KB). Tell me the
option count, criterion count, and score system used.

Prompt B — Rough content dump

Replace the placeholder content in canvas.html with the real options
and criteria from the rough content dump below. Do not change the shell —
canvas grid mechanics, drawer, keyboard, visual style stay as is.

RULES:

- The rough content dump has three top-level sections: CONTEXT, OPTIONS,
  CRITERIA, plus an optional RECOMMENDATION.
- CONTEXT provides: question, constraints, deadline, decision-maker(s).
- OPTIONS lists 2-4 options, each with a name and an optional headline
  word (e.g. "Fastest").
- CRITERIA lists 4-8 criteria. For each, specify: name, type
  (evaluative / descriptive / numeric), weight (default 1), and
  scoring system if evaluative (dots / traffic-light).
- After CRITERIA, the rough content dump has a CELL block for each option that
  fills in the assessment per criterion. Cells reference the criterion
  by name.
- If a cell is missing for an option × criterion combination, render
  it as "—" in the canvas with a note flagging the gap.
- RECOMMENDATION (optional) goes into the recommendation drawer.
- Update the context strip, column headers, row labels, score strip,
  and drawer.
- Don't invent options, criteria, or scores I didn't provide. If I
  leave a score blank, leave it blank in the canvas.

ROUGH CONTENT DUMP:

[paste below this line.]

---

# CONTEXT

QUESTION: [the strategic question]
CONSTRAINTS: [comma-separated]
DEADLINE: [date]
DECIDER: [name or group]

# OPTIONS

## Option A — [name]
HEADLINE: [optional headline word]

## Option B — [name]
HEADLINE: [optional]

## Option C — [name]

# CRITERIA

## [criterion 1 name]
TYPE: evaluative
SCORING: dots
WEIGHT: 2

## [criterion 2 name]
TYPE: numeric
UNIT: £

## [criterion 3 name]
TYPE: evaluative
SCORING: traffic-light
WEIGHT: 1

[...continue...]

# CELLS

## Option A
- [criterion 1 name]: 4 — [assessment text]
- [criterion 2 name]: £350k
- [criterion 3 name]: amber — [assessment text]
[...continue for each criterion...]

## Option B
- [criterion 1 name]: 3 — [assessment text]
[...continue...]

## Option C
[...]

# RECOMMENDATION

RECOMMEND: [option name]
WHY: [prose]
WOULD CHANGE OUR MIND: [prose]

---

WHEN DONE:

Save the updated canvas.html. Tell me the final option count,
criterion count, weighted totals per option, and flag any cells
that came out blank.

design.md — optional style brief

Same shape as other templates. For canvases, consider adding a Scoring colour scale field if you want non-default colours for traffic-light or dot scoring (e.g. accessible greens/ambers/reds for colour-blind audiences).

Recurring patterns

Add a criterion mid-workshop. Tell Claude Code: “add a new criterion called ‘regulatory risk’, type evaluative, weight 1, between criteria 3 and 4.” It’ll insert the row, leave the cells blank, and update the score strip.

Re-weight to test sensitivity. Ask Claude Code to swap the weights and recompute totals. If the recommendation flips, the analysis is sensitive to weighting — worth flagging in the recommendation drawer.

Promote a column to its own deck. If one option emerges as the front-runner, ask Claude Code to extract that column into a Pitch Deck Walkthrough using the existing template.

Hide the recommendation. For workshops where you want stakeholders to form their own view first, ask Claude Code to remove the recommendation drawer entirely. Add it back in a v2 once the room has discussed.