From prompt to component

The page is the prototype, not the product

When a prompt produces a page at fidelity 92, the temptation is to ship the page. The professional move is to ship the *component* — extract the reusable piece (the pricing table, the stagger, the hero pattern), strip the page-specific copy, tokenize the colours, and parameterize what varies. The generated page was the proof; the component is the asset.

• Extract by boundary: find where the pattern ends and the page begins — a pricing table component stops at the section padding; the section's headline is page content.
• Tokenize before theming: replace every hex with a role token first; a component themed by tokens works in every context, a component with hard-coded colours works in one.
• Parameterize the judgement calls: variant (tier count, density), and tone (calm, playful) become props; everything else stays internal.
• Document the origin: the component's notes carry its prompt, its run log and its fidelity score — future edits start from the brief's intent, not a guess.

The tests that decide admission

A generated pattern earns library admission when it passes:
[ ] Reusable - the pattern earns its keep in 2+ contexts
[ ] Tokenized - zero hard-coded hex/radius/spacing
[ ] Themed   - survives a token swap without breaking
[ ] Reduced  - has a working prefers-reduced-motion branch
[ ] Keyboard - operable and visibly focused by Tab
[ ] Scored   - run fidelity recorded with model + date

The loop closes on the library

The component then feeds the next prompt: library patterns become reference material in future briefs ('the pricing card from the library, applied to a bike shop'), and the library's own quality bar raises what the prompt asks for. Generation, extraction, admission, reuse — the loop is how Motif's catalog grows and how the prompts get sharper. A prompt library without a component pipeline is a museum; with one, it is a workshop.