sam/pi-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add creative design skills (landing-page-design, tastemaker, emil-design-eng, animate, better-colors, better-layout, better-typography, web-design-engineer) and update design-build & design-explore

Browse Source
This commit is contained in:
Sam Rolfe
2026-09-18 13:57:37 +10:00
parent c37e28149f
commit 6c3d11aa73
10 changed files with 2459 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
skills/design-build/SKILL.md
View File

@@ -1,11 +1,18 @@
---
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.
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 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.
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
@@ -15,51 +22,55 @@ 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.
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: If DESIGN.md URL provided, download and extract
### 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
```
Read the file. Extract:
- Palette (colors)
- Typography (fonts, sizes)
- Spacing
- Border radius
- Shadows
- Identity/language notes
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:
Create a detailed prompt for the `coder-pro` sub-agent:
```
You are building a production-quality UI component/page.
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 (MUST follow exactly)
```
{paste the extracted tokens directly}
```
## 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">)
- 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
- 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
```
If NO DESIGN.md, replace the token section with general style guidance from the user's description.
### Step 4: Call coder-pro
```bash
@@ -71,27 +82,16 @@ Agent(
)
```
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`
The agent writes the complete HTML file to `./designs/<project-name>/index.html`.
### Step 5: Save the output
### Step 5: Save & Preview
Create an output directory in the current project and save:
Save output to `./designs/<project-name>/index.html` and write a `README.md` explaining how to preview:
```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
@@ -100,29 +100,9 @@ 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 6: Iterate
### 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.
User can request changes ("Make the navbar sticky, adjust dark mode contrast").
→ Feed feedback back to `coder-pro` for targeted updates.