Design Builder

---
name: design-builder
description: >-
  Design-to-code pipeline: extract copy from URLs, extract design tokens
  from images, then build React components or HTML preview variants.
  Use when: extracting content from websites, extracting design systems,
  generating frontend code, previewing design variants, sending to Figma
  via MCP. Also use when the user wants to build a page from a reference URL
  or screenshot, redesign an existing site, create visual prototypes, or
  generate code from a design. Triggers on "extract copy", "extract design",
  "build frontend", "generate variants", "export design", "send to Figma",
  "build from reference", "redesign this", "create prototype".
metadata:
  author: github.com/adeonir
  version: "1.0.0"
---

# Design Builder

Design-to-code pipeline: discover, extract, tokenize, build.

## Workflow

```
discovery --> copy --> design --> frontend / variants / export
```

Each step is independent. Can run isolated or chained.
Discovery is always the first step -- never skip it.

## Discovery

Before any operation, establish project context.

### Step 1: Check Existing Context

Look for existing documents in `.artifacts/docs/`:

- `prd.md` -- PRD
- `brief.md` -- Brief

If found: read and extract purpose, audience, tone, and key features.
Skip to the relevant trigger operation.

### Step 2: Lightweight Discovery (when no PRD/Brief exists)

Ask up to 4 questions, one stage only:

1. What is the project purpose? (landing page, app, tool, portfolio)
2. Who is the target audience?
3. What is the visual reference? (URLs, screenshots, descriptions)
4. Any brand or style constraints? (colors, fonts, existing guidelines)

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 | Template |
|---------|----------|
| Copy extraction output | [copy.md](templates/copy.md) |
| Design tokens output | [design.md](templates/design.md) |

## 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

| Trigger Pattern | Reference |
|-----------------|-----------|
| Extract copy, copy from URL, content from website | [copy.md](references/copy.md) |
| Extract design, design from image, design tokens | [design.md](references/design.md) |

### Building

| Trigger Pattern | Reference |
|-----------------|-----------|
| Build frontend, create components, generate React | [frontend.md](references/frontend.md) |
| Generate variants, preview designs, HTML variants | [variants.md](references/variants.md) |
| Export design, export to Figma, send to Figma | [export.md](references/export.md) |

### 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