/ 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

Author repository · Claude Skills documentation

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.

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

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Shared context · output

Caveman

Skill

Browse all topic collections → · See 29 new official additions →