08 · Best practice
Treat the design system as a skill
Colors, type, voice, surfaces. Claude defaults to indigo and mesh gradients without it.
TypeUI has built a library of 48 design skills, each a single SKILL.md that gives Claude a consistent design language. Install one, and every UI Claude generates uses the same color tokens, type scale, and spacing. No more "the pricing section spacing is off."
The opposite — letting Claude default to whatever — is what Owen Williams (Design Manager at Stripe) calls "the Tailwind Indigo blur slop." Designers and PMs at Stripe were generating prototypes that looked nothing like the actual product, until they wired the company's design system into Claude as an MCP + a bundle of rules.
How to do it
Install: npx typeui.sh pull <skill-name>.
The skill drops a SKILL.md into ~/.claude/skills/. Done.
When to combine with your own brand spec
If your company has a real brand (logo, colors, voice — see practice 05), your DESIGN.md is the source of truth. A design skill is a fallback: useful for surfaces that don't have explicit brand guidance (admin panels, internal tools, prototypes).
This site itself blends three TypeUI styles on top of the Runtime brand — Cosmic for the hero, Perspective for depth, Neobrutalism for CTAs and anchor cards.
Why this beats a Figma library
A Figma library is something the model can't read. A SKILL.md is something it can. Both should exist; the skill is the one that changes output.
Anti-patterns
- Installing 5 design skills and hoping Claude picks the right one. Install one.
- Layering a design skill on top of a different brand spec. The skill wins; your brand loses.
- Choosing "Cosmic" because it sounds cool when your product is a B2B accounting tool. Pick by user expectation, not by what's trendy.