129 lines
3.7 KiB
Markdown
129 lines
3.7 KiB
Markdown
---
|
|
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.
|