Taste Skill Frontend Design

---
name: taste-skill-frontend-design
description: Gives AI coding agents premium frontend design taste — stops generic, boring, template-looking UI by enforcing modern layouts, typography, motion, and visual quality.
triggers:
  - make my UI look better
  - improve the design of my frontend
  - stop generating generic looking interfaces
  - give my app premium design quality
  - redesign this component with good taste
  - make this look modern and polished
  - apply good design principles to my code
  - fix the boring slop UI my AI keeps generating
---

# Taste Skill

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A collection of `SKILL.md` files you drop into your project to give AI coding agents (Cursor, Claude Code, Codex, etc.) strong frontend design taste. Instead of producing generic, template-looking UI, the AI will produce modern, premium interfaces with proper typography, spacing, motion, and visual hierarchy.

---

## What It Does

Taste Skill is not a library or framework — it's a set of instruction files your AI reads and follows. Each skill file teaches the AI a specific design philosophy:

| Skill | Purpose |
|---|---|
| `taste-skill` | Core design skill: layout, typography, color, spacing, motion |
| `redesign-skill` | Audits and upgrades existing projects |
| `soft-skill` | Premium/luxury feel: fonts, whitespace, spring animations, depth |
| `output-skill` | Prevents lazy output: no placeholders, no skipped blocks |
| `minimalist-skill` | Notion/Linear-style editorial UI: monochrome, serif contrast, bento grids |

---

## Installation

### Step 1: Copy the skill file into your project

```bash
# Clone the repo
git clone https://github.com/Leonxlnx/taste-skill.git

# Copy the skill you want into your project root
cp taste-skill/SKILL.md ./SKILL.md

# Or for a specific skill
cp taste-skill/redesign-skill/SKILL.md ./SKILL.md
cp taste-skill/soft-skill/SKILL.md ./SKILL.md
cp taste-skill/minimalist-skill/SKILL.md ./SKILL.md
cp taste-skill/output-skill/SKILL.md ./SKILL.md

You can also copy multiple skills and reference them by name:

project/
├── SKILL.md              ← main taste-skill
├── REDESIGN_SKILL.md     ← redesign-skill
├── OUTPUT_SKILL.md       ← output-skill
└── src/

Step 2: Reference the skill in your AI tool

Cursor:

@SKILL.md redesign this hero section

Claude Code:

Read SKILL.md and follow it. Now redesign the landing page hero.

Codex / any agent:

Follow the rules in SKILL.md. Rewrite src/components/Hero.tsx.

That's it. No installs, no config files, no dependencies.

Configuration (taste-skill only)

Open SKILL.md and edit the three settings at the top of the file:

DESIGN_VARIANCE: 7
MOTION_INTENSITY: 5
VISUAL_DENSITY: 3

DESIGN_VARIANCE (1–10)

Controls how experimental and asymmetric the layout is.

MOTION_INTENSITY (1–10)

Controls how much animation is added.

VISUAL_DENSITY (1–10)

Controls how much content appears per screen.

Example config for a luxury SaaS landing page:

DESIGN_VARIANCE: 8
MOTION_INTENSITY: 6
VISUAL_DENSITY: 2

Example config for a data dashboard:

DESIGN_VARIANCE: 3
MOTION_INTENSITY: 2
VISUAL_DENSITY: 9

Skill-by-Skill Usage

taste-skill (main)

Use this when building new UI from scratch.

@SKILL.md Build a pricing section for a SaaS product called "Volta".
Use DESIGN_VARIANCE: 7, MOTION_INTENSITY: 5, VISUAL_DENSITY: 3.

What the AI will produce (React/Tailwind example):

// The AI will write something like this instead of a generic table
export function PricingSection() {
  return (
    <section className="py-32 px-6 bg-neutral-950">
      <div className="max-w-5xl mx-auto">
        <p className="text-xs uppercase tracking-widest text-neutral-500 mb-4">
          Pricing
        </p>
        <h2 className="text-6xl font-semibold text-white leading-[1.05] mb-20">
          Simple,<br />honest pricing.
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-neutral-800">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className="bg-neutral-950 p-10 flex flex-col gap-8 hover:bg-neutral-900 transition-colors duration-300"
            >
              <div>
                <p className="text-neutral-400 text-sm mb-1">{plan.name}</p>
                <p className="text-5xl font-semibold text-white">${plan.price}</p>
                <p className="text-neutral-500 text-sm mt-1">/month</p>
              </div>
              <ul className="flex flex-col gap-3 flex-1">
                {plan.features.map((f) => (
                  <li key={f} className="text-neutral-300 text-sm flex items-start gap-2">
                    <span className="text-emerald-400 mt-0.5">↗</span>
                    {f}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3 border border-neutral-700 text-white text-sm hover:bg-white hover:text-black transition-all duration-200">
                Get started
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

redesign-skill

Use this when you have existing code that looks bad and want the AI to audit and fix it.

@REDESIGN_SKILL.md Here is my current Dashboard.tsx. Audit it and fix the biggest design problems.

The AI will:

1. Identify the worst visual issues (generic colors, poor spacing, bad typography)
2. Prioritize fixes by visual impact
3. Rewrite the component with improvements applied

soft-skill

Use this when you want a premium, expensive-feeling UI.

@SOFT_SKILL.md Build a hero section for a luxury skincare brand.

What soft-skill enforces:

• Premium fonts (e.g. font-['Playfair_Display'], font-['Inter'])
• Massive breathing whitespace (py-48, gap-24)
• Layered card depth (shadow-2xl, backdrop-blur)
• Spring-based animations (Framer Motion type: "spring")
• Floating navigation bars
• Bans: default blue buttons, generic sans-serif, card borders without depth

// soft-skill will push the AI to write motion like this
import { motion } from "framer-motion"

<motion.div
  initial={{ opacity: 0, y: 40 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ type: "spring", stiffness: 60, damping: 20, delay: 0.2 }}
  className="text-8xl font-['Playfair_Display'] leading-none tracking-tight"
>
  Effortless<br />beauty.
</motion.div>

minimalist-skill

Use this for Notion/Linear-style editorial interfaces.

@MINIMALIST_SKILL.md Build a project management dashboard in Notion/Linear style.

What minimalist-skill enforces:

• Warm monochrome palette (#1a1a1a, #f5f0eb, #e8e3dd)
• Typographic contrast: serif headings + clean sans body
• Massive whitespace
• Flat bento grid layouts
• Hairline borders (border border-stone-200)
• Muted pastel accents only
• Bans: gradients, heavy shadows, generic SaaS card patterns, colorful CTAs

// minimalist-skill output example
<div className="min-h-screen bg-[#f5f0eb] font-['Inter']">
  <div className="max-w-4xl mx-auto py-24 px-8">
    <h1 className="font-['Playfair_Display'] text-5xl text-[#1a1a1a] mb-2 leading-tight">
      Your projects
    </h1>
    <p className="text-[#8a8070] text-sm mb-16">3 active · Last updated today</p>

    <div className="grid grid-cols-2 gap-px bg-[#d4cfc9]">
      {projects.map((p) => (
        <div key={p.id} className="bg-[#f5f0eb] p-8 hover:bg-[#eee9e3] transition-colors">
          <p className="text-xs text-[#a09880] uppercase tracking-widest mb-4">{p.status}</p>
          <h3 className="text-xl text-[#1a1a1a] font-medium mb-2">{p.name}</h3>
          <p className="text-sm text-[#6b6355]">{p.description}</p>
        </div>
      ))}
    </div>
  </div>
</div>

output-skill

Use this when the AI keeps writing placeholder comments or skipping code.

@OUTPUT_SKILL.md Now write the complete CartPage.tsx — no placeholders, no "// rest of code here".

Output-skill enforces:

• No // ... or // TODO in generated output
• No // rest of the implementation shortcuts
• No skipped imports or incomplete JSX
• Every function body fully written
• Every component fully rendered

Combine it with other skills:

@SKILL.md @OUTPUT_SKILL.md Build a complete checkout flow: CartPage, CheckoutPage, and ConfirmationPage.
Write every file in full.

Common Patterns

Use multiple skills together

@SKILL.md @OUTPUT_SKILL.md 
Build a full landing page for a developer tool. 
Sections: Hero, Features (bento grid), Pricing, Footer.
DESIGN_VARIANCE: 7, MOTION_INTENSITY: 6, VISUAL_DENSITY: 3
Write every section completely.

Redesign a specific component

@REDESIGN_SKILL.md 
Here is my current Button.tsx and Card.tsx. 
They look generic. Audit them and rewrite with proper depth, spacing, and hover states.

Apply a style to a whole page

@SOFT_SKILL.md @OUTPUT_SKILL.md
Rewrite pages/index.tsx with premium design quality.
This is for a high-end B2B SaaS product targeting enterprise customers.

Target a specific stack

@SKILL.md
I'm using Next.js 14, Tailwind CSS, and Framer Motion.
Build a testimonials section. Use scroll-triggered animations.
MOTION_INTENSITY: 8

Troubleshooting

The AI ignored the skill file

• Make sure you're referencing the file directly: @SKILL.md in Cursor, or explicitly saying "read and follow SKILL.md" in Claude/Codex.
• Some agents need the instruction in the system prompt or rules file. In Cursor, add Always follow SKILL.md when writing frontend code to .cursorrules.

The output still looks generic

• Check your DESIGN_VARIANCE setting — if it's set to 1–3, the AI will intentionally produce standard layouts.
• Add @OUTPUT_SKILL.md to prevent the AI from cutting corners.
• Be explicit: "Do not use generic card patterns. Do not use blue as a primary color. Follow SKILL.md strictly."

The AI writes placeholders anyway

• Add @OUTPUT_SKILL.md to your prompt.
• Say explicitly: "Write every line of code. No comments like '// rest of code'. No placeholder text."

Animations aren't showing up

• Make sure framer-motion is installed: npm install framer-motion
• Check MOTION_INTENSITY — if it's below 4, animations will be minimal by design.

The minimalist skill is adding gradients

• Remind the AI: "Follow MINIMALIST_SKILL.md strictly. No gradients. No colored shadows."

File Structure Reference

taste-skill/
├── SKILL.md                    ← main taste-skill (copy this one first)
├── redesign-skill/
│   └── SKILL.md
├── soft-skill/
│   └── SKILL.md
├── output-skill/
│   └── SKILL.md
├── minimalist-skill/
│   └── SKILL.md
├── examples/
│   ├── floria-top.webp
│   └── floria-bottom.webp
└── research/                   ← background research that informed the skills

Quick Reference

Links

• GitHub: github.com/Leonxlnx/taste-skill
• Author: @lexnlin on X
• Contact: hello@learn2vibecode.dev