---
name: design-explore
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 UI mockups. Asks the user what to design, pulls design tokens or style references, and calls `image-maker` to produce high-fidelity mockup images.

---

## 🎨 Visual System & Image Prompting Rules

- **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.

---

## 🛠 Flow

### 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
```

### Step 3: Call `image-maker`

```bash
Agent(
  subagent_type: "image-maker",
  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 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.