04 · Extract a brand from a screenshot

At a glance

Output	A DESIGN.md
Time	30 minutes, an hour with verification
Type	Design System
Why	The highest-return hour in this book

Why do this first

Pay once, benefit on every generation afterwards.

Once it exists, you stop describing "our primary is this, our type is that, our radius is 8" in every prompt. Everything every skill generates comes out looking like your company's work.

What to feed it

In descending order of precision:

Material	Precision	Note
A Figma export	Highest	Carries variables, styles, component names
Existing brand guidelines	High	Rewrite them into a DESIGN.md directly
Several product screenshots	Medium	More screens cover more components and states
One marketing-site screenshot	Low	Usually only the marketing styling

Use Figma if you have it. With screenshots, give several — a list view, a form, a detail page — because each covers different component types.

The prompt

These are screenshots of our product.

Extract a complete DESIGN.md, covering:

1. Palette
   - Primary, secondary
   - Semantic: success, warning, error, info
   - Neutral ramp, lightest to darkest, each step as hex
   - For each colour, note where it appears and how much area it takes

2. Type
   - Families (name them if identifiable; otherwise describe the
     characteristics and give a fallback stack)
   - Size scale, with what each step is used for
   - Weights, line heights, tracking

3. Spacing
   - Base unit
   - Common steps
   - Radii, shadows, as concrete values

4. Components
   - Buttons: primary, secondary, text — default, hover, focus, disabled
   - Inputs: default, focused, error, disabled
   - Cards, tables, tags

5. Motion personality
   - Durations, easing functions
   - Which interactions animate

6. Voice (if the screenshots carry enough copy)
   - Person, sentence length, formality

Important:
- Mark anything you're unsure of. Do not invent a value to fill a gap.
- Anything not visible in the screenshots (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?

Why it's written this way

"Do not invent a value to fill a gap" is the most important line here. Without it you get a specification that looks complete and is half fiction — fiction that then applies to every generation afterwards, invisibly.

The usage-ratio clause is singled out because it's the most common extraction error. Many brands use their primary on action buttons only, under 2% of the surface. Extract it as a background fill and every generated page drowns in brand colour.

"Note where each colour appears" makes verification possible. Reading "#0055FF — primary button background, link text" you can immediately judge whether it's right.

Verification

Don't use it straight away.

1. Generate a page with it (playbook 01's prompt is fine).
2. Put it beside your real product.
3. Check four things:

Thing	Common drift
Primary colour usage ratio	Promoted to a background fill
Heading-to-body size ratio	Scale compressed, contrast lost
Card radii	Off by 2–4px, which reads very differently
Button height and padding	Too fat or too thin

Wrong? Edit the DESIGN.md. It's Markdown; that's faster than re-extracting.

Where it lives

your-project/
└── design-systems/
    └── your-brand/
        └── DESIGN.md

Commit it. From then on it travels with the repo and everyone works from the same one.

Acceptance

• [ ] Every colour has a hex value, no "dark blue"
• [ ] The primary's usage context and ratio are stated
• [ ] Every type step names its use
• [ ] Buttons and inputs have all their states
• [ ] A to-do list exists (proof it didn't fabricate what it couldn't see)
• [ ] The comparison test has been run
• [ ] It's committed

Variants

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.

Extract a competitor's, for research

This is a screenshot of [product]. Extract a DESIGN.md for analysis.

Also analyse:
1. What problem their visual decisions solve.
2. What's worth borrowing, and what only works in their context.
3. Given our product is [description], which parts don't apply.

Extracting a competitor's system to study it is ordinary design research. Using it directly is a different question — mind the line around trademarks and visual identity.

Managing several clients

design-systems/
├── client-a/DESIGN.md
├── client-b/DESIGN.md
└── our-own/DESIGN.md

One skill, several systems. The method is reused; the brands stay separate.

Questions that come up

It can't identify the typeface.

Normal — screenshots often defeat identification. Have it describe the characteristics (serif or not, width, weight, distinctive letterforms) and supply the name yourself, or give a fallback stack.

The colours don't match our design file.

Compression and colour management interfere. Where you have Figma or the original guidelines, trust those and use screenshots only for component behaviour.

The extraction is too vague.

Not enough screenshots. Add screens covering different components, especially ones with forms, tables, and status messaging.

Related

• Go deeper / Systems — the fuller treatment
• Get started / Design systems — the basics
• Playbook 05 · Figma to code