UI/UX Visual Design and Layout

Purpose

Create a visual system that serves the product, content, users, and platform. A polished result is not enough; the composition must be explainable, repeatable, accessible, and robust with realistic content. The user owns the product expression: do not replace their brand, taste, domain conventions, or explicit direction with a preferred design framework.

User-owned direction

Treat the user's request, existing brand, audience, domain, and platform as the source of visual intent. If direction is unresolved, present a small set of genuinely different, explainable options with trade-offs and recommend one; do not silently converge on a fashionable default. If direction is already clear, refine it rather than reopening style decisions. Record the selected direction and rejected alternatives in the review artifacts so the user can change it before implementation.

For a sparse product brief with no brand direction, recommend one provisional, product-shaped visual direction and explain its hierarchy, functional benefit and anti-goals; do not stop to ask for generic style preferences. Present alternatives or ask only when direction is a material user-owned choice that cannot be inferred safely. Mark the recommendation as agent-provided and preserve the user’s review/override before implementation.

Procedure

Read layout-checklist.md when composing or reviewing screens. Read token-contract.md only when the design-system feature is enabled, tokens cross surfaces, or design-to-code mapping needs an explicit contract. When brand-identity is selected, read brand identity source adapter and use brand-identity-brief.md as the output shape; load neither for ordinary UI screens. When the user explicitly requests an Anthropic Frontend Design lens or source-grounded visual self-critique, read UPSTREAM.md, then its local SKILL.md; it is optional source material, not a style default. When information-explanation is selected, read Diagram Design UPSTREAM.md, then its lazy type atlas index, and only the selected type guide/example. When reference-study is selected after plan review, read Garden reference-study upstream, then its INDEX.md, then one selected recipe only; read a second recipe solely as a named contrast alternative. Treat it as a bounded adaptation lens, never a default, template, component library, asset source, or license to reproduce an anchor's marks, photography, trade dress, or layout. When the user or approved design-system plan explicitly selects Ramps, read Ramps source adapter before requesting/snapshotting a source response. Do not load every reference in every task.