design-taste-frontend

Original：🇺🇸 English

Translated

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.

96installs

Source0xwilliamortiz/design-taste

Added on2026-08-10

NPX Install

npx skill4agent add 0xwilliamortiz/design-taste design-taste-frontend

SKILL.md Content

View Translation Comparison →

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

Before any code, produce a one-line design read: page kind + audience + vibe + foundation direction.
Set the three dials from the brief. Keep every subsequent decision consistent with those values.
Prefer real visual hierarchy, type scale, spacing rhythm and intentional motion over decorative effects.
Reject the familiar AI landing-page template (hero + three equal feature cards + gradient mesh + Inter + slate).
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.