Design UI

██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗      ██╗   ██╗██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║      ██║   ██║██║
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║█████╗██║   ██║██║
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║╚════╝██║   ██║██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║      ╚██████╔╝██║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝       ╚═════╝ ╚═╝

Design UI with taste (anti-slop)

Default AI design fails because it reaches for statistical clichés. This skill replaces "looks fine" with deliberate, checkable taste. The premise: bad AI UI is predictable, so the fixes can be mechanical.

Start with a Design Read + dials

Before any markup, state one line: "Reading this as a <page kind> for <audience>, vibe <word>, leaning <direction>." Then set three dials (1-10) and let them drive choices:

• DESIGN_VARIANCE — low = clean/centered; high = asymmetric/editorial
• MOTION_INTENSITY — low = hover/focus transitions only; mid = entrance + scroll reveals; high = scroll-scrub/parallax/magnetic
• VISUAL_DENSITY — low = spacious; high = dense dashboard

The dials are constraints, not decoration — let the value gate the technique: MOTION_INTENSITY ≤ 3 → no scroll-jacking/parallax, hover/focus only; VISUAL_DENSITY ≤ 3 → generous whitespace, one primary action per view. If a choice violates its dial, change the choice.

Commit to one direction

Pick a single aesthetic and execute it fully — minimalist editorial (Notion/Linear), high-end agency, brutalist/industrial, etc. Averaging directions produces mush. If the user hasn't chosen, propose one with rationale.

Mechanically-checkable anti-slop bans

These are the AI tells; treat them as hard checks, not suggestions:

• No em-dash in UI copy. Binary ban — not "use sparingly." (Em-dashes are the #1 AI-text tell.)
• No Inter/Roboto as the default font, and no system-font-stack-by-default. Use ≥2 deliberate weights/sizes from a stated type scale (name the ratio, e.g. 1.25).
• No AI-purple / generic gradient-on-white hero. No #8B5CF6-family default gradients.
• No three-equal-cards row as the default content layout.
• Eyebrow restraint: at most ~1 uppercase-tracked "eyebrow" label per 3 sections. Count them; if more, cut.
• Kill the cheap defaults — by rendered property, not framework class: no hairline neutral-gray 1px border on every surface; no single uniform low-opacity drop shadow on everything (shadow-md-equivalent); no default linear/ease-in-out timing. Use intentional borders, layered/soft shadows, and ≥1 custom easing or spring. (Tailwind names are just examples — the rule is the rendered property, so it applies equally on vanilla CSS, styled-components, SwiftUI, etc.)

Verify visually — never ship CSS blind

Render the real view (dev-preview harness + headless browser / Playwright with system Chrome), then re-read the screenshots — don't infer from CSS. Make it a mechanical gate: capture at 390 / 768 / 1280 px widths, save to a scratch dir, and forbid "done" unless those files exist and you've inspected them for spacing, hierarchy, contrast, overflow, and small-screen fit. A screenshot you never open is not verification. (This is forge:verify applied to pixels.)

Pre-flight gate

Before "done," tick: direction committed · type deliberate · spacing rhythm consistent · hierarchy clear · states (hover/focus/empty/error) handled · responsive checked · text contrast ≥ 4.5:1 (WCAG AA) on the rendered output · visible focus ring on every interactive element · all motion gated behind prefers-reduced-motion: no-preference · all bans above honestly clear · rendered-and-eyeballed. If any box can't be honestly ticked, it isn't finished.

Note

For reference-image-first workflows (generate comps, then build to match), the tasteskill:imagegen-* and tasteskill:image-to-code skills complement this — this skill is the code-side taste enforcer.