Files

Sam Rolfe d1bc25c2e0 design-explore/image-maker: use free Ming Image 0.1 Design via /api/v1/images

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

2026-09-27 18:36:21 +10:00

2.6 KiB

Raw Blame History

name, description

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

"What are we designing?" — Description of the interface or page.
"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)

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.

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)

Save generated images to /tmp/design-explore-<N>.png.
Call read on each image file so Pi displays them inline in the chat.
Ask the user for feedback or proceed to /design-build to generate the code.

2.6 KiB Raw Blame History