PageWeave/Design

Prompts / Component Extraction

4 Prompt promptcomponentrefactorlibraryreuse .md

Component Extraction

Turn a designed page into a reusable library

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.