Component recipes vs a component library

When people want consistent UI they usually reach for a component library. It solves a real problem, and for design it brings another: the library's look, which you then override one class at a time. A recipe takes the opposite approach. It ships the decision and lets any stack build it.

What a recipe looks like

## Primary button
Job: the one action on a screen. At most one per view.
Tokens: --action (fill), --action-edge (1px edge, same hue),
        --on-action (text), --radius-pill
Size: 44px high on touch, 36px in dense UI
States: hover lightens fill one step; press moves 1px down;
        focus shows a 2px ring with 2px offset; disabled 50% opacity
Never: a gradient, a second primary beside it, an icon-only primary

<button class="btn-primary">Get it</button>

Everything a builder needs is there: when to use it, what it is made of, how it behaves and what is off limits. There is no framework in it, so it builds the same in React, Vue, Svelte or plain HTML.

Why recipes suit AI-built UI

Claude builds in whatever stack your project uses. A component library for a different stack is useless to it, and a library for the same stack still does not tell it which variant to use where. A recipe does. It is short enough to sit in a reference file that loads when needed, and the Never line stops the drift that makes generated UI look generic.

Which components need recipes

Not all of them. The handful that appear on every screen and carry the identity: the primary and secondary button, the card, the input, the section heading, the navigation, and whatever is unique to your product. Ten recipes cover most interfaces.

Libraries still have a place

Accessible behaviour is hard: menus, dialogs, comboboxes, focus traps. Headless libraries handle that without imposing a look. Use one for behaviour, and recipes for appearance. The split is the same as the one in ui-ux-pro-max with a design skill: one source for how it looks, another for whether it works.

Each of our design skills is built from recipes. Glass Instrument UI has the gradient-hairline glass card, the lime primary, the glass secondary, the mono kicker, the aurora and the grain as recipes Claude copies rather than reinvents.