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.
Based on Leonxlnx/taste-skill.
The rule
Do not default to:
- purple / indigo gradients
- three equal feature cards
- Inter + slate-900
- centered hero + mesh background
- generic glassmorphism
Read the brief first. Infer the page kind, audience and vibe. Then build.
Three dials
Set these before writing code:
| Dial | Low | High |
|---|---|---|
| DESIGN_VARIANCE | Clean, centered | Asymmetric, experimental |
| MOTION_INTENSITY | Hover only | Scroll, magnetic, cinematic |
| VISUAL_DENSITY | Airy, gallery | Dense, packed |
How the agent should work
- Output a one-line design read: "Reading this as: [page] for [audience], [vibe], leaning toward [system/aesthetic]."
- Set the three dials.
- Prefer real design systems when they fit (Fluent, Material, Carbon, Primer, shadcn, Tailwind…).
- Ship the full UI — no placeholder comments, no half-finished sections.
- Run a pre-flight check before declaring done.
When to use
- Landing pages, portfolios, marketing sites, redesigns
- Any time the agent keeps producing the same boring AI look
- When you want the interface to feel intentional
Install
Full setup (recommended)
git clone https://github.com/0xwilliamortiz/taste-skill.git
cd taste-skill
npm install -g .
taste-skill