Plan feature UX before coding via a structured design interview that produces an actionable design brief.
Real-world examples
Live HTML demos for this skill — rendered directly in the page. 4 examples.
- 01
Discovery interview round
Phase 1 cadence: 2–3 questions, wait for answers, assert-then-confirm when PRODUCT.md already pins a choice — no menu-with-escape.
- 02
Visual direction probes
Phase 1.5: four distinct probes that differ in hierarchy, density, and color strategy — pick a lane before the brief, not palette tweaks.
- 03
Four color strategies
Restrained / Committed / Full palette / Drenched applied to the same surface — force a per-surface color decision in discovery.
- 04
Design brief & confirm gate
Phase 2 structured brief with confirmation pause — present the brief, stop, and wait for explicit confirm before any craft.
Skill markdown
Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork.
**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good.
**Output**: A design brief that can be handed off to {{command_prefix}}impeccable craft, or directly to {{command_prefix}}impeccable for freeform implementation. When visual direction probes are used, the images are supporting artifacts, not the primary output.
## Philosophy
Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise.
## Phase 1: Discovery Interview
**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later.
This is a required interaction, not optional guidance. Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. {{ask_instruction}}
### Interview cadence
Discovery includes at least one user-answer round unless PRODUCT.md, DESIGN.md, or an already-confirmed brief directly answers the needed inputs. With a sparse prompt, do **not** synthesize a complete brief for confirmation on the first response.
- Use the harness's structured question tool when one exists. Otherwise, ask directly in chat and stop.
- Ask **2-3 questions per round**, then wait for answers.
- Treat PRODUCT.md and DESIGN.md as anchors; they reduce repeated questions but do **not** replace shape for craft. Shape is task-specific.
- One round is the default. Add a second only if the first answers leave material gaps. Don't run a second round just to feel thorough.
- Round 1 should clarify purpose, audience/context, content/scope, and (for brand) visual direction.
- Round 2, when needed, fills in whatever's still genuinely missing.
**Assert-then-confirm, not menu-with-escape.** When PRODUCT.md and the user's prompt make one option obvious, name it and ask the user to confirm or override. Don't enumerate "Restrained / Committed / Or something else?" as a real choice; "This reads as Restrained, confirm?" beats a four-option menu when the answer is already clear.
### Purpose & Context
- What is this feature for? What problem does it solve?
- Who specifically will use it? (Not "users"; be specific: role, context, frequency)
- What does success look like? How will you know this feature is working?
- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?)
### Content & Data
- What content or data does this feature display or collect?
- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items)
- What are the edge cases? (Empty state, error state, first-time use, power user)
- Is any content dynamic? What changes and how often?
- What visual assets are real content here? Note required images, product shots, illustrations, maps, textures, diagrams, generated objects, or existing project assets.
### Design Direction
Force a visual decision on three fronts. Skip anything PRODUCT.md or DESIGN.md already answers; ask only what's missing.
- **Color strategy for this surface.** Pick one: Restrained / Committed / Full palette / Drenched. Can override the project default if the surface earns it (e.g. a drenched hero inside an otherwise Restrained product).
- **Theme via scene sentence.** Write one sentence of physical context for this surface: who uses it, where, under what ambient light, in what mood. The sentence forces dark vs light. If it doesn't, add detail until it does.
- **Two or three named anchor references.** Specific products, brands, objects. Not adjectives like "modern" or "clean."
### Scope
Always ask. Sketch quality and shipped quality are different outputs; don't guess between them.
- **Fidelity.** Sketch / mid-fi / high-fi / production-ready?
- **Breadth.** One screen / a flow / a whole surface?
- **Interactivity.** Static visual / interactive prototype / shipped-quality component?
- **Time intent.** Quick exploration, or polish until it ships?
Scope answers are task-scoped. Don't write them to PRODUCT.md or DESIGN.md; carry them through the design brief only.
### Constraints
- Are there technical constraints? (Framework, performance budget, browser support)
- Are there content constraints? (Localization, dynamic text length, user-generated content)
- Mobile/responsive requirements?
- Accessibility requirements beyond WCAG AA?
### Anti-Goals
- What should this NOT be? What would be a wrong direction?
- What's the biggest risk of getting this wrong?
## Phase 1.5: Visual Direction Probe (Capability-Gated)
After the discovery interview, generate a small set of visua
…More from pbakaus
- AdaptAdapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
- AnimateEnhance UX with purposeful animation and micro-interactions that support usability and delight.
- AuditRun technical UI quality audits across accessibility, performance, theming, responsive behavior, and anti-patterns.
- BolderIncrease visual impact and personality for interfaces that feel too safe, bland, or generic.
- ClarifyImprove labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
- ColorizeIntroduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.