---
name: design-build
description: Generate production-ready HTML/Tailwind code from design specifications and DESIGN.md design tokens. Use when the user has a clear design direction and wants to build.
---

# /design-build

Generate code from a design spec and optional DESIGN.md tokens. Produces single-file HTML with Tailwind CSS via CDN (phase 1). Future versions will scaffold React projects.

## Flow

### Step 1: Gather requirements

Ask the user two questions:

1. **"What are we building?"** — Description of the page, component, or interface. Be specific about functionality, layout, content.

2. **"What style? Pick from awesome-design-md or describe it."** — Same as design-explore: URL to a DESIGN.md file, or free text description. If the user already explored in design-explore, they can reference the same DESIGN.md.

### Step 2: If DESIGN.md URL provided, download and extract

```bash
curl -sL <DESIGN_MD_URL> -o /tmp/design-tokens.md
```

Read the file. Extract:
- Palette (colors)
- Typography (fonts, sizes)
- Spacing
- Border radius
- Shadows
- Identity/language notes

### Step 3: Build the code prompt

Create a detailed prompt for the coder-pro sub-agent:

```
You are building a production-quality UI component/page.

## What to build
{user's design description — what it is, what it does, layout, content}

## Design tokens (MUST follow exactly)
```
{paste the extracted tokens directly}
```

## Technical requirements
- Single HTML file with Tailwind CSS via CDN (<script src="https://cdn.tailwindcss.com">)
- Include a custom <style> block for design-token-accurate values
- Tailwind config block for custom colors/fonts matching the tokens
- Semantic HTML5
- Mobile-responsive (stack on narrow screens)
- Include realistic placeholder content (not lorem ipsum — use domain-appropriate text)
- Comment sections clearly
- Add subtle hover transitions on interactive elements
- No framework dependencies — vanilla HTML + Tailwind CDN
```

If NO DESIGN.md, replace the token section with general style guidance from the user's description.

### Step 4: Call coder-pro

```bash
Agent(
  subagent_type: "coder-pro",
  description: "Generate UI code from design spec",
  prompt: <the full code prompt from step 3>,
  max_turns: 3
)
```

Be specific in the agent prompt about what file to create. The agent should:
1. Write the complete HTML file
2. Output it as a single file to `<output_dir>/index.html`

### Step 5: Save the output

Create an output directory in the current project and save:

```bash
mkdir -p ./designs/<project-name>
```

Write the generated code to `index.html` in that directory.

Also save a `README.md` with:
- The original design spec
- The DESIGN.md URL used
- How to preview: `cd ./designs/<project-name> && python3 -m http.server 3000`

### Step 6: Show the result

Tell the user:
```
Code generated → ./designs/<project>/index.html

To preview:
  cd ./designs/<project>/
  python3 -m http.server 3000
  → Open http://localhost:3000

To get hot-reload:
  npx live-server . --port=3000
```

If design-build is used after design-explore, reference: "Based on the mockups you approved, here's the code implementation."

### Step 7: Iterate

User can request changes: "Change the header to sticky, add a dark mode toggle"
→ Feed the change request + the existing code back to coder-pro for targeted edits.

---

## DESIGN.md Format

Same format as design-explore. See `~/.agents/skills/design-explore/SKILL.md` for the reference.

## Output Location

All generated projects go to the current working directory:
```
./designs/<project-name>/
```

This keeps designs with the project — they can be rsync'd to servers, committed to git, or referenced by other tools. The parent `./designs/` directory is created if it doesn't exist.