Tell the agent exactly
what to produce.

# m558 Claude Code Execution Prompt v1

## Context
You are building a page for the LIGHT HOPE / X1000 ecosystem.
Before writing any code, read the design files below completely.
Your output must reflect the design rules precisely.

## Files to Read (in order)
1. design-systems/{domain}/DESIGN.md   # Brand rules, colors, typography, spacing
2. personas/{persona}.md                # Emotional tone, what to avoid
3. design-systems/shared/TOKENS.md     # Universal tokens

## Brief
{paste your page brief here}

## Success Criteria
- [ ] Colors match DESIGN.md color palette exactly
- [ ] Typography uses specified font stack
- [ ] Spacing follows 8px base unit
- [ ] Components reflect persona emotional tone
- [ ] No generic Bootstrap/template patterns
- [ ] Mobile-responsive (640/768/1024 breakpoints)
- [ ] All interactive states defined (hover, focus, active)

## Output
Single TSX file using Tailwind CSS.
No inline styles unless absolutely required.
Semantic HTML. WCAG AA accessible.

# m558 Cursor Execution Prompt v1

## Attach These Files First (⌘ + Enter to add)
- design-systems/{domain}/DESIGN.md
- personas/{persona}.md

## System Instruction
You are a UI engineer working within the LIGHT HOPE design system.
Study the attached DESIGN.md and persona file carefully.
Every component you write must reflect these rules exactly.

## Component Request
Build: {component name}
Page context: {where this lives}
User intent: {what user is trying to do}

## Iteration Rules
- Pass 1: Structure and layout only
- Pass 2: Apply colors and typography from DESIGN.md
- Pass 3: Add persona-specific emotional qualities
- Pass 4: Micro-interactions and states

## Do Not
- Invent colors not in DESIGN.md
- Use font families not in the type stack
- Add decorative elements not in persona guidelines
- Default to generic shadcn/Bootstrap patterns

# m558 Stitch Generation Brief v1

## Generation Parameters
brand_system: "{domain}"           # lighthope | x1000 | math
persona: "{persona}"               # apple-minimal | airbnb-warm | spotify-energy | spacex-future
page_type: "{type}"                # landing | feature | about | pricing | docs
primary_action: "{CTA}"           # What you want visitors to do

## Color Constraints
primary: {from DESIGN.md}
accent: {from DESIGN.md}
background: {from DESIGN.md}
⚠ Do not introduce colors outside this palette

## Typography Constraints
headline_font: {from DESIGN.md}
body_font: {from DESIGN.md}
mono_font: {from DESIGN.md}
⚠ Do not suggest alternative font pairings

## Layout Constraints
max_width: {from DESIGN.md}
spacing_unit: 8px
sections: [{list required sections}]

## Persona Tone Notes
feeling: {quote persona.feeling field}
avoid: {paste persona.avoid list}

## Reference
Design source: design-systems/{domain}/DESIGN.md
Persona source: personas/{persona}.md