/octopus-ui-ux-design

name: octopus-ui-ux-design
description: "Design UI/UX systems with style guides, palettes, typography, and component specs for new interfaces"
disable-model-invocation: true

> **Host: Codex CLI** — This skill was designed for Claude Code and adapted for Codex. > Cross-reference commands use installed skill names in Codex rather than `/octo:*` slash commands. > Use the active Codex shell and subagent tools. Do not claim a provider, model, or host subagent is available until the current session exposes it. > For host tool equivalents, see `skills/blocks/codex-host-adapter.md`.

EXECUTION CONTRACT (MANDATORY - CANNOT SKIP)

<HARD-GATE> **CRITICAL: You MUST call the BM25 search engine (search.py) via native shell command tool before producing any design recommendations. Do NOT rely solely on your own design knowledge. The search engine provides curated, data-driven design intelligence. If you produce a design system without at least 3 search.py calls, you have violated this contract.** </HARD-GATE>

This skill uses **ENFORCED execution mode**. You MUST follow this exact sequence.

STEP 1: Interactive Questions (BLOCKING)

**You MUST call AskUserQuestion before any other action.**

AskUserQuestion({
  questions: [
    {
      question: "What type of product are you designing for?",
      header: "Product Type",
      multiSelect: false,
      options: [
        {label: "SaaS/Dashboard", description: "Analytics, admin panels, B2B tools"},
        {label: "E-commerce", description: "Shopping, marketplace, product pages"},
        {label: "Landing page", description: "Marketing, conversion, product launch"},
        {label: "Mobile app", description: "iOS/Android native or responsive"}
      ]
    },
    {
      question: "What tech stack are you using?",
      header: "Stack",
      multiSelect: false,
      options: [
        {label: "React + Tailwind (Recommended)", description: "React/Next.js with Tailwind CSS"},
        {label: "React + shadcn/ui", description: "React with shadcn component library"},
        {label: "HTML + Tailwind", description: "Static or server-rendered HTML"},
        {label: "Vue/Nuxt", description: "Vue.js or Nuxt framework"}
      ]
    },
    {
      question: "What design deliverables do you need?",
      header: "Deliverables",
      multiSelect: true,
      options: [
        {label: "Design tokens", description: "Colors, spacing, typography as CSS/Tailwind config"},
        {label: "Component specs", description: "Component anatomy, states, props"},
        {label: "Page layouts", description: "Wireframe-level layout specifications"},
        {label: "Style guide", description: "Visual style direction with rationale"}
      ]
    },
    {
      question: "How adventurous should the design be?",
      header: "Dials",
      multiSelect: false,
      options: [
        {label: "Conservative (v3 m2 d4)", description: "Familiar patterns, minimal motion — enterprise, gov, finance"},
        {label: "Balanced (v5 m4 d5)", description: "Contemporary but safe — most SaaS and product work"},
        {label: "Expressive (v7 m6 d5)", description: "Distinctive direction, noticeable motion — marketing, launch pages"},
        {label: "Maximal (v9 m8 d6)", description: "Take real aesthetic risks — portfolios, creative brands"}
      ]
    }
  ]
})

The dial answer maps to `--variance/--motion/--density` values (v/m/d above) passed to every `search.py` call and stated in the design direction. When the user's brief already names a visual style (for example, "brutalist", "playful", or "corporate"), skip the Dials question and infer all three values from that style. Record the inferred values. If an explicit user answer is also available, the explicit user answer takes precedence over the inferred values. Otherwise, ask the Dials question normally.

All three dial values MUST be integers from 1 through 10. Use these presets when inferring from named styles; choose the closest row for synonyms and record the selected row with the values:

| Style cues | Variance | Motion | Density | |---|---:|---:|---:| | Corporate / enterprise / conservative | 3 | 2 | 4 | | Clean / modern / balanced | 5 | 4 | 5 | | Playful / expressive / retro | 7 | 6 | 5 | | Brutalist / maximal / experimental | 9 | 8 | 6 |

Validate the range before every `search.py` call. If an explicit or inferred value is missing, non-numeric, or outside 1-10, stop and obtain a valid value rather than clamp it.

STEP 2: Display Banner

**MANDATORY: You MUST use the native shell command tool to run this provider check BEFORE displaying the banner. Do NOT skip it. Do NOT assume availability.**

bash "${HOME}/.claude-octopus/plugin/scripts/helpers/check-providers.sh"

**Use the ACTUAL results below. PROHIBITED: Showing only "🔵 Claude: Available ✓" without listing all providers.**

🐙 **CLAUDE OCTOPUS ACTIVATED** - UI/UX Design Mode
🎨 Design: [Brief description from user prompt]

Pipeline:
🔍 Phase 1: Design Research (BM25 search + context detection)
🎯 Phase 2: Design Direction (synthesis + style selection)
🐙 Phase 2b: Design Critique (adversarial review before committing)
🛠️ Phase 3: Design System (tokens, components, layouts)
✅ Phase 4: Validation (accessibility, handoff specs)

Providers:
🔴 Codex CLI: [Available ✓ / Not installed ✗] — Implementation critique
🟡 Antigravity CLI: [Available ✓ / Not installed ✗] — Ecosystem critique
🧭 Antigravity CLI: [Available ✓ / Not installed ✗] — Additional external-model challenge
🔵 Claude (Sonnet): Available ✓ — Design + independent critique

Tools:
🔍 BM25 Design Intelligence: [checking...]
🎨 Figma MCP: [Available / Not configured]
🧩 shadcn MCP: [Available / Not configured]

STEP 3: Check Design Intelligence

SEARCH_PY="${HOME}/.claude-octopus/plugin/vendors/ui-ux-pro-max-skill/src/ui-ux-pro-max/scripts/search.py"
if [ -f "$SEARCH_PY" ]; then
    python3 -c "import csv, re, math" 2>/dev/null && echo "READY"