designing-uilisted

# Designing UI ## Overview This skill guides design-first UI development — the discipline of thinking about what you're building and why before writing component code. It covers design thinking, accessibility, visual fundamentals, and the process of building consistent UI across teams — with or without a formal design system. The universal fundamentals (typography, color, motion) are a shared *baseline* so the whole team converges instead of each inventing their own. The **"Building Consistency Without a Design System"** process is the core: extract the conventions the codebase already has, keep new work inside them, and let developers review UI without a designer in the loop. **Brownfield rule:** If the project has an established design system, component library, or style guide, follow it. Do not introduce new patterns, colors, spacing, or component variants without explicit approval. The guidance below applies to new projects or where the project has no established visual direction. ## Design Thinking — Before You Code Before writing any component code, answer these questions. Write the answers down (in a spec, a comment, or a message to the user). ### 1. Purpose What problem does this UI solve? Who uses it? What's the one thing they need to accomplish? If you can't answer in one sentence, the scope is too broad — narrow it before designing. ### 2. Tone and aesthetic direction Commit to a specific aesthetic. "Clean and modern" is not a direction — it's the absence