Distinctive UI Design

Left to defaults, generated UIs converge on the same look: Inter font, generic rounded cards, a blue-to-purple gradient, evenly-spaced grids of identical boxes. This skill forces a deliberate aesthetic choice before any component gets written.

Before writing any markup

1. Name the audience and purpose. A developer tool, a consumer landing page, and an internal admin panel should not look the same.
2. Pick one aesthetic direction on purpose — not a blend of five. Some starting points: brutalist (raw, high-contrast, exposed structure), editorial (serif type, generous whitespace, magazine-like hierarchy), dense/utilitarian (information-first, minimal chrome, for power users), playful (asymmetry, saturated color, motion), luxury/minimal (restraint, negative space, a single accent color used sparingly).
3. Pick a type scale and a font pairing deliberately. Avoid defaulting to Inter/Roboto/system-ui for everything — a considered choice, even a simple one, reads as more intentional than the default.
4. Decide where motion earns its place — not everywhere. A hover state, a page transition, a loading state; each should have a reason.

Guardrails

• Consistency matters more than variety within one product: once a direction is picked, apply it everywhere, don't mix aesthetics per page.
• Accessibility is not optional under a chosen aesthetic — contrast ratios and keyboard navigation apply regardless of how bold the visual direction is.
• If the user has an existing design system, match it — this skill is for greenfield work or explicit redesigns, not for imposing a new aesthetic on an established product.