pi-config/skills/design-build/SKILL.md

name, description

name	description
design-build	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

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

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:

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.