Taste-Skill: Stopping AI From Generating Boring Frontend

TL;DR

TL;DR: Taste-Skill is an agent skill (28.7k ⭐) that makes AI agents like Codex, Cursor, and Claude Code output frontend with real design language — not generic boilerplate. Install via npx skills add, then prompt normally.

The Problem

AI writes code fast, but the interfaces it produces are… ugly. Not ugly due to bugs — ugly because:

• Layout always looks the same (sidebar + card grid)
• Typography has no clear hierarchy
• Spacing is inconsistent
• Animation is copy-pasted everywhere
• Font is always system-ui, color is always blue-500

This is called “AI slop” — technically valid output that is boring, generic, and has no “taste”.

What Is Taste-Skill?

Taste-Skill is a collection of agent skills for Codex, Cursor, Claude Code, and other AI coding agents. It reads the brief and automatically applies a real design language to the code instead of outputting generic UI.

npx skills add https://github.com/Leonxlnx/taste-skill

Available skills

| Skill | Install name | Description | |---|---|---| | taste-skill | design-taste-frontend | 🆕 v2 (experimental) — reads brief, infers design language, tunes VARIANCE / MOTION / DENSITY | | taste-skill-v1 | design-taste-frontend-v1 | Original v1, preserved for projects depending on exact behavior | | gpt-tasteskill | gpt-taste | Stricter variant for GPT/Codex: higher layout variance, stronger GSAP direction | | image-to-code-skill | image-to-code | Image-first pipeline: generate → analyze → implement | | redesign-skill | redesign-existing-projects | Audit and fix existing project UIs | | soft-skill | high-end-visual-design | Polished, calm, expensive UI with spring motion | | minimalist-skill | minimalist-ui | Editorial Notion/Linear vibes | | brutalist-skill | industrial-brutalist-ui | Swiss type, sharp contrast, experimental layout |

Core concept: the three dials

Taste-Skill v2 operates through 3 tuning knobs:

• VARIANCE — layout has meaningful variation, not repeated patterns
• MOTION — animation is purposeful, with canonical GSAP skeletons
• DENSITY — spacing and typography have clear hierarchy

Agent reads brief → infers design direction → tunes 3 dials → outputs code with real taste.

Setup

1. Install the agent skill

# Install all skills
npx skills add https://github.com/Leonxlnx/taste-skill

# Or install a specific skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

2. Use with Codex / Cursor

With Codex:

codex
# Then paste:
# Follow skill: design-taste-frontend
# Context: build a landing page for an AI writing tool

With Cursor:

/skill design-taste-frontend
build a landing page for an AI writing tool

3. Image-to-Code Workflow

When you want to use reference images:

# 1. Install the skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"

# 2. Prompt ChatGPT Images / Codex Image:
# "create a landing page for an AI writing tool, premium feel, editorial style"

# 3. Feed the image to your coding agent with:
# "analyze this image and implement it in React + Tailwind"

Before and After

Without Taste-Skill

Prompt: create landing page for AI startup

Output: Hero → Features → Pricing → CTA. Functional, but generic and boring.

With Taste-Skill

Prompt:

follow skill: design-taste-frontend
brief: landing page for AI writing startup
direction: editorial, premium, calm
audience: developers and writers

Output: Strong typography hierarchy, whitespace-driven layout, subtle spring animations, real personality.

When to Use

• Use it: new frontend projects where you want design with personality
• Use it: when you’re tired of generic AI output
• Consider: if you just need a quick prototype, it might be overkill
• Skip: pure functional dashboard/admin UI where aesthetics don’t matter

FAQ

Does it cost money? Free, MIT license. Contributions welcome on GitHub.

Does it work with Claude Code? Yes — it reads SKILL.md and applies it to context. No official integration like Codex/Cursor, but the prompts are compatible.

How does it compare to writing a design system from scratch? 10x faster. Taste-Skill is a thin layer between brief and code — not a replacement for a complete design system.

What’s new in v2 vs v1? v2 adds the 3-dial system (VARIANCE/MOTION/DENSITY), brief inference, canonical GSAP code skeletons, and a redesign-audit protocol.

Conclusion

Taste-Skill doesn’t make AI write correct code — it makes AI write better-looking code. With 28.7k GitHub stars and active development, it’s worth trying if you use AI agents for frontend work.

Try npx skills add https://github.com/Leonxlnx/taste-skill → prompt normally → get frontend with taste.