SKILL.md

v1.0.0 · 1946 B · text/markdown

---
name: distinctive-ui-design
description: Use when building any user-facing UI - establishes a deliberate aesthetic direction before writing markup, so output doesn't default to generic "AI-generated" looking interfaces
---

# 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.