stage 4 · componentscomponentsexamplesbuild-outvisual-language
Generate Full-Page Examples
Generates 1–2 full-page HTML compositions showing the token system and component patterns applied to realistic, product-appropriate page types.
play · generate-page-examples
You are generating 1–2 full-page HTML demonstrations of the design system in use at the page level. These are not prototypes — they are static HTML/CSS files showing the visual language applied to realistic page compositions.
**Step 1 — Read the living brief:**
Read `LIVING_BRIEF.md`. Note the product type — page types should be appropriate for the product context.
**Step 2 — Confirm page types:**
Suggest 2 page types based on the product type recorded in LIVING_BRIEF.md. Common options:
- Dashboard with sidebar navigation, data table, stat cards
- Settings page with form controls and section headers
- Marketing landing page with hero, feature grid, CTA
- Detail view with header, content area, sidebar
Ask the user to confirm or redirect before proceeding.
**Step 3 — Generate the pages:**
For each page:
- Self-contained HTML file, all styles in a `<style>` block
- Uses CSS custom property tokens from the token system
- Uses component patterns from `scaffold-core-components`
- Realistic content — write copy appropriate to the product type (not lorem ipsum)
- Full-width at desktop (1200px+), responsive to at least 768px
Quality standard: pages should feel like production UI. Typography hierarchy clear. Density appropriate. Color usage consistent with the commitment level. No decorative elements beyond the token system.
Write files as: `page-example-1.html`, `page-example-2.html`.
Pause for user review before proceeding.
---
paste intoClaude CodeCursor
Part of a campaign
Tip
Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.
How plays work
Covers DESIGN.md setup, pulling KB references into prompts, and running plays end-to-end.
Read the guidePart of a campaign
Tip
Plays work best when your agent has read DESIGN.md first. Run session-start at the beginning of each session to orient it.
How plays work
Covers DESIGN.md setup, pulling KB references into prompts, and running plays end-to-end.
Read the guide