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 guide