
taste-skill v2: the anti-slop frontend skill with 3 dials and a 60-item preflight check
`taste-skill v2` (Leonxlnx/taste-skill, 33K stars, MIT, ~190K total installs) is the most-adopted independent frontend design agent skill — banning Inter, purple gradients, and centered hero sections via three numeric dials (DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY) and a 60-item Pre-Flight Check. The article covers the 3-dial control system, the mandatory §0 Brief Inference declaration, all 13 sub-skills in the collection, four install paths, real community feedback from @marchelfah / @JeffKazzee / @Govind755, and six concrete limitations including the 87KB/~20K token overhead, experimental v2 status, React/Next.js + Tailwind v4 only stack, excluded UI categories (dashboards, data tables, forms), missing a11y subsystem, and single-maintainer bus factor.

리서치 브리프
taste-skill v2: anti-slop frontend for AI agents
Leonxlnx/taste-skill, 33K stars, MIT) 1 takes a different approach from Anthropic's own frontend-design skill. Rather than telling the agent to "be creative" or "pick an extreme aesthetic," it encodes design quality as numbered dials, hard bans, and a 60-item preflight checklist the agent must pass before outputting any code. The SKILL.md weighs in at 87 KB and consumes roughly 20,000 tokens per session load. For the right use case, that overhead buys you a frontend that doesn't look like it came off an AI assembly line.
The 3-dial control system
| Dial | What it controls | Default |
|---|---|---|
DESIGN_VARIANCE | How experimental the layout is: grid breakouts, asymmetry, off-canvas elements | 8 |
MOTION_INTENSITY | Animation depth: scroll triggers, pinned sections, magnetic hover, GSAP sequences | 6 |
VISUAL_DENSITY | Information density on screen at any one point | 4 |
8 / 6 / 4) target a mainstream SaaS landing page or portfolio. Before generating any code, v2 requires the agent to declare a one-line design read:"Reading this as: B2B SaaS landing for technical buyers, with a Linear-style minimalist language, leaning toward Tailwind utilities + Geist + restrained motion." 3
DESIGN_VARIANCE > 4. Three equal-width feature cards are banned regardless of dial values. Setting MOTION_INTENSITY > 4 requires real animations: you cannot output a static page with a high motion dial. Every animation also needs a one-line justification: "If you cannot articulate the reason in one sentence, drop the animation." 3What v2 added beyond v1
- §0 Brief Inference: reads the project brief and maps it to a design direction before generating
- §2 Design System Map: routes the inferred direction to an existing system (Material, Fluent, Carbon, Polaris) as a reference anchor
- §8 Dark Mode Protocol: explicit rules for dark-mode color handling, not left to agent judgment
- §13 Out of Scope: lists what taste-skill will not handle (details below)
- §14 Pre-Flight Check: 60+ boolean checks covering dial values, hero CTA visibility, color consistency, animation motivation, and more
13 sub-skills at a glance
| Skill name | Install name | Best for |
|---|---|---|
| taste-skill (v2) | design-taste-frontend | Default: landing pages, portfolios, SaaS marketing |
| taste-skill-v1 | design-taste-frontend-v1 | Pin to stable v1 behavior while v2 iterates |
| gpt-tasteskill | gpt-taste | GPT/Codex: higher layout variance, more aggressive anti-slop |
| image-to-code-skill | image-to-code | Generate a reference image first, then code from it |
| redesign-skill | redesign-existing-projects | Audit and fix layout/spacing/hierarchy on existing projects |
| soft-skill | high-end-visual-design | High-end, expensive-feeling UI with generous whitespace |
| output-skill | full-output-enforcement | Stops agents from producing placeholder or partial output |
| minimalist-skill | minimalist-ui | Notion/Linear-style editor-product UI |
| brutalist-skill | industrial-brutalist-ui | Swiss typography, sharp contrast, industrial visual language |
| stitch-skill | stitch-design-taste | Google Stitch-compatible rules with a DESIGN.md export |
| imagegen-frontend-web | imagegen-frontend-web | Website design reference images (hero, landing, multi-section) |
| imagegen-frontend-mobile | imagegen-frontend-mobile | Mobile UI concept images |
| brandkit | brandkit | Logo direction, color palette, typography, brand applications |
taste-skill as the default: "Start with taste-skill for the safest general default." 1Install paths
# Full collection (all 13 skills)
npx skills add https://github.com/Leonxlnx/taste-skill
# Single skill — specify by install name
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
# Upgrade from v1 to v2 — same command, install name unchanged, SKILL.md replaces in place
npx skills add https://github.com/Leonxlnx/taste-skill
# Pin to v1 if you need stable behavior
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"npx skills CLI (part of vercel-labs/agent-skills) handles the disk install, but the content itself is a Markdown file. 1How to invoke it with real prompts
Build a landing page for a productivity tool targeting indie developers.
Use the taste-skill. DESIGN_VARIANCE 7, MOTION_INTENSITY 4, VISUAL_DENSITY 3./redesign-existing-projects — audit this homepage and fix the layout/spacing hierarchy.
Do not change colors or content, only structural issues.- taste-skill: sets the overall design direction and layout rules
- Impeccable (an agent skill with 23 design directives): polishes typography and spacing details
- Emil Kowalski (an animation-focused agent skill): adds motion depth
.claude/ and activate via separate slash commands.Real output: the Floria demo

DESIGN_VARIANCE > 4 bans the centered default), the heading uses a display serif instead of Inter, and the page rotates through at least three layout families on scroll. A second showcase, Collective OS, applies the same skill to a technical product UI.Community reception
design-taste-frontend sits at #222 with 31,700 installs, and the full collection totals roughly 190,000 installs across all sub-skills. 6 For context, Anthropic's frontend-design skill sits at #3 with 341,400 installs, so taste-skill reaches about 55% of that volume as an independent project.Limitations and when to skip it
reference/ files to allow selective loading, but it remains open. 10LAYOUT_VARIANCE in one place instead of DESIGN_VARIANCE. 10 Pin to design-taste-frontend-v1 if you need stable behavior across a long project.- Dashboards and BI pages
- Data tables
- Multi-step forms
- Code editors
- Native mobile apps
- Realtime collaboration UIs
@phosphor-icons/react, Radix UI icons, and Motion (formerly Framer Motion) imports. 3 Svelte, Vue, Angular, and Solid.js have no first-party variant. A community issue (#35) requesting a Svelte 5 port has not shipped. 10npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Repo: github.com/Leonxlnx/taste-skill | Site: tasteskill.dev참고 출처
- 1GitHub — Leonxlnx/taste-skill
- 2Taste Skill — The Anti-Slop Frontend Framework for AI Agents
- 3taste-skill SKILL.md (v2 experimental)
- 4taste-skill CHANGELOG.md
- 5X/Twitter — taste-skill community discussion
- 6skills.sh — The Agent Skills Directory
- 7taste-skill examples directory
- 8Developers Digest — Taste Skills Are Turning Agent Review Into Infrastructure
- 9Trendshift — Leonxlnx/taste-skill
- 10GitHub Issues — Leonxlnx/taste-skill
- 11Claude Code Marketplaces — design-taste-frontend
이 콘텐츠를 둘러싼 관점이나 맥락을 계속 보강해 보세요.