Design Builder

If the user answers "I don't know" to any question, mark as TBD and move forward. Summarize understanding before proceeding.

Step 3: Route to Operation

Phase 1 -- Extraction (how to obtain design tokens):

Has URL reference?
  Yes --> Extract copy --> Extract design
  No  --> Has image reference?
    Yes --> Extract design
    No  --> Visual discovery (tone, colors, typography) --> Extract design

Phase 2 -- Building (what to build -- user chooses):

design.json exists --> What to build?
  Preview first    --> Variants --> Frontend or Export
  Build directly   --> Frontend
  Send to Figma    --> Variants --> Export
  External tool    --> Generate prompt (v0, aura.build, replit, etc.)

Valid paths after design.json:

• design --> variants --> frontend
• design --> variants --> export
• design --> frontend (directly)
• design --> prompt for external tool

Artifacts

.artifacts/design/
├── copy.yaml                          # Structured content
├── design.json                        # Design tokens
└── variants/
    ├── minimal/index.html             # Variant preview
    ├── editorial/index.html
    ├── startup/index.html
    ├── bold/index.html
    ├── {custom}/index.html            # Custom variant (if requested)
    └── index.html                     # Comparison page
src/                                   # React components (frontend)

Templates

Context Loading Strategy

Load only the reference matching the current trigger. For frontend and variants operations, also load aesthetics.md and web-standards.md as auto-loaded dependencies.

Never simultaneous:

• Multiple operation references (e.g., copy.md + frontend.md)

Triggers

Extraction

Building

Auto-Loaded (not direct triggers)

• aesthetics.md -- loaded by frontend.md and variants.md as design principles
• web-standards.md -- loaded by frontend.md and variants.md as implementation rules

Cross-References

copy.md ---------> design.md (content informs design)
design.md -------> frontend.md (tokens required)
design.md -------> variants.md (tokens required)
aesthetics.md ------> frontend.md (design principles)
aesthetics.md ------> variants.md (design principles)
web-standards.md --> frontend.md (implementation rules)
web-standards.md --> variants.md (implementation rules)
variants.md -----> frontend.md (user picks variant, then builds React)
variants.md -----> export.md (variants required for Figma export)

Guidelines

DO:

• Ask user for project name and use kebab-case for directory names
• Check for existing PRD/Brief before any operation and use them as context
• Check for existing copy.yaml, design.json before starting
• Suggest next steps after completing any operation (defined in each reference file)
• Suggest missing prerequisites (e.g., "Run extract design first to generate design.json")

DON'T:

• Skip discovery -- always establish project context first
• Ignore existing artifacts when they're available
• Couple suggestions to specific skills (keep them generic)
• Block on missing PRD/Brief -- run lightweight discovery instead

Error Handling

• No PRD/Brief: Run lightweight discovery, never block on it
• No copy.yaml: Proceed without it, or suggest running extract copy first
• No design.json: Required for frontend/variants/export -- suggest running extract design
• WebFetch fails: Ask user to paste a screenshot instead