UI/UX Design: Intent Discovery, Patterns & Product Vocabulary

Activates by change surface when:

• User's design direction is vague ("깔끔하게", "모던하게", "just make it look good")
• Building onboarding, empty state, error state, or loading state UI
• User references a product aesthetic ("Notion 느낌", "Linear처럼")
• Starting a new design system or generating a color palette
• Choosing layout patterns or navigation architecture
• Setting up favicons, product logos, or brand identity elements
• Handling logo dark mode variants, OG images, or social sharing meta

Read this before style-specific references when the user cannot articulate a clear design direction. For rendered anti-slop tell detection and implementation-level banned patterns, defer to dev-frontend/references/core/anti-slop.md, especially the 2026 gradient budget and one-note theme bans. This skill owns concept/taste-level anti-slop judgment (is this direction generic or domain-wrong?).

Use dev for work class, fast paths, rule classes, family invariants, proof and safety; current evidence: conditional routes.

Use browser fetch/open/text/get-dom/snapshot only after candidate URLs exist.

Modular References

Condition	Reference
Every design task: role boundary, rule classes and implementation handoff	Role boundaries
User-facing decision points	Lazy-user gate
Vague design direction or no brief	Intent discovery
New pages/components/layouts: before frontend code	Design Read
Concept generation before implementation	Concept procedure
After concept lock: production assets	Asset handoff
Choosing iconography during Design Read	Icon strategy
Styles, product references, typography, palette, states, IA, branding, Korean UI or pre-delivery checks	Topic index

UX State Contract (UX-STATE-01)

For onboarding, empty, loading, error, or progressive-disclosure work, the body must answer the state meaning before styling. Deep patterns live in references/ux-states.md.

• Onboarding teaches the first meaningful action, not the whole product.
• Empty explains why the state exists and names the next action.
• Loading chooses skeleton for known structure, spinner/progress for short unknown waits, and avoids fake completion.
• Error exposes retry, recovery, or escalation; never dead-end the user.
• Progressive disclosure names what stays hidden, why it stays hidden, and where it becomes available.

IA Chooser (UX-IA-01)

Default navigation architecture by work shape; read references/responsive-nav.md for responsive details.

Work shape	Default IA
Dense desktop repeated work	Sidebar + command palette
Medium sectioned work	Tabs or segmented navigation
Mobile-primary consumer flow	Bottom nav, sheet, or thumb-zone actions
Wizard/auth/setup	Stepper or stacked linear flow

2.5 Visual Concept Exploration (UX-CONCEPT-GEN-01, DEFAULT)

Before implementing a C2+ expressive or brand-visible surface, read the concept procedure.