109 lines
4.2 KiB
Markdown
109 lines
4.2 KiB
Markdown
---
|
|
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.
|