pi-skill/skills/design-workflow/SKILL.md

name, description, argument-hint, license

name	description	argument-hint	license
pi:design-workflow	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.	[design-type] [context]	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:

: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