Consolidate design skills into master design-build and design-explore skills, removing redundant standalone skill folders
This commit is contained in:
@@ -1,77 +1,47 @@
|
||||
---
|
||||
name: design-explore
|
||||
description: Generate UI design mockups as images for exploration and ideation. Uses Tastemaker aesthetics, landing-page structure, and DESIGN.md tokens to visualize creative, non-generic UI directions before building.
|
||||
description: Generate visual UI design mockups as images for exploration and ideation. Uses Tastemaker anti-slop rules, Emil Kowalski motion/polish concepts, and DESIGN.md tokens to visualize creative, non-generic UI directions before building.
|
||||
---
|
||||
|
||||
# /design-explore
|
||||
|
||||
Generate visual design mockups. Asks the user what they want to design, optionally pulls design tokens from a DESIGN.md file, and calls the `image-maker` sub-agent to produce polished mockup images.
|
||||
Generate visual UI mockups. Asks the user what to design, pulls design tokens or style references, and calls `image-maker` to produce high-fidelity mockup images.
|
||||
|
||||
Utilizes guidance from installed design skills:
|
||||
- **`tastemaker`**: Avoid generic AI slop (indigo-to-purple gradients, generic soft cards). Express distinct aesthetic taste.
|
||||
- **`landing-page-design`**: Structured hero sections, headline/CTA hierarchy, conversion layouts.
|
||||
- **`web-design-engineer`**: High-craft visual presentation and browser acceptance standards.
|
||||
---
|
||||
|
||||
## Flow
|
||||
## 🎨 Visual System & Image Prompting Rules
|
||||
|
||||
### Step 1: Gather requirements
|
||||
- **Anti-Generic AI Slop**: Explicitly instruct the image model to avoid default purple/indigo gradients, cookie-cutter floating cards, and template hero sections.
|
||||
- **Aesthetic Direction**: Ground mockups in specific visual styles (e.g. brutalist, glass-morphism, high-contrast dark mode, warm editorial, Apple-like precision).
|
||||
- **In-Context Framing**: Render interfaces within realistic, sleek browser frames or device bezels.
|
||||
- **Typographic Scale**: Show bold header contrasts, clear section hierarchy, and clean layout whitespace.
|
||||
|
||||
Ask the user two questions:
|
||||
---
|
||||
|
||||
1. **"What are we designing?"** — Free text description of the interface, page, or component.
|
||||
## 🛠 Flow
|
||||
|
||||
2. **"What style or vibe? Pick from awesome-design-md, describe it, or reference a look."**
|
||||
- Provide a full URL (e.g. `https://github.com/VoltAgent/awesome-design-md`)
|
||||
- Describe in words: "warm editorial, high-contrast dark, Swiss typography, neo-brutalist"
|
||||
|
||||
### Step 2: Extract tokens & design guidelines
|
||||
|
||||
If a DESIGN.md URL is provided, download it:
|
||||
### Step 1: Gather Requirements
|
||||
Ask:
|
||||
1. **"What are we designing?"** — Description of the interface or page.
|
||||
2. **"What style/vibe?"** — URL to DESIGN.md, or aesthetic description (e.g., "warm editorial, high contrast dark, Swiss typography").
|
||||
|
||||
### Step 2: Download DESIGN.md (if provided)
|
||||
```bash
|
||||
curl -sL <DESIGN_MD_URL> -o /tmp/design-tokens.md
|
||||
```
|
||||
|
||||
Extract palette, typography, spacing, border radius, and identity notes.
|
||||
|
||||
### Step 3: Build the image prompt
|
||||
|
||||
Combine description and tokens into a prompt for `image-maker`:
|
||||
|
||||
```
|
||||
UI mockup for {what}: {user's description}
|
||||
|
||||
Design system tokens to follow:
|
||||
- Color palette: {extracted palette}
|
||||
- Typography: {extracted fonts}
|
||||
- Radius & Spacing: {extracted radius/spacing}
|
||||
- Visual Vibe: {extracted identity description}
|
||||
|
||||
Aesthetic requirements (from Tastemaker & Web Design Engineer):
|
||||
- High-fidelity, stunning UI mockup in a clean browser frame or device context
|
||||
- NO generic AI slop: avoid default indigo-to-purple gradients, generic soft cards, or template layouts
|
||||
- Distinct visual identity with strong typographic scale and intentional color hierarchy
|
||||
- Clean alignment, generous whitespace, and sharp contrast
|
||||
```
|
||||
|
||||
### Step 4: Call image-maker
|
||||
### Step 3: Call `image-maker`
|
||||
|
||||
```bash
|
||||
Agent(
|
||||
subagent_type: "image-maker",
|
||||
description: "Generate design mockups",
|
||||
prompt: <the full image prompt from step 3>,
|
||||
description: "Generate design mockup images",
|
||||
prompt: "High-fidelity UI mockup for {what}. Aesthetic: {vibe/tokens}. Clean browser frame, non-generic layout, bold typography, rich contrast, professional SaaS/web app finish.",
|
||||
max_turns: 3
|
||||
)
|
||||
```
|
||||
|
||||
### Step 5: Show images inline (REQUIRED)
|
||||
|
||||
After images are generated:
|
||||
1. Save images to `/tmp/design-explore-<N>.png`
|
||||
2. Call `read` on each saved image file so Pi displays them inline in the conversation.
|
||||
3. Present to user: "Here are the design concepts. Which direction?"
|
||||
|
||||
### Step 6: Iterate or Build
|
||||
|
||||
User can pick a direction, request tweaks, or run `/design-build` to generate the HTML/Tailwind implementation.
|
||||
### Step 4: Display Images Inline (REQUIRED)
|
||||
1. Save generated images to `/tmp/design-explore-<N>.png`.
|
||||
2. Call `read` on each image file so Pi displays them inline in the chat.
|
||||
3. Ask the user for feedback or proceed to `/design-build` to generate the code.
|
||||
|
||||
Reference in New Issue
Block a user