Frontend Design

Match implementation complexity to the vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing and typography.

Quick Start

1. Identify purpose and audience
2. Choose a distinctive aesthetic direction
3. Select fonts, palette, and layout approach that serve that direction
4. Implement production-grade code with the aesthetic baked in — not bolted on
5. Refine details: spacing, transitions, hover states, load sequence

Process

1. Discover — Clarify the interface's purpose, audience, and technical constraints.
2. Direct — Commit to a specific aesthetic tone. Name it explicitly (e.g. "brutalist editorial") so every subsequent choice has a reference point.
3. Compose — Select typography, palette, spatial layout, and motion strategy that reinforce the direction. Each choice should have a reason tied to the concept.
4. Build — Implement working code that is:
   • Production-grade and functional, because prototypes that break on edge cases erode trust in the design itself
   • Visually striking and memorable, because forgettable UI fails its core job of engaging users
   • Cohesive with a clear aesthetic point-of-view, because mixed signals make interfaces feel unfinished
   • Meticulously refined in every detail, because polish is what separates "designed" from "assembled"
5. Verify — Check against Success Criteria below. Adjust until every item passes.

Success Criteria

• Aesthetic direction is nameable and consistent across all elements
• Typography, palette, and layout all reinforce the chosen direction
• No overused defaults (Inter, Roboto, purple gradients, card grids)
• Motion is intentional — enhances comprehension or delight, not decorative noise
• Code is production-grade: accessible, responsive, performant
• Result looks meaningfully different from the last generation

Anti-Patterns