About design-taste-frontend
A design skill for coding agents that guides layout, typography, spacing, hierarchy, and motion from the page brief. It emphasizes audience-led choices and avoiding generic AI landing-page patterns.
Key features
- 01Brief-based design direction
- 02Three adjustable design dials
- 03Guidance on hierarchy and motion
- 04Use official design systems when applicable
Use cases
- 01Designing a landing page for a specific audience
- 02Choosing motion and visual density from a brief
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ 0xwilliamortiz/ design-taste --skill design-taste-frontendAfter installing, type/design-taste-frontendin Claude Code to confirm it loaded.
Details
From the project READMETaste 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.