Select instead of inventing:
the Design Lookbook blueprint
It removes the interchangeable violet default an agent reaches for, and replaces it with a choice among 62 design systems whose contrast and colour relationships are already checked.
The four layers
Design (Finished screens)
455 real screens, each welded to one system. The grid, the spacing and the proportions are already resolved.
Kit (a multi-screen set)
Landing, pricing, checkout and onboarding handed over together, under one system, as a product rather than four pages.
Theme (Design systems)
The visual language above all of it: the DESIGN.md rules, the type pairing, the globals.css, the colour tokens.
Pattern (a standalone component)
105 blocks that drop into any system, each carrying its own keyboard and accessibility contract.
The unaided default vs an authored system
| Element | What an agent reaches for | What the library requires |
|---|---|---|
| Palette | The same slate and indigo, everywhere | No two of the 62 palettes within 0.55 in OKLab, measured in both colour modes |
| Geometry and corners | 12px rounded cards and a blurred grey shadow, unconditionally | A shape language per system, from a 0px grid to a 26px corner over a hard offset shadow |
| Typography | Inter or Roboto, set once and never questioned | A pairing chosen for the subject, and a stated size floor the face can survive |
| Ground and texture | Decorative violet radial gradient washes | Real materials: kraft paper, obsidian, concrete, vellum |
| Accessibility | Contrast left unchecked, and usually failing | Every text pair checked against WCAG AA, in light and dark |
The agent contract
Pick the system
Choose the system that fits what the product is for, not what looks nice in isolation.
Hand over the brief
Paste the generated === DESIGN LOOKBOOK BRIEF === into the coding agent.
Constrain the agent
The agent stops inventing a look and builds against the DESIGN.md tokens and rules instead.
Ship it
A finished, distinguishable interface that runs locally with no CDN dependency.