UI Design

UI Design

Owns everything that touches the built artifact: pick the visual direction, implement it in code, and audit what shipped.

• IS: choosing visual direction (palettes, type scales, tokens, layout systems, CRO strategy, brand boards), building UI in code, and auditing built React or Next frontends for user-facing defects with file:line evidence, applied fixes, and a ship verdict.
• IS NOT: deciding what an interface should do before it exists (use product-design); non-UI correctness and code quality (use tidy); agentic-app review (use ax-audit); deep typography or motion passes (use typography-audit, ui-animation); the wording of a string (use ghostwriter).

Contents

• Routing boundary
• Modes
• Direction mode
• Extract mode
• Build mode
• Audit mode
• Other modes
• Quality Bar
• Verify
• Gotchas
• Sources
• Related skills

Routing boundary

product-design owns action semantics, scope, reversibility, and contested state choices. ui-design builds and styles those states. ui-animation owns timing, gestures, and measured motion. A routine missing loading or error state stays with the UI build; a gesture replacing a control needs a product decision and an accessible alternative before its physics.

For brand positioning, identity changes, or a system spanning campaigns and physical applications, that is out of scope; name the open brand question and apply the identity the company already has. Direction mode applies that identity to UI; it does not reopen an approved brand.

Before choosing styles, read the project's existing design.md, design-system.md, or brand guide when present. Check its scope and source against the implemented theme; report drift instead of creating a second competing specification.

Modes

Resolve one mode before acting, and load only that mode's files.

No mode named? Build if the target does not exist. Audit if it does and no change was requested. Resolving "look at this page" or "can you improve this checkout" to Build silently skips the rule run, which is the most expensive mistake this table prevents.

Named chrome fixes still audit. "Feel native on mobile" runs existing mobile-* rules (viewport, hover-only actions) and ui-animation for press and hover gating. It does not go to Retrofit or Build. Retrofit's "fix this on mobile" is layout.

Direction and Build chain: for a new surface with no direction, run Direction first (or propose one inline for small surfaces), then Build. If a direction already exists in the project, go straight to Build. Extract chains ahead of both on an existing codebase: a direction chosen without knowing what the project already uses is a second design system, not a direction.

Direction mode

A decision skill. It does ONE thing: choose the visual system. It writes no markup; the build is Build mode's job.

Output a decision set: a one-sentence visual thesis (mood, material, energy), palette as CSS variables, type pairing and scale, spacing grid, radius and depth strategy, the layout pattern for the primary surface, and for conversion pages the section sequence, CTA plan, and proof placement. Close against the Quality Bar, then hand off to Build.

Pick a track

Tie-breakers: a marketing site for a SaaS product is the marketing track; the app behind the login is product. Design them separately. Convert a stranger = marketing; let an operator work = product.

Shared foundations (load with either track)

• direction/aesthetic-direction.md: AI-slop signals, restraint philosophy, reference products, polish details. Direction mode reads it after the track pick; Build and the Deslop scope load it first, with no track pick.
• direction/design-in-code.md: low-fi ASCII wireframing and the copy-what-works workflow. Read before building a new surface from scratch.

Marketing references (conversion pages only)

Load when the marketing track has a conversion goal. Skip for pure brand/portfolio work and all product UI.

For "create a brand kit" or a brand direction board, load direction/brand-kit-prompt.md; its Rendering section covers the imagegen handoff and the text-only fallback.

Extract mode

A recording skill. It does ONE thing: read an existing codebase and write down the design decisions it already contains, as a durable design-system.md the other modes consume.

The guidelines defer to "what the project already does" constantly and cannot resolve it themselves; this mode is the answer they read. Load references/design-system-extract.md and nothing else. Five things go in the artifact: which theme source the build actually honours, the scales as used rather than as declared, the component inventory, the conventions in force, and the documented exceptions. Values, not prose.