Here is a finished page: [paste HTML or URL].
Extract its design language into a component library:
1. Identify every repeating pattern (cards, heroes, sections, badges, buttons).
For each: name it concretely, count occurrences, note variations.
2. For the top 6 patterns, produce:
- Cleaned HTML using only daisyUI semantic classes + Tailwind utilities
(replace hardcoded colors with bg-primary-style tokens).
- A compact preview version.
- Usage notes: when to use, 4–6 hard rules, 2–3 named variations.
3. List the design tokens implied by the page (colors → variables, spacing scale,
type scale) as a starter theme CSS.
4. Flag anything that CANNOT be tokenized (bespoke art, one-off layouts) — these
stay page-specific.
Output format: one fenced HTML block per component, ready to paste into a library
entry. No framework code, no build steps.
Prompts / Component Extraction
Component Extraction
Turn a designed page into a reusable library