/ Directory / Playground / Taste Skill
← All servers ↗ GitHub
● Community Leonxlnx ⚡ Instant

Taste Skill

by Leonxlnx · Leonxlnx/taste-skill

Encodes design taste — typography, spacing, color, composition rules — so Claude stops shipping generic-looking UI and produces work that reads as senior.

Taste Skill is a small, opinionated set of rules that pre-empts the most common AI design mistakes: too many fonts, body text at 14px on a marketing site, three competing accents, hero stack that looks like Bootstrap 4 in 2018. It runs as a review-and-rewrite step over generated UI, applying its rules and explaining why. Usable in any agent that supports skills.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

ready

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "taste-skill-leon": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ],
      "_inferred": true
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "taste-skill-leon",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Leonxlnx/taste-skill",
        "~/.claude/skills/taste"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json
{
  "context_servers": {
    "taste-skill-leon": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Leonxlnx/taste-skill",
          "~/.claude/skills/taste"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add taste-skill-leon -- git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Taste Skill

Review a Claude-generated landing page through the taste filter

👤 Any dev shipping a marketing page Claude built ⏱ ~30 min intermediate

When to use: First-cut output looks fine but unmemorable.

Prerequisites
  • Skill installed — git clone https://github.com/Leonxlnx/taste-skill ~/.claude/skills/taste
Flow
  1. Critique
    Use taste-skill on /pages/landing.tsx. List every taste violation with severity and the rule it broke.✓ Copied
    → 10–20 violations, each tagged
  2. Fix tier-1
    Apply only severity-high fixes. Don't change copy — only visual/structural.✓ Copied
    → Diff applied; site no longer screams 'generic'
  3. Iterate
    Re-run critique on the result. Stop when only tier-3 nitpicks remain.✓ Copied
    → Converges in 2 passes

Outcome: A page that reads as crafted, not generated.

Pitfalls
  • Skill forces a style that fights brand — Pass --brand /design/brand.md so it respects guardrails
Combine with: filesystem

Audit a single component for taste issues

👤 Devs touching design system ⏱ ~15 min beginner

When to use: Before shipping a new component into the system.

Flow
  1. Critique
    Run taste-skill on /components/Card.tsx. Any taste issues at the component level?✓ Copied
    → Issues with quoted lines
  2. Variant check
    Compare hover, focus, and disabled states for visual coherence.✓ Copied
    → Drift detected if any

Outcome: Component ships with fewer 'why does that look weird' tickets.

Pitfalls
  • Critique ignores intentional design choices (e.g. brutalist style) — Pass --style brutalist or similar to relax some rules

Use taste-skill to set a baseline for a new design system

👤 Teams just starting a new product ⏱ ~60 min intermediate

When to use: You're choosing a token scale, font, palette and want a sane default.

Flow
  1. Generate baseline
    Generate a baseline taste-aligned token set — type, spacing, color — for a SaaS dashboard.✓ Copied
    → tokens.json with rationale per choice
  2. Stress test
    Generate sample pages (login, dashboard, settings) using the baseline. Critique your own output.✓ Copied
    → Pages + self-critique with possible refinements

Outcome: A defensible starting point you didn't have to negotiate with stakeholders.

Pitfalls
  • Generated baseline is too 'safe' — Provide brand inputs (mood, references) so output isn't bland
Combine with: design-extract-mcp

Combinations

Pair with other MCPs for X10 leverage

taste-skill-leon + design-extract-mcp

Pull tokens from a reference site, then run taste-skill to refine

Extract tokens from https://linear.app, then run taste critique on a page using them.✓ Copied
taste-skill-leon + filesystem

Persist critiques as design review records

Save each critique to /design/reviews/$(date +%F)-<page>.md.✓ Copied

Tools

What this MCP exposes

ToolInputsWhen to callCost
critique path_or_url, brand? Pre-ship review 0
fix path, severity_threshold After critique, target tier-1/2 0
baseline context: {product, audience} Cold-start a design system 0

Cost & Limits

What this costs to run

API quota
N/A
Tokens per call
Moderate — full-page critique is 5–10k tokens
Monetary
Free
Tip
Critique component-level is cheaper than full-page; iterate that way

Security

Permissions, secrets, blast radius

Minimum scopes: filesystem-read filesystem-write
Credential storage: None
Data egress: Local

Troubleshooting

Common errors and fixes

Critique returns no violations on obviously generic UI

Skill may be in 'lenient' mode — pass --strict

Fix breaks layout

Run with --diff-preview first, apply selectively

Conflicts with brand guidelines

Pass brand markdown via --brand so skill respects exceptions

Alternatives

Taste Skill vs others

AlternativeWhen to use it insteadTradeoff
stevembarclay/pencilplaybookYou want UI design taste rooted in Pencil's productSpecific to Pencil; taste-skill is general
Just a brand.md promptYou only ship one productWon't catch the AI-generic patterns this skill is shaped against

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills