Installs just this skill. Get the whole plugin for auto-invocation.
⚡ How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/skill-ui-ux-design
👁️ Context preview
The summary Claude sees to decide when to auto-load this skill.
Design UI/UX systems with style guides, palettes, typography, and component specs for new interfaces
📊 Stats
Stars3,869
Forks362
LanguageShell
LicenseMIT
📦 Ships with octo
</> SKILL.md
skill-ui-ux-design.SKILL.md
---name: octopus-ui-ux-design
aliases:
- design-ui-ux
- ui-ux-design
- design
- ui-design
- ux-design
description: "Design UI/UX systems with style guides, palettes, typography, and component specs for new interfaces"
context: fork
agent: Explore
task_management: true
execution_mode: enforced
pre_execution_contract:
- interactive_questions_answered
- visual_indicators_displayed
- design_intelligence_checked
validation_gates:
- search_py_executed
- design_spec_produced
invocation: human_only
trigger: |
Use this skill when the user wants to "design a UI", "create a design system",
"pick a color palette", "choose fonts for", "design a dashboard", "create component specs",
"style guide for", or "UI/UX for my app".
Execution: BM25 search via search.py + Claude synthesis with ui-ux-designer persona
paths:
- "**/*.tsx"
- "**/*.jsx"
- "**/*.vue"
- "**/*.svelte"
**This step runs automatically when the provider check in Step 2 detected 3 or more available providers (counting Claude as always available).** When fewer than 3 providers are available, skip to Step 5 and use standard single-direction mode.
Dispatch the same design brief to multiple providers in parallel. Each provider generates an independent design direction without seeing the others' work.
**Launch 3+ variant agents in parallel using the Agent tool with `run_in_background: true`:**
Each agent receives:
```
Design a visual direction for: [user's product description]
Product type: [from Step 1]
Stack: [from Step 1]
Search context: [key findings from Step 4 BM25 searches]
Produce:
1. A style name (2-3 words, e.g., "Warm Minimalism", "Bold Industrial", "Soft Gradient")
2. Primary color palette (3-5 colors with hex values)
3. Font pairing (heading + body)
4. Layout philosophy (e.g., "generous whitespace with card-based content")
5. One paragraph describing the overall feel
Be distinctive — take a clear position rather than playing it safe.
```
**Dispatch to different providers for maximum diversity:**
- 🔴 Codex: implementation-pragmatic direction (what builds fast and scales)
- 🟡 Gemini: trend-aware direction (what's current in the design ecosystem)
- 🔵 Claude: user-centered direction (what serves the audience best)
- 🟤 OpenCode / 🟢 Copilot / 🟣 Qwen: additional variants if available
**After all variants return, present a comparison board:**
{label: "Mix & match", description: "Take elements from multiple variants"}
]
}]
})
```
**After selection, proceed to Step 5 using the chosen variant as the design direction.** If "Mix & match", ask which elements to combine before proceeding.
---
### STEP 5: Phase 2 — Define (Design Direction)
Synthesize search results (and chosen variant if shotgun mode) into a design direction document:
1. **Style recommendation** — which visual style best fits the product (cite search results)
2. **Color palette** — selected palette with hex values and contrast ratios
3. **Typography** — heading + body font pairing with Google Fonts import
**This step runs by default.** Before committing to the design direction, it must survive adversarial critique from up to three independent perspectives. This catches accessibility failures, impractical choices, and BM25 blind spots before they get baked into tokens and components.
**Critique prompt** (sent to all participants):
```
Review this proposed design direction and find problems. Be adversarial — your job is to catch flaws, not validate choices.
[The full design direction from Step 5]
Critique dimensions:
1. ACCESSIBILITY — Do the proposed colors meet WCAG AA contrast ratios (4.5:1 text, 3:1 large text)? Are the font sizes readable at the proposed scale? Are touch targets viable?
2. PRACTICALITY — Does this typography actually render well on the stated tech stack? Are the fonts available and performant (file size, loading)? Does the spacing scale work with the layout system?
3. FIT — Does the visual style actually match the product type and audience? Would a user of [product type] feel comfortable with this aesthetic?
4. GAPS — What did the research miss? Are there common UX patterns for this product type that aren't addressed? Are there competitive norms being ignored?
For each issue found, state: what's wrong, why it matters, and what to do instead.
**🔵 Claude (Sonnet) — independent design critique.** You MUST also write your own adversarial critique. Do NOT just summarize what external providers said. Approach the design direction as if you didn't create it — actively look for problems across all four dimensions. This is your independent synthesis perspective, same as in `/octo:debate`.
**Display all critiques with provider indicators:**
```
🔴/🧭/🟡 **External Provider Critique:** [implementation, ecosystem, accessibility, and alternative approach concerns]
If only 1-2 providers are available, run with what you have. Even Claude-only critique (minimum case) is valuable because you're explicitly switching from "designer who made the choices" to "reviewer finding problems."
**After collecting all critiques, synthesize and revise:**
1. **Triage issues** — group by severity (must-fix, should-fix, acknowledged trade-off)
