---
name: design-build
description: Generate production-ready HTML/Tailwind code from design specifications and DESIGN.md design tokens. Uses design engineering principles, Tastemaker aesthetic rules, and modern layout/typography systems to build non-boring, stunning web interfaces.
---

# /design-build

Generate production-quality code from a design spec and optional DESIGN.md tokens. Produces single-file HTML with Tailwind CSS via CDN (phase 1) or React/UI components.

Incorporates guidelines from installed design skills:
- **`tastemaker`**: Avoid generic AI slop (indigo/purple gradients, generic soft-shadow cards).
- **`landing-page-design`**: Structured hero section, headline/CTA hierarchy, conversion layout.
- **`emil-design-eng` & `animate`**: Micro-interactions, spring curves, component polish.
- **`better-colors`, `better-layout`, `better-typography`**: Whitespace, contrast, typographic scale.
- **`web-design-engineer`**: High-craft frontend design engineering standards.

## 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, describe it, or reference a vibe."** — URL to a DESIGN.md file, or free text description. If the user explored in `design-explore`, reference the same direction.

### Step 2: Extract tokens & design guidance

If a DESIGN.md URL is provided, download it:

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

Extract:
- Palette (background, primary, accent, surface)
- Typography (font families, scales, weights)
- Spacing & Layout
- Border radius & Shadows
- Visual Identity notes

Also inspect installed skills in `~/.agents/skills/` (such as `tastemaker`, `landing-page-design`, `better-typography`, `better-colors`) for applicable guidelines on the target component type.

### Step 3: Build the code prompt

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

```
You are a top-tier Web Design Engineer building a production-quality UI component/page.

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

## Design tokens & rules (MUST follow strictly)
{extracted tokens or style requirements}

## Aesthetic & Craft Principles (from Tastemaker & Design Engineering)
- NO "AI slop" or generic templates: avoid default indigo-to-purple gradients, generic soft-shadow cards, and cookie-cutter hero sections.
- Distinct Visual Vibe: choose an intentional aesthetic (e.g. brutalist, glass-morphism, warm editorial, high-contrast dark, Apple-like precision).
- Typography: strong typographic hierarchy with contrasting sizes and font weights (e.g., tight display headers, readable body).
- Whitespace & Padding: generous whitespace; group elements with padding rather than heavy border lines.
- Interactivity & Motion: subtle, polished hover transitions (`transition-all duration-200 ease-out`, hover elevation/scale).

## Technical requirements
- Single HTML file with Tailwind CSS via CDN (<script src="https://cdn.tailwindcss.com"></script>)
- Custom <style> block for custom fonts (e.g. Google Fonts) or token overrides
- Tailwind config script block if defining custom colors/fonts
- Semantic HTML5 elements (<header>, <main>, <section>, <footer>)
- Mobile-responsive layout (flex/grid with responsive breakpoints md: lg:)
- Realistic, domain-appropriate copy (NO generic "Lorem ipsum")
- Standalone, ready to preview in browser
```

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

The agent writes the complete HTML file to `./designs/<project-name>/index.html`.

### Step 5: Save & Preview

Save output to `./designs/<project-name>/index.html` and write a `README.md` explaining how to preview:

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

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

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

### Step 6: Iterate

User can request changes ("Make the navbar sticky, adjust dark mode contrast").
→ Feed feedback back to `coder-pro` for targeted updates.