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
This commit is contained in:
@@ -1,11 +1,16 @@
|
||||
---
|
||||
name: design-explore
|
||||
description: Generate UI design mockups as images for exploration and ideation. Use when the user wants to visualize a design concept before building. Supports optional DESIGN.md from awesome-design-md for design-token-accurate mockups.
|
||||
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.
|
||||
---
|
||||
|
||||
# /design-explore
|
||||
|
||||
Generate visual design mockups. You ask the user what they want to design, optionally pull design tokens from a DESIGN.md file, and call the image-maker sub-agent to produce polished images.
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
@@ -15,57 +20,42 @@ Ask the user two questions:
|
||||
|
||||
1. **"What are we designing?"** — Free text description of the interface, page, or component.
|
||||
|
||||
2. **"What style? Pick from awesome-design-md or describe it."** — The user can either:
|
||||
- Provide a full URL: `https://getdesign.md/apple/design-md` or from `https://github.com/VoltAgent/awesome-design-md`
|
||||
- Describe the style in words: "dark glass morphism, purple accent, rounded corners"
|
||||
- If they provide a URL, download it and extract the design tokens
|
||||
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: If DESIGN.md URL provided, extract tokens
|
||||
### Step 2: Extract tokens & design guidelines
|
||||
|
||||
Download the DESIGN.md file:
|
||||
If a DESIGN.md URL is provided, download it:
|
||||
|
||||
```bash
|
||||
curl -sL <DESIGN_MD_URL> -o /tmp/design-tokens.md
|
||||
```
|
||||
|
||||
Read the file and extract these tokens from the YAML/Markdown:
|
||||
|
||||
- **Palette/Colors** — background, primary, accent, text, surface
|
||||
- **Typography** — font family, heading font, sizes, weights
|
||||
- **Spacing** — base unit, section padding
|
||||
- **Border Radius** — button, card, input values
|
||||
- **Shadows** — elevation levels
|
||||
- **Identity/Language** — any prose describing the visual language
|
||||
|
||||
If the file is YAML, parse it with `python3 -c "import yaml; ..."`. If it's Markdown, read the relevant sections.
|
||||
Extract palette, typography, spacing, border radius, and identity notes.
|
||||
|
||||
### Step 3: Build the image prompt
|
||||
|
||||
Combine the user's design description with the extracted tokens into a detailed prompt:
|
||||
Combine description and tokens into a prompt for `image-maker`:
|
||||
|
||||
```
|
||||
Design prompt for {what}: {user's description}
|
||||
UI mockup for {what}: {user's description}
|
||||
|
||||
Design system tokens to follow exactly:
|
||||
Design system tokens to follow:
|
||||
- Color palette: {extracted palette}
|
||||
- Typography: {extracted fonts}
|
||||
- Border radius: {extracted radius values}
|
||||
- Spacing: {extracted spacing}
|
||||
- Visual identity: {extracted identity description}
|
||||
- Radius & Spacing: {extracted radius/spacing}
|
||||
- Visual Vibe: {extracted identity description}
|
||||
|
||||
Style requirements:
|
||||
- Professional, high-fidelity UI mockup
|
||||
- Show the interface in context (browser frame or device mockup)
|
||||
- Clean, modern presentation
|
||||
- Use the exact colors and fonts specified
|
||||
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
|
||||
```
|
||||
|
||||
If NO DESIGN.md, use only the user's description with general style guidance.
|
||||
|
||||
### Step 4: Call image-maker
|
||||
|
||||
Launch the image-maker sub-agent with the prompt:
|
||||
|
||||
```bash
|
||||
Agent(
|
||||
subagent_type: "image-maker",
|
||||
@@ -75,74 +65,13 @@ Agent(
|
||||
)
|
||||
```
|
||||
|
||||
The image-maker will generate images via OpenRouter's image models.
|
||||
|
||||
### Step 5: Show images inline (REQUIRED)
|
||||
|
||||
After images are generated, you MUST display them inline. Do NOT just save files and report paths.
|
||||
|
||||
1. Save each image to `/tmp/design-explore-<N>.png`
|
||||
2. **Call `read` on each saved image file** — pi displays images as inline attachments
|
||||
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?"
|
||||
|
||||
Example:
|
||||
```bash
|
||||
# After image-maker generates images, save them
|
||||
# Then READ them so they appear inline:
|
||||
read("/tmp/design-explore-1.png")
|
||||
read("/tmp/design-explore-2.png")
|
||||
read("/tmp/design-explore-3.png")
|
||||
```
|
||||
### Step 6: Iterate or Build
|
||||
|
||||
The user should see the images in the conversation, not have to open files manually.
|
||||
|
||||
### Step 6: Iterate
|
||||
|
||||
The user can:
|
||||
- Pick a direction: "Go with #2 but change the accent to teal"
|
||||
- Refine: generate updated images with the feedback
|
||||
- Move on: "I like this. Let's build it with design-build"
|
||||
|
||||
---
|
||||
|
||||
## DESIGN.md File Format
|
||||
|
||||
DESIGN.md files typically look like:
|
||||
|
||||
```yaml
|
||||
---
|
||||
palette:
|
||||
background: "#FFFFFF"
|
||||
primary: "#007AFF"
|
||||
accent: "#FF9500"
|
||||
text: "#1D1D1F"
|
||||
typography:
|
||||
heading: "SF Pro Display"
|
||||
body: "SF Pro Text"
|
||||
sizes:
|
||||
h1: "48px"
|
||||
h2: "32px"
|
||||
body: "17px"
|
||||
spacing:
|
||||
unit: "8px"
|
||||
section: "80px"
|
||||
radius:
|
||||
button: "12px"
|
||||
card: "16px"
|
||||
input: "8px"
|
||||
shadows:
|
||||
card: "0 2px 8px rgba(0,0,0,0.08)"
|
||||
elevated: "0 8px 24px rgba(0,0,0,0.12)"
|
||||
identity: Clean, minimal, generous white space, Apple-like clarity
|
||||
---
|
||||
```
|
||||
|
||||
But the exact format varies — always read the file contents to know the structure.
|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||
- **awesome-design-md**: https://github.com/VoltAgent/awesome-design-md (55+ design systems)
|
||||
- **getdesign.md**: https://getdesign.md/ (hosted DESIGN.md files)
|
||||
- **image-maker agent**: Uses OpenRouter's gpt-5-image-mini (~4¢/image)
|
||||
User can pick a direction, request tweaks, or run `/design-build` to generate the HTML/Tailwind implementation.
|
||||
|
||||
Reference in New Issue
Block a user