pi-config/skills/design-explore/SKILL.md

name, description

name	description
design-explore	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. 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

Step 1: Gather requirements

Ask the user two questions:

1. "What are we designing?" — Free text description of the interface, page, or component.

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:

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

Agent(
  subagent_type: "image-maker",
  description: "Generate design mockups",
  prompt: <the full image prompt from step 3>,
  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.