---
name: pi:design-workflow
description: "Design workflow for prototyping, landing pages, dashboards, mobile apps. Uses 5-step process: Discover → Direction → Build → Critique → Export. Triggers on: design, prototype, mockup, landing page, mobile app, UI, wireframe, dashboard."
argument-hint: "[design-type] [context]"
license: MIT
---

# Design Workflow Skill

Agent-native design workflow extracted from Open Design patterns. 
Use when user wants design work (landing page, prototype, dashboard, etc.)

## Trigger Keywords

design, prototype, mockup, landing page, mobile app, UI, wireframe, Figma, dashboard, deck, slide

## Workflow: 5 Steps

### Step 1: DISCOVER
Ask user for brief using this form:

```
<question-form id="design-brief">
{
  "description": "Design brief — 30 seconds to lock the direction",
  "questions": [
    {
      "id": "taskType",
      "label": "What should I build?",
      "type": "radio",
      "required": true,
      "options": ["Prototype", "Landing page", "Slide deck", "Dashboard", "Mobile app", "Other"]
    },
    {
      "id": "audience",
      "label": "Who is this for?",
      "type": "text",
      "placeholder": "e.g. early-stage investors, dev-tools buyers"
    },
    {
      "id": "brand",
      "label": "Brand context",
      "type": "radio",
      "options": [
        { "label": "Pick direction for me", "value": "pick_direction" },
        { "label": "I have a brand spec", "value": "brand_spec" },
        { "label": "Match a reference", "value": "reference_match" }
      ]
    },
    {
      "id": "scale",
      "label": "Roughly how much?",
      "type": "text",
      "placeholder": "e.g. 8 slides, 1 landing + 3 pages, 4 mobile screens"
    },
    {
      "id": "constraints",
      "label": "Any constraints?",
      "type": "textarea",
      "placeholder": "Audience, format, length, references, things to avoid..."
    }
  ]
}
</question-form>
```

### Step 2: DIRECTION
If user chose "Pick direction for me", present 5 visual schools:

| School | Mood | Fonts | Palette |
|--------|------|-------|---------|
| **Editorial Monocle** | Print-magazine, generous whitespace | Iowan Old Style + system | Neutral paper + ink + editorial red |
| **Modern Minimal** | Software-native, precise | SF Pro + system | Crisp whites + cobalt accent |
| **Warm Soft** | Approachable, friendly | Plus Jakarta Sans + system | Warm cream + coral/sage |
| **Tech Utility** | Dense, information-focused | JetBrains Mono + system | Dark bg + electric accent |
| **Brutalist Experimental** | Raw, bold, unconventional | Archivo Black + system | High contrast + neon |

### Step 3: BUILD

1. Set up project folder
2. Create HTML with design system CSS
3. Use appropriate template pattern
4. Generate artifact

Design System CSS pattern:
```css
:root {
  --bg: oklch(98% 0.004 95);
  --surface: oklch(100% 0.002 95);
  --fg: oklch(20% 0.018 70);
  --muted: oklch(48% 0.012 70);
  --border: oklch(90% 0.006 95);
  --accent: oklch(52% 0.10 28);
}
```

### Step 4: CRITIQUE (5 Dimensions)

1. **Philosophy** — Does it match brand/audience?
2. **Visual Hierarchy** — Is information structured correctly?
3. **Detail Execution** — Are elements polished?
4. **Functional** — Does it work across devices?
5. **Innovation** — Does it feel fresh, not generic?

### Step 5: EXPORT

Formats: HTML (primary), PDF, PPTX, MP4

## Design Systems Available

Use these as starting points:
- Linear, Vercel, Stripe, Notion (minimal)
- Apple, Airbnb, Tesla (product)
- Anthropic, Figma, Supabase (tech)
- Or create custom with OKLch palette

## Commands

```
/design         - Start design workflow
/design-brief   - Show brief form
/design-dir     - Show direction options
/design-build   - Build with current brief
```

## Anti-AI-Slop Checklist

- [ ] No generic stock-photo aesthetic
- [ ] Typography is intentional (not just "elegant")
- [ ] Colors have semantic purpose, not decoration
- [ ] Layout creates hierarchy, not just fills space
- [ ] Interaction states are designed, not missing