Design Taste Frontend

---
name: design-taste-frontend
description: Anti-slop frontend skill. Stops AI from shipping generic purple-gradient UI. Reads the brief, sets design dials, ships interfaces with real hierarchy, type, spacing and motion.
---

# Taste Skill

> If your UI looks like every other AI landing page, this skill is for you.

Gives coding agents actual design taste. Stronger layout, typography, spacing, hierarchy and motion — instead of the default AI template.

Inspired by the open Taste Skill design principles.

## The rule

Do not default to purple gradients, three equal cards, Inter + slate-900, mesh heroes, or generic glassmorphism.

Read the brief first. Infer page kind, audience and vibe. Then build.

## Three dials

| Dial | Low | High |
|------|-----|------|
| **DESIGN_VARIANCE** | Clean, centered | Asymmetric, experimental |
| **MOTION_INTENSITY** | Hover only | Scroll, magnetic, cinematic |
| **VISUAL_DENSITY** | Airy, gallery | Dense, packed |

## How to apply

1. Before any code, produce a one-line design read: page kind + audience + vibe + foundation direction.
2. Set the three dials from the brief. Keep every subsequent decision consistent with those values.
3. Prefer real visual hierarchy, type scale, spacing rhythm and intentional motion over decorative effects.
4. Reject the familiar AI landing-page template (hero + three equal feature cards + gradient mesh + Inter + slate).
5. When the brief maps to an official design system, reach for the official package instead of inventing tokens.

Motion should be intentional and sparse unless the brief asks for cinematic energy. Type and color must serve the actual audience, not a default AI palette.