06 · Design systems: your brand, enforced

"AI slop" has specific ingredients: purple-blue gradients, three rounded cards in a row, generic icons, fabricated metrics. It isn't that the model is weak. It's that with no direction, the average is all it can give you.

A design system is that direction. Pick one and palette, type, spacing, motion personality, and voice are all fixed — and every later generation inherits the same set.

What a DESIGN.md is

A Markdown file that writes a visual language down as machine-readable contract. The official library ships 152 of them, each built from a real brand — Stripe, Linear, Vercel, Airbnb, Tesla, Notion, Apple — with real colour values and real typefaces, not a generic material-design fallback.

Roughly, it governs:

Layer	What it fixes
Palette	Primary, secondary, semantic colours, neutral ramp
Type	Families, size scale, weights, tracking
Spacing and grid	Base unit, grid, radii, shadows
Components	What buttons, cards, forms, and tables look like
Motion	Duration, easing, what moves and what doesn't
Voice	Person, sentence length, how restrained the copy is

Choosing one

Ask what reaction the artifact has to produce, then choose. Don't pick the prettiest.

If the work needs	Choose a system that feels
Trust, strategy, enterprise credibility	Clean, structured, restrained, editorial
Energy, community, product momentum	Bold, vivid, high contrast, expressive
Technical depth, data, research	Grid-based, modular, information-dense
Futuristic AI or developer tooling	Digital, layered, code-inspired, cinematic

That table comes from the official deck tutorial, but it applies just as well to pages, dashboards, and posters.

Three ways to use one

Use one from the library

Pick it in the plugin library and snap the project to it. Everything generated afterwards inherits it. Right when you have no fixed brand, or when the work should borrow a known register anyway — developer-facing things borrowing Linear's, say.

Extract one from a screenshot or Figma

This is the fastest way to bring your own brand in:

1. Drop a screenshot or Figma export into the web UI.
2. Ask the agent to extract a DESIGN.md from it.
3. Save it under design-systems/<your-brand>/ in your repo.

From then on, every skill renders in that brand without re-prompting.

A prompt you can copy:

This is a screenshot of our product interface.

Extract a complete DESIGN.md from it, covering:
1. Palette — primary, secondary, semantic colours, neutral ramp, as hex
2. Type — families, size scale, weights, line heights
3. Spacing — base unit, common steps, radii, shadows
4. Components — default styling for buttons, cards, inputs, tables
5. Motion personality — durations, easing, which interactions animate

Where you can't tell, say so. Do not invent a value to fill the gap.

Write one by hand

If you already have brand guidelines, rewrite them as a DESIGN.md. It's Markdown. There's no magic format.

What a design system cannot govern

There's a layer no design system reaches: the accessibility floor, whether motion should run at all, which states must exist, how a form reports an error. In OpenDesign that's a separate layer called Craft — 12 rules, brand-agnostic.

Put simply: the design system decides what colour the button is; Craft decides that the button must have disabled and loading states. You need both, or you get output that looks good and doesn't work.

See Go deeper / Craft.

One practical suggestion

Don't extract your own brand on day one. Run two generations against a library system that's close to your register first, so you can feel how much the system actually changes the output. With that calibration, you'll know what your own DESIGN.md needs to say.

Next

07 · Ship your first artifact — the previous six chapters, run once for real.