Add design-explore skill — image mockups with optional DESIGN.md tokens

2026-06-27 12:28:14 +10:00
parent b22bbf15f3
commit 19135e10c2
1 changed files with 136 additions and 0 deletions
--- a/skills/design-explore/SKILL.md
+++ b/skills/design-explore/SKILL.md
@@ -0,0 +1,136 @@
+---
+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.
+---
+
+# /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.
+
+## 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? 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
+
+### Step 2: If DESIGN.md URL provided, extract tokens
+
+Download the DESIGN.md file:
+
+```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.
+
+### Step 3: Build the image prompt
+
+Combine the user's design description with the extracted tokens into a detailed prompt:
+
+```
+Design prompt for {what}: {user's description}
+
+Design system tokens to follow exactly:
+- Color palette: {extracted palette}
+- Typography: {extracted fonts}
+- Border radius: {extracted radius values}
+- Spacing: {extracted spacing}
+- Visual identity: {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
+```
+
+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",
+  description: "Generate design mockups",
+  prompt: <the full image prompt from step 3>,
+  max_turns: 3
+)
+```
+
+The image-maker will generate images via OpenRouter's image models.
+
+### Step 5: Show images inline
+
+When images are generated:
+1. Save them to `/tmp/design-explore-<N>.png`
+2. Use the `read` tool to display them — images appear inline in the pi conversation
+3. Present them to the user: "Here are 3 design concepts. Which direction do you like?"
+
+### 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)