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
```bash

### 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

```bash
# 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"
```bash

### 2. Use with Codex / Cursor

With Codex:

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

With Cursor:

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

### 3. Image-to-Code Workflow

When you want to use reference images:

```bash
# 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"
```bash

## 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:

```text
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.