Consolidate design skills into master design-build and design-explore skills, removing redundant standalone skill folders
This commit is contained in:
@@ -1,108 +1,99 @@
|
||||
---
|
||||
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.
|
||||
description: Generate production-ready HTML/Tailwind/React UI code from design specifications, visual references, or DESIGN.md design tokens. Incorporates Tastemaker aesthetic rules (anti-AI-slop), Emil Kowalski's design engineering & motion, Jakub Krehel's color/layout/typography systems, and high-converting landing page structures.
|
||||
---
|
||||
|
||||
# /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.
|
||||
Generate production-quality UI code. Produces single-file HTML with Tailwind CSS via CDN or React 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.
|
||||
This skill is a complete, self-contained design engineering system that replaces generic AI templates with high-craft, professional UI.
|
||||
|
||||
## Flow
|
||||
---
|
||||
|
||||
### Step 1: Gather requirements
|
||||
## 🎨 Part 1: Visual Identity & Aesthetic Principles (Tastemaker & Web Design Engineer)
|
||||
|
||||
Ask the user two questions:
|
||||
### Eliminate "AI Slop"
|
||||
- **NO default gradients**: Never default to indigo-to-purple (`bg-gradient-to-r from-indigo-500 to-purple-600`).
|
||||
- **NO generic cards**: Avoid identical rounded-lg white cards with soft `shadow-md` on light grey backgrounds (`bg-gray-50`).
|
||||
- **NO cookie-cutter heroes**: Avoid generic centered headers with two identical pill buttons ("Get Started" / "Learn More").
|
||||
- **Intentional Aesthetic**: Choose a distinct direction:
|
||||
- *Swiss / Minimal*: Monospace/serif contrasts, strict grid, generous whitespace, subtle borders (`border-neutral-200/80`).
|
||||
- *High-Contrast Dark*: Rich dark backgrounds (`#0a0a0c`, `#121215`), subtle surface borders (`border-white/10`), vibrant accent pops.
|
||||
- *Warm Editorial*: Serif headlines (Playfair/Merriweather), warm neutral backgrounds (`#fcfbf7`), rich ink text (`#1a1917`).
|
||||
- *Neo-Brutalist*: Thick black borders (`border-2 border-black`), sharp shadows (`shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]`), bold primary colors.
|
||||
- *Glassmorphism*: Semi-transparent surfaces (`backdrop-blur-md bg-white/10`), fine borders (`border-white/20`).
|
||||
|
||||
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.
|
||||
## 📐 Part 2: Layout & Grouping (Jakub Krehel Systems)
|
||||
|
||||
### Step 2: Extract tokens & design guidance
|
||||
- **Space over lines**: Group related items using spacing and background surfaces rather than dividing everything with heavy border lines.
|
||||
- **Hierarchy through contrast**: Establish clear visual weight using size, weight, and color value before relying on position.
|
||||
- **Padding & Density**:
|
||||
- Compact UI (dashboards, tools): `p-3`, `gap-2`, tight row heights.
|
||||
- Marketing / Landing pages: Generous section padding (`py-20 lg:py-32`), wide gaps (`gap-12 lg:gap-16`).
|
||||
- **Responsive alignment**: Grid columns (`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`) with consistent container max-widths (`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`).
|
||||
|
||||
If a DESIGN.md URL is provided, download it:
|
||||
---
|
||||
|
||||
## 🔤 Part 3: Typography & Colors (Better-Typography & Better-Colors)
|
||||
|
||||
- **Type Scale**:
|
||||
- Display / Hero: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.1]`
|
||||
- Section Headings: `text-2xl sm:text-3xl font-semibold tracking-tight`
|
||||
- Body: `text-base text-neutral-600 dark:text-neutral-400 leading-relaxed`
|
||||
- Small / Labels: `text-xs font-medium uppercase tracking-wider text-neutral-500`
|
||||
- **Color Roles**:
|
||||
- `bg-surface` vs `bg-background`: Surface cards should be 1 step lighter (in dark mode) or tinted (in light mode) relative to background.
|
||||
- Text contrast: Ensure WCAG AA compliance (4.5:1 for body text, 3:1 for large display headers).
|
||||
|
||||
---
|
||||
|
||||
## ⚡ Part 4: Motion & Micro-Interactions (Emil Kowalski Design Engineering)
|
||||
|
||||
- **Purposeful motion**: Animate state changes, hover interactions, and disclosure toggles. Never animate static content for the sake of it.
|
||||
- **Hover effects**:
|
||||
- Buttons: `transition-all duration-200 ease-out hover:scale-[1.02] active:scale-[0.98]`
|
||||
- Cards: `transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-lg`
|
||||
- **Focus states**: Visible, accessible focus rings (`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary`).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Part 5: Landing Page & Component Structure
|
||||
|
||||
When building landing pages:
|
||||
1. **Hero**: Single clear value proposition, primary action button + secondary proof point (ratings, active users, client logos).
|
||||
2. **Feature Grid**: Asymmetric or staggered feature cards (bento grid layout `md:col-span-2` for key feature).
|
||||
3. **Social Proof / Metrics**: Large statistics (`text-4xl font-extrabold`) with descriptive labels.
|
||||
4. **CTA Section**: Distinct background surface with high-contrast primary action.
|
||||
5. **Footer**: Clean navigation columns + legal/copyright.
|
||||
|
||||
---
|
||||
|
||||
## 🛠 Flow & Execution
|
||||
|
||||
### Step 1: Gather Requirements
|
||||
Ask:
|
||||
1. **"What are we building?"** — Component, dashboard, page description.
|
||||
2. **"What style/vibe?"** — URL to DESIGN.md or style description.
|
||||
|
||||
### Step 2: Download DESIGN.md (if URL provided)
|
||||
```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
|
||||
### Step 3: Call `coder-pro`
|
||||
Build prompt incorporating the requirements, DESIGN.md tokens, and the 5 design system parts above.
|
||||
|
||||
```bash
|
||||
Agent(
|
||||
subagent_type: "coder-pro",
|
||||
description: "Generate UI code from design spec",
|
||||
prompt: <the full code prompt from step 3>,
|
||||
description: "Build UI component/page",
|
||||
prompt: <prompt with design rules>,
|
||||
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.
|
||||
Save generated file to `./designs/<project-name>/index.html`.
|
||||
Show preview instructions (`python3 -m http.server 3000`).
|
||||
|
||||
Reference in New Issue
Block a user