Sam Rolfe
d1bc25c2e0
- Ming (inclusionai/ming-image-0.1-design) is free and built for graphic-design output with legible in-image text; now the preferred mockup model. - Ming is a true image-generation model: the chat/completions endpoint rejects it (HTTP 404). Documented the /api/v1/images call + base64 decode recipe. - Kept paid chat-image models as a documented fallback. - Fixed the API key location: OPENROUTER_API_KEY is in /home/sam/.secrets, NOT ~/.config/environment.d/10-secrets.conf as the old text claimed.
52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
---
|
|
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.
|
|
|
|
> **Image model:** use `inclusionai/ming-image-0.1-design` — it is **free**, and it is specifically built for graphic-design output with legible text rendering inside the image, which is exactly what UI mockups need. It is a true image-generation model and must be called on OpenRouter's `/api/v1/images` endpoint (NOT `/chat/completions`). See the `image-maker` subagent for the exact call.
|
|
|
|
---
|
|
|
|
## 🎨 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`
|
|
|
|
Instruct it to use the free Ming model via the images endpoint.
|
|
|
|
```bash
|
|
Agent(
|
|
subagent_type: "image-maker",
|
|
description: "Generate design mockup images",
|
|
prompt: "Use model inclusionai/ming-image-0.1-design via POST https://openrouter.ai/api/v1/images (free). Generate a high-fidelity UI mockup for {what}. Aesthetic: {vibe/tokens}. Clean browser frame, non-generic layout, bold typography, rich contrast, professional SaaS/web app finish. Save as /tmp/design-explore-<N>.png and report the path.",
|
|
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.
|