Prompt library

Every prompt in the book, on one page, ready to copy. Replace the bracketed parts with your own.

Each is labelled with the step it belongs to and where to run it. For why a prompt is written the way it is, follow the link back to its chapter.

The deck workshop, end to end

From the deck workshop, used in order.

#	Use it when	Where
P0	You need to settle the story and the decision logic	Any AI chat
P1	You need one image comparing visual directions	Image Mode
P1B	You want help choosing a direction	OpenDesign chat, or any AI chat
P2	You need a slide-by-slide content plan	Any AI chat
P3	You're ready for the first editable deck	Deck Mode
P4	The first version needs to close on the reference	OpenDesign chat
P5	You need real logos and product assets	OpenDesign chat
P6	You want images only where they earn a slide	OpenDesign chat
P7	Data-heavy slides need charts	OpenDesign chat
P8	You want restrained 3D	OpenDesign chat
P10	You're ready for whole-deck motion and interaction	OpenDesign presentation / chat

P0 · Decide what the deck has to win

I'm building a presentation about [TOPIC].

Audience:
[Who they are, how much they already know, how much time they have]

They need to understand:
1. [The first thing they must grasp]
2. [The context or evidence they need]

They should leave having decided:
[What you want them to believe, decide, or do]

Help me settle four things:
1. The core narrative of this presentation.
2. The single most important argument.
3. A recommended slide order, with the reasoning.
4. Which information should be shown visually rather than written out.

Do not design slides yet. Do not write HTML yet. Work only on the
story, the structure, and the decision logic.

→ Step 0

P1 · One image, several directions

I'm preparing a presentation about [TOPIC].

Audience:
[AUDIENCE]

Goal of the presentation:
[GOAL / DECISION / CORE ARGUMENT]

Generate ONE reference image showing several possible visual styles
for this deck.

Requirements:
1. Four to six clearly distinct directions in a single composition.
2. Each direction rendered as the cover or key slide of the same deck.
3. The directions must genuinely differ in layout, type, colour,
   texture, and visual language.
4. Do not build the full deck yet.
5. Do not produce separate images — put every option in one image.
6. Label each option with a short style name.

Content to reflect:
[5–10 key points]

The image exists to help me choose the final deck style.

→ Step 1

P1B · Help me choose

Here is the reference image with the style directions.

Topic: [TOPIC]
Audience: [AUDIENCE]
The conclusion I want them to reach: [CONCLUSION]

Compare the options and recommend one. Evaluate each on:
1. Whether it supports the message.
2. Whether it fits this audience.
3. Whether it can carry a full deck, not just a cover.
4. Whether it leaves room for text, charts, screenshots, and logos.

Do not generate the deck yet. Help me pick one direction and say why.

→ Step 1

P2 · Slide-by-slide content plan

I want to build a deck about [TOPIC].

Audience:
[AUDIENCE]

They should understand:
[WHAT THEY MUST GRASP]

They should conclude or decide:
[WHAT THEY SHOULD BELIEVE / DECIDE / DO]

Source material:
[PASTE NOTES, TRANSCRIPT, REPORT, OR BULLETS]

Produce the slide-by-slide content plan.

Requirements:
1. Do not design the slides yet.
2. Do not write the final HTML yet.
3. [NUMBER] slides.
4. For each slide: title, one-sentence key message, supporting points,
   a suggested visual element if useful, and whether it needs a chart,
   logo, image, screenshot, or motion.
5. One idea per slide.
6. Keep the text on each slide light.

After the outline, build a simple HTML preview that drops each slide's
text into a plain layout, so I can review the structure before any
visual design starts.

→ Step 2

P3 · The first editable deck

I want to build a deck.

Use the attached reference image as the visual direction.

Important:
1. Recreate the direction I selected from that image.
2. Build it as editable HTML-based slides.
3. Keep the slide ratio consistent with the reference unless I say
   otherwise.
4. Preserve the slide text and structure as far as possible.
5. Do not turn the deck into static images.
6. Make each slide visually finished, but readable and presentable
   from a stage.

Selected visual style:
[Describe the direction you chose]

Slide content:
[Paste the final content plan]

Generate the first full version of the deck.

→ Step 3

P4 · Close the gap

Here is the original reference image again.

Compare the current deck against it. Look at:
1. Layout structure
2. Type scale and personality
3. Colour palette
4. Spacing and alignment
5. Visual hierarchy
6. Texture, depth, and atmosphere
7. Whether every slide belongs to the same design system

Don't just tell me what's different. Improve the deck directly.

Use everything you have — design and code — to close the gap, while
keeping the deck readable and editable.

Then summarise:
1. What you changed.
2. Which slides improved most.
3. What still needs a human to review.

→ Step 4

P5 · Real logos and assets

Review the whole deck and find where real external assets belong.

Look for: company logos, product logos, app icons, platform
screenshots, public product images or interface references.

Instructions:
1. Find the official or high-quality version of each.
2. Download them and place them on the relevant slides.
3. Keep logos in their original brand colours.
4. Do not recolour, distort, or redesign an official logo.
5. Do not add assets to every slide. Only where they improve clarity,
   credibility, or recognition.
6. Assets must fit the layout without crowding the slide.
7. If you cannot find an official version, do not draw an
   approximation. Leave a clear placeholder and tell me.

Then tell me which slides got assets, what was added, and what I
should verify myself.

→ Step 5

P6 · Images that earn their place

Review the whole deck and decide where an AI-generated image would make
the presentation clearer or more persuasive.

Instructions:
1. Do not add images to every slide.
2. Only add one where it helps explain an idea, supports an argument,
   or makes a key moment more memorable.
3. Skip slides that already carry enough visual content.
4. Keep the image style consistent with the chosen deck style.
5. If you can generate images, generate them and place them.
6. If you can't, write the image prompts I should take elsewhere.
7. No text of any kind inside the images.

For each image, tell me: the slide number, what the image is doing,
the prompt used, and why this slide benefits from an image.

→ Step 6

P7 · Charts

Scan the deck and identify slides where an ECharts visualisation would
improve understanding. Use one only where it genuinely helps.

Consider charts for: comparisons, trends over time, rankings, market
share, adoption curves, survey results, before/after metrics,
technical benchmarks.

Instructions:
1. Do not add a chart to every slide.
2. Choose the best chart type for each case.
3. Match the chart styling to the deck's visual system — not the
   ECharts defaults.
4. Use real data where it exists.
5. Where exact data is missing, use clearly labelled illustrative data
   and tell me it needs verification.
6. Place the chart so it supports the slide's key message.
7. Y axes start at zero.

Then summarise which slides got charts, of what type, using what data,
and which data points need verifying.

→ Step 7

P8 · Restrained Three.js

Scan the deck and find where a restrained Three.js effect would help.
Use it only where it supports what the slide is saying.

Good uses: a subtle animated background on the opening slide; a 3D
metaphor for one key concept; particles that add atmosphere without
reducing readability; a spatial visual that explains a system, network,
or flow.

Constraints:
1. Not on every slide.
2. No visual clutter.
3. Text stays readable.
4. Performance stays reasonable.
5. The effect matches the deck's visual style.

Then tell me which slides got effects, what each one is, why it
supports that slide, and whether any should be removed for clarity.

→ Step 8

P10 · Presentation flow

Add presentation-level motion and interaction across the whole deck.
The goal is a deck that feels smooth presented end to end.

Add:
1. Slide-to-slide transitions.
2. Section-level transition moments where the topic changes.
3. Entrance animation for key titles, cards, charts, and images.
4. Restrained emphasis on the single most important line per slide.
5. Hover or click interaction only where it makes sense.
6. Light interactive detail on charts, cards, or visual modules where
   appropriate.

Constraints:
1. Don't animate everything.
2. Don't make it flashy or distracting.
3. All text stays readable and stable.
4. Chart labels and data stay visible.
5. Interactions stay simple enough to drive live.
6. The animation rhythm is consistent across the whole deck.
7. Optimise performance so presentation mode never lags.
8. Essential information is never hidden behind an interaction.

Then summarise the transition style, which slides got custom
interaction, which got special entrance or emphasis animation, and
which should have their motion reduced or checked by hand.

→ Step 10

Design systems

Extract a DESIGN.md from screenshots

These are screenshots of our product.

Extract a complete DESIGN.md, covering:

1. Palette — primary, secondary, semantic (success/warning/error/info),
   and a neutral ramp, each step as hex, noting where each colour
   appears and how much area it takes
2. Type — families, size scale (with the use of each step), weights,
   line heights, tracking
3. Spacing — base unit, common steps, radii, shadows
4. Components — buttons (primary/secondary/text, all states), inputs
   (default/focused/error/disabled), cards, tables, tags
5. Motion personality — durations, easing, which interactions animate
6. Voice — person, sentence length, formality

Important:
- Mark anything you're unsure of. Do not invent a value to fill a gap.
- Anything not visible (error states, empty states, dark mode) goes in
  a to-do list. Do not fabricate it.
- State the primary colour's usage ratio explicitly: is it a large
  background fill, or reserved for action buttons?

→ Playbook 04

Add dark mode

This DESIGN.md only covers light. Add a dark palette.

Requirements:
- Not a simple inversion. Redesign the neutral ramp; in dark, depth
  comes from luminance difference rather than shadow.
- The primary must clear WCAG AA on the dark background.
- Semantic colours stay distinguishable in dark.
- Mark which colours are shared between modes and which are separate.

Quality

Five-dimension self-critique

Run a five-dimension review on the current artifact: philosophy, visual
hierarchy, detail, functionality, innovation. Score each 0–10.

Every deduction needs concrete evidence — which element, which spot.
No generalities.

Output three lists:
- Keep: what's right, and why
- Fix: what must change, ordered by severity
- Quick wins: anything fixable in five minutes

Don't make the changes in this pass. Show me the report first.

→ Go deeper / Anti-slop

Anti-slop self-check

Audit the current artifact against this list. Give a verdict and
evidence for each:

1. Any gradient backgrounds? If so, is the gradient defined in the
   design system?
2. Does every icon map to a specific function, or are some decorative?
3. Are all numbers real or illustrative — and are the illustrative
   ones labelled?
4. Is the layout content-driven, or defaulted to three columns?
5. Is density allocated by importance, or uniform throughout?
6. Does each image explain something?
7. Any content-free words in the copy ("empower", "end-to-end",
   "seamless")?
8. State coverage: empty, loading, error, extremes — all present?
9. Is prefers-reduced-motion honoured?
10. Does contrast clear WCAG AA?

Fix what you hit, then tell me what you changed.

Complete the states

Bring this version up to state coverage: empty, loading, error, single
item, and heavy data — each with its own rendering. Don't ship only the
populated state.

The error state says how to recover. The empty state offers a next step.

A reusable constraints block

Paste this at the end of any generation prompt:

Constraints:
- Any number without a real source becomes a labelled placeholder.
  Do not invent figures.
- No gradient backgrounds. Use solids from the design system.
- Every icon maps to a specific function. If none does, use words.
- Interactive elements need default, hover, focus, and disabled states.
- No horizontal scrolling at phone width.
- Contrast clears WCAG AA.
- Honour prefers-reduced-motion.
- All text is real text nodes, never images.

Freeze a good run into a skill

I'm happy with what that last generation produced. Turn the approach
into a SKILL.md.

Include:
1. When this skill applies, and when it doesn't.
2. What must be established before generating (this drives the
   discovery form).
3. The standard structure for this kind of artifact.
4. The specific judgement calls we got right this time, written as rules.
5. Hard constraints — what must never happen.
6. Acceptance criteria.

Then tell me which parts you inferred from this one run and might not
generalise.

→ Go deeper / Skills