lev-design

name	lev-design
description	[WHAT] UX-first design workflow from problem framing to wireframes [HOW] 7-step agentic pipeline with parallel research and framework-driven analysis [WHEN] Use when starting new features, redesigns, or product discovery requiring structured UX thinking [WHY] Design is late-stage compression - must understand users, jobs, tasks, and structure before drawing rectangles Triggers: "design", "ux", "wireframe", "user flow", "screen", "interface", "prototype"
skill_type	workflow
category	process-design
lifecycle_integration	{"stage":"crystallizing","input_artifact":"idea.md | report.md","output_artifact":"wireframe.v1.json + SYNTHESIS.md"}
required_skills	["lev-research","lev-find","interview"]
related_skills	["design-to-bd","lev-cdo","sidequest"]
protocol_handlers	["lev://design?mode={auto|full|step}","/ux","/ux full"]
plankton	false

lev-design - UX-First Design Pipeline

Lev Concept

What is this? A 7-step agentic workflow that transforms product ideas into validated wireframes. Each step uses specialized frameworks and produces machine-readable artifacts.

Why does it exist? Design is a late-stage compression step. UX teams don't start with screens - they start by understanding problems, jobs, tasks, and information architecture. This skill encodes that process.

When to use it:

• Starting a new feature
• Redesigning existing flows
• Product discovery
• Mobile/desktop app design
• Dashboard/admin UI design

When NOT to use it:

• Simple bug fixes → Just fix it
• Copy changes → Direct edit
• Already have wireframes → Skip to implementation

---

The 7 Steps

User Request
    ↓
[1. Problem Framing]     ← First Principles, Constraints
    ↓
[2. Jobs to Be Done]     ← JTBD, MBTI User Types
    ↓
[3. Task Decomposition]  ← State Machines, Failure Modes
    ↓
[4. Information Arch]    ← DDD, Entity-Relationship
    ↓
[5. Interaction Models]  ← FSM, Accessibility
    ↓
[6. Component Intent]    ← Atomic Design, I/O Contracts
    ↓
[7. Wireframes]          ← Gestalt, Cognitive Load
    ↓
Design Artifacts + SYNTHESIS.md

---

CLI Usage

# Auto mode - runs all 7 steps without stopping
/ux "Design the onboarding flow for OpenClaw iOS app"

# Interactive mode - asks questions at each step
/ux full "Design the settings screen"

# Jump to specific step (with prior context)
/ux step 4 --context ./ux-2026-02-01/

# Compare wireframes to current implementation
/ux compare ./ux-2026-02-01/ ./apps/ios/Sources/

---

Team Structure

Each step spawns:

3 Research Agents (Parallel):

• Codebase patterns (Explore)
• Documentation/decisions (Explore)
• Industry best practices (general-purpose + web)

3 Skill Phases (Sequential):

• Framework Application
• Artifact Generation
• Validation

---

Artifacts Produced

./ux-{date}/
├─ problem_spec.yaml      # Step 1
├─ jobs.graph.json        # Step 2
├─ task_graph.json        # Step 3
├─ ia_schema.json         # Step 4
├─ interaction_fsm.json   # Step 5
├─ component_intents.yaml # Step 6
├─ wireframe.v1.json      # Step 7
├─ SYNTHESIS.md           # Human summary
└─ COMPARISON.md          # vs current (if exists)