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. 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:

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

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:

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.