01
Define anatomy and naming
One component, one name, one owner.
Made for Graphic Designers
Spec a Design System Component Designers and Devs Can Build Once
Also useful for: Producers, Software Engineers, UX Designers, people in Creative
35 min
Intermediate
Creative
Graphic Designer
Career outcome:
Save Professional Time
Document one component with states, tokens, and do/don't so design and code stay aligned.
We'll use them to write your prompt.
Completed ✓
Make Your Play
Give us the situation. We’ll build the prompt.
Design systems drift when components live only in Figma with no rules.
Your answers save as you type.
What you'll do
This is the plan inside your prompt. Add your details first. Then follow these steps with ChatGPT or Claude.
02
Document variants and states
States aren't variants.
03
Map tokens and spacing rules
No hex in prose.
04
Write usage, a11y, and examples
Do/don't prevents forked buttons.
Make Your Play
Spec a Design System Component Designers and Devs Can Build Once
Tell us what the prompt needs to know
Start with the questions below. Each answer personalizes the playbook and builds the prompt you’ll use at the end.
Your situation
What it is for and where it appears.
Sizes, themes, misuse you see today.
0/10000
Color, type, spacing tokens or gaps.
0/10000
Web/native, keyboard, screen reader, min target size.
0/10000
This playbook was updated. Review your inputs before copying.
What you'll do
Check a step when you finish it.
01
Define anatomy and naming
One component, one name, one owner.
02
Document variants and states
States aren't variants.
03
Map tokens and spacing rules
No hex in prose.
04
Write usage, a11y, and examples
Do/don't prevents forked buttons.
Fill in the fields above to generate your prompt preview.
Assembled prompt
Beginner instructions
Fill the fields with this week’s real details. Incomplete notes beat invented polish.
Run the assembled prompt, answer follow-ups with specifics, then copy the deliverable into your own doc and verify names and numbers.
Advanced instructions
Add constraints the model can’t see: politics, licensing, cash timing, union rules, or family bandwidth.
After the first pass, ask it to attack the weakest assumption in the draft.
Use this when
You are adding or refactoring a component used in multiple products.
You'll need
- Component name and job
- Current variants and pain
- Design tokens available
- Platform and a11y requirements
You'll get
- A component spec with anatomy, states, tokens, accessibility, and usage rules you can use without rewriting it from scratch.
By the end of this playbook
You will have:
- A component spec with anatomy, states, tokens, accessibility, and usage rules you can use without rewriting it from scratch.
Examples
Progress 1 of 4