133 lines
3.9 KiB
Markdown
133 lines
3.9 KiB
Markdown
---
|
|
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
|