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 |
| Auditing an existing product: personas, journeys, ideal state, gap ledger | Experience audit |
| Platform-neutral principles for an audit or ideal state (HIG-derived) | Universal principles |
| 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.


