Playbook index

Seven playbooks covering the artifact types outside decks. Each one has the same shape: at a glance, the situation, a copy-ready prompt, why it's written that way, an acceptance list, variants, and the questions that come up.

Decks get their own chapter — see the deck workshop.

Pick one

Playbook	Output	Difficulty	What you learn
01 · Landing page	Single-file HTML page	Low	Getting "what it sells and to whom" into a prompt
02 · Sketch to prototype	Mobile interface	Low	Sketch input, and why drawing badly is fine
03 · Dashboard	Charted control surface	Medium	Deciding the question before laying out cards
04 · Brand from a screenshot	A DESIGN.md	Medium	The highest-return hour in the tool
05 · Figma and screenshots to code	Shippable front-end code	Medium	Saying which layer you actually want
06 · Posters and imagery	A consistent set of images	Low	Lock the style, then batch
07 · HTML video	Motion short	High	Video made of code, so it stays editable

A suggested order

First time: 01 then 02. Both are fast, and both make quality obvious.

Putting it on a real project: do 04 first. Once your own brand system exists, every other playbook's output jumps a level.

Selling it internally: 03 and 05. Those two make the value visible to engineering and product colleagues.

What every playbook assumes

• OpenDesign installed and an agent connected (Get started 02, 03)
• A design system chosen, or your own extracted (playbook 04)
• The discovery form answered seriously (Get started 05)

Miss any of the three and every playbook below performs worse.

One acceptance habit for all of them

Whatever you made, run these four questions before anything else:

1. Are the states covered? Empty, loading, error, extremes. This is the most common AI-design failure.
2. Are the numbers real? Is illustrative data labelled?
3. Any slop ingredients? Purple gradients, generic icons, a defaulted three-column layout, an invented user count.
4. Does it hold at phone width?

Once those pass, then talk about whether it looks good.