Free playbook
The Claude Code Design Playbook
Two skills that pull the design system out of any website you love, keep it in your project, and draw icons and charts that match it. Both free to download.
Nuhu Shaik2 min readnuhushaik.com/resources/design01
Design extraction
Claude measures a site you love: every colour, font and spacing value it really uses.
The problem
Describe a style in words and AI fills the gaps from memory: last year's brand colour, a font it happens to know, spacing that feels off.
What stripe.com really uses
| What | AI guessed | The site uses |
|---|---|---|
| Brand colour | #533afd | |
| Font | Söhne (a paid font) | |
| Body text | 15px, light (300) | |
| Corners | 4px and 6px |
Four guesses, four misses. AI's memory of a brand is often a redesign behind.
The fix
Remember this
Measure it. Don't describe it.
- Visit8 pages at desktop width, 3 at phone width, like a person would
- MeasureEvery colour, font, size, space, corner and shadow the browser draws
- RankBy how much of the site uses each, so the real palette rises to the top
- NamePrimary, text, surface…, checked against screenshots of the site
Done right
stripe.com · 12 page visits · desktop and phone · 2 minutes
- primary
#533afd - heading
#0a2540 - text
#425466 - surface
#f6f9fc - border
#e5edf5
- Type
- Söhne is a paid font, so it measured 18 free ones. Archivo is closest: the same width, nearly the same stroke one weight up
- Scale
- 56 · 48 · 38 · 32 · 26 · 22 · 18 · 15px, mostly light (300)
- Space
- A 4px grid. Corners mostly 4 and 6px, plus pills
- Proof
- Its pick for primary matches Stripe's own
--hds-color-action-bg-solidtoken
Get the skill
Install the extract-design skill from https://nuhushaik.com/resources/design/extract-design.zip by unzipping it into ~/.claude/skillsPaste it into Claude Code: it downloads the skill and unzips it. Then type /extract-design. Needs Node 18 or newer and Google Chrome; the first run adds a 13 MB browser driver.
It measures, it doesn't copy. Logos, icons, photos and words stay the site's, and paid fonts stay paid: it finds the closest free one and maps the weights.
Copy these prompts
/extract-design [the site you love, like https://stripe.com] Measure [the pages that matter, like the home page and pricing] and build the design system into this project. Then show me the preview next to the real site, and tell me every call you made.
Change our design system so it's ours, not a copy: [what to change, like our brand colour and our logo's font]. Keep everything else as measured. Update roles.json, rebuild, and show me the preview.
Free playbook
Where should I send it?
The rest opens right here, and I’ll email you the link and the PDF for your computer.
- Get both skills
- Design memory
- Graphics in code
No spam. You’ll get the playbook now, then new guides and the occasional offer from Nuhu Ventures Inc. Unsubscribe any time. Privacy and contact details
Get both skills
Paste this into Claude Code. It downloads both skills and unzips them into your skills folder.
Install the two design skills from https://nuhushaik.com/resources/design/design-skills.zip by unzipping it into ~/.claude/skillsThen type /extract-design or /draw-svg to check they're there. Not showing? Type /reload-skills.
Using Claude.ai or the Claude app? Download each zip and upload it in Customize › Skills. Codex, Cursor or Gemini CLI: unzip it into ~/.agents/skills.
02
Design memory
Saved in your project as DESIGN.md, so every new chat already knows the style.
The problem
Every new chat starts from zero, so you describe the style again, and each page drifts a little further from the last.
Same prompt each time: “Use our purple.”
- Monday
#533afd, 6px corners - Wednesday
#635bff, 10px corners - Friday
#6366f1, 16px corners
One brand, three purples and three corner sizes in a week.
The fix
Remember this
Write the style down once, where Claude reads it first.
- DESIGN.mdThe rules in words, in Google's open format
- tokens.cssEvery value as a CSS variable
- theme.cssThe same values as Tailwind classes
- CLAUDE.mdOne line: read DESIGN.md before any UI work
Done right
DESIGN.mdthe rules, in wordsdesign-system/tokens.css--color-primary, --text-h1, --radius-md…design-system/theme.cssbg-primary, text-h1, rounded-md…design-system/preview.htmla sample page next to the real siteCLAUDE.mdpoints every chat at DESIGN.md
CLAUDE.md
Before any UI work, read DESIGN.md. Build only from its tokens. Never hard-code a colour, size, radius or shadow.
--color-primary buttons, --radius-sm cards, --text-h2 headings. Nothing hard-coded.DESIGN.md is Google's open format for design systems: any AI tool can read it, and Google Stitch imports it.
Copy these prompts
Build [the page or screen, like our pricing page] for [your app, and who it's for]. Read DESIGN.md first and use only its tokens. Then show it to me at desktop and phone width, next to design-system/preview.html.
Check [the page or component] against DESIGN.md. List every colour, size, radius or shadow that isn't a token, fix them, and show me before and after.
Not sure which style fits your app? I’ll look at it with you on a 1:1 call.03
Graphics in code
Icons, charts and illustrations drawn as SVG from your tokens, matching on the first try.
The problem
Icons from a pack or an image generator never quite match: the wrong line weight, the wrong colours, and nothing you can edit.
- home
- search
- settings
- payments
- alerts
Five icons, five different hands. The image one is blurry at 24px, and its colour can't change.
The fix
Remember this
Measure the family. Draw on its grid. Then look.
- MeasureThe site's own icons: line weight, corners, grid and padding
- PlanEvery shape with its coordinates, before any drawing
- DrawSVG from simple shapes, colours from your tokens
- CheckIt lints, renders and compares them with the site's, 2–4 rounds
Done right
home
search
settings
user
payments
analytics
notifications
security
Drawn by the skill from stripe.com's tokens: lint-clean, rendered and checked against Stripe's own icons.
Get the skill
Install the draw-svg skill from https://nuhushaik.com/resources/design/draw-svg.zip by unzipping it into ~/.claude/skillsPaste it into Claude Code, then type /draw-svg. It reads the DESIGN.md and tokens from the first skill, or measures any site you name.
Draw with Claude Opus 5.5 at high effort. Max effort can spend the whole budget thinking and return no drawing: the quality comes from rendering and fixing.
Copy these prompts
/draw-svg Draw [the icons you need, like home, search, settings and payments] in our style. Measure the site's own icons first, plan each one with coordinates, then lint and render them until they match.
/draw-svg Turn this into a chart in our brand colours: [your data, like monthly revenue for the last six months]. The title should say what the data shows.
/draw-svg Draw an empty-state illustration for [the screen, like "No payments yet"] in our style, about 160px wide, with no words in the art.
1:1 design call with Nuhu Shaik
Want help with your design?
I’ll look at your app’s design with you and show you how to get Claude to build it the way you see it.
- One hour, live
- On your own project
- CAD 200
- How to turn a site you love into your own brand
- What your DESIGN.md and tokens should say
- How to get on-brand icons, charts and pages from Claude
Want help with your design? Request a 1:1 call at nuhushaik.com/resources/design#call
Saves me hours every day. You help me a lot.
- 3,200
- monthly active users on Ayah
- 700
- paid users on Drum Breaker
- Caterpillar
- web HMI for power systems