taste

Give your agent taste.

An MCP server for Claude Code, Codex and Cursor. One link condenses 14 of the most-starred design repos into rules, art directions, an AI-slop audit and a component finder. Your agent follows them while it builds, so the first draft stops looking generated.

claude mcp add --scope user --transport http taste https://agent-taste.vercel.app/mcp

Run it once in your terminal. Every Claude Code session in every project then starts with the taste rules loaded.

The link itself: https://agent-taste.vercel.app/mcp

The endpaper behind this page is marbled fresh on every visit, drop by drop, with the real marbling equations, in this page's own inks. Move your pointer through it to comb the ink.

Same prompt, one link apart.

Default is what an agent ships on its own. With taste is the same hero after the MCP's brief, a direction and an audit pass. Switch directions underneath to restyle it with the real tokens pick_direction returns.

Default
✨ AI-Powered Platform

Unlock the Power of Seamless Invoicing 🚀

Elevate your workflow with our cutting-edge, AI-driven platform. Revolutionize the way you get paid.

Get StartedLearn More
⚡Lightning FastBlazing fast performance
🔒SecureEnterprise-grade security
📈ScalableGrows with your business
audit_ui --/100
With taste, in Stationery Desk
PricingSign in

Send the invoice before the client forgets the work.

Turn a tracked week into a clean invoice in two clicks. Penny follows up on late payments politely, so you never have to.

Create your first invoiceSee a sample invoice
audit_ui --/100

Direction: loading

Penny is a made-up product for this demo. Scores are real: both panes are run through audit_ui when the site builds.

What changes after you paste it.

The server's instructions join your agent's context the moment it connects. When a task touches UI, it runs the loop on its own.

  1. you

    Build the landing page for Penny, invoicing for freelancers. Next.js and Tailwind.

  2. taste_brief

    Surface: landing. Product type: invoicing and finance, so trust, clarity and real numbers. Suggested direction plus two alternatives, the 25 rules, and the section order for this category.

  3. pick_direction

    Commits to one direction: fonts, light and dark tokens checked to WCAG AA, radius, motion curve, and the one signature move.

  4. write_design_md

    Saves DESIGN.md at the repo root, so tomorrow's session builds in the same style.

  5. builds

    Writes app/page.tsx with the tokens, real copy and every state.

  6. audit_ui

    62/100. Gradient headline text, transition-all, three identical feature cards, off-grid spacing.

  7. fixes

    Reworks the three findings, screenshots at 390 and 1440px, checks against the review guide.

  8. audit_ui

    94/100. Reports the direction it chose and why.

Nine tools, three prompts.

Your agent calls these on its own. You can also run the prompts as slash commands: /mcp__taste__design, /mcp__taste__critique, /mcp__taste__polish.

ToolWhat it gives your agent
taste_briefThe starting brief for any UI task: direction, what this product category needs, the non-negotiables, surface and stack notes, and the build loop.
pick_direction24 art directions with real fonts, contrast-checked light and dark tokens, shape, motion and a signature move.
write_design_mdA DESIGN.md in Google's format so the taste persists across sessions, agents and teammates.
audit_ui55 detectors for AI-looking code plus palette, spacing, radius and type-scale sprawl checks, scored out of 100, with a fix for each finding.
find_components331 components from React Bits, Magic UI and Canvas UI, with the exact install command.
search_design_dbUI UX Pro Max's database: product types, styles, palettes, font pairings, landing patterns, UX rules, plus per-framework rules for 22 stacks.
get_brand_reference84 real product design systems (Linear, Stripe, Vercel and more) as DESIGN.md, to study rather than copy.
get_guide19 condensed guides, from typography to motion to the pre-ship review.
list_sourcesWhere every rule came from, and how to install the original when you want the full depth.

Condensed from fourteen repos.

Read, deduplicated and rewritten as terse rules with numbers. Each one is credited, and each is worth installing on its own when you need more depth.

  1. 1UI/UX Pro Max SkillA searchable design database: 190+ product types mapped to styles, landing patterns and palettes, 70+ font pairings, 100+ UX rules and per-framework guidance. Bundled here and searchable with search_design_db.★ 140.6k · MIT
  2. 2Awesome DESIGN.md70+ DESIGN.md files that document real products' design systems (Linear, Stripe, Vercel...). Fetched live by get_brand_reference.★ 123.6k · MIT
  3. 3Open DesignA local design workspace for agents (prototypes, sites, decks) plus a craft library: typography, colour, accessibility, state coverage, anti-slop rules. Its craft rules are condensed into the foundation guides.★ 104.1k · Apache-2.0
  4. 4Taste SkillArt direction, references and a visual check in the browser: tells, type, colour, layout, copy and critique references. Condensed into anti-slop and the foundation guides.★ 102.7k · MIT
  5. 5ImpeccableRules and commands to spot AI-looking UI and fix it, with a detector engine. Its patterns power audit_ui and the workflow guide.★ 88.4k · Apache-2.0
  6. 6React Bits215+ animated React components (text, backgrounds, effects). Searchable with find_components.★ 50.2k · MIT + Commons Clause
  7. 7Skills for Designers and EngineersEmil Kowalski's skills for animation and small UI details: easing, durations, origin-aware motion, edge cases. Condensed into motion and native-feel.★ 49.7k · MIT
  8. 8HallmarkDeals one of 48 themes, picks from 21 page shapes and runs hard checks in a real browser so pages don't look machine-made. Its themes, shapes and gates shape pick_direction, layouts and review.★ 35k · MIT
  9. 9Google DESIGN.mdOne file that describes a whole design system for agents, with a linter. write_design_md emits it.★ 28.5k · Apache-2.0
  10. 10Magic UIAnimated components and effects you copy into your app via shadcn. Searchable with find_components.★ 22.9k · MIT
  11. 11GSAP SkillsOfficial GreenSock skills: core, timelines, ScrollTrigger, React and performance. Condensed into gsap-scroll.★ 17.2k · MIT
  12. 12Scroll WorldOne skill that turns a brand into a 3D fly-through landing page scrubbed by scroll (needs paid video-generation credits and ffmpeg). Summarised in gsap-scroll.★ 10.5k · MIT
  13. 13Canvas UI35 WebGL and WebGPU effects running over real, clickable HTML, installed through a shadcn registry. Searchable with find_components.★ 5.1k · MIT + Commons Clause
  14. 14Dimensional DrawingTurns a UI component into an Apple-style technical drawing with paddings, gaps and radii. Summarised in dimensional-drawing.★ 715 · MIT

The 25 rules it never lets go of.

These ride along in your agent's context the whole session. Everything else in the kit elaborates one of them.

Decide before you draw

  1. Write the one-line brief first: who it is for, and the one thing the screen must make them feel or do. If you cannot write it, ask before building.
  2. Commit to one direction (pick_direction) with a named signature move: a type treatment, a layout idea, a material, a motion moment. Generic is what a non-decision looks like.
  3. DESIGN.md is law. If the repo has one, follow it. If it does not, write one (write_design_md) before the second screen, so every later session builds in the same style.

Type

  1. Two families at most (plus an optional mono). Inter, Roboto, Arial or bare system-ui as the only face reads as "default"; if you keep a neutral sans for UI, pair it with a display face that has a voice, or set it with conviction (tight tracking, big size contrast).
  2. Use a modular scale: about 1.2 for apps, 1.25 to 1.333 for marketing. Display tracking -0.02em to -0.04em; body 0. All-caps only for short functional labels (table headers, tags) at 11 to 12px with +0.06em to +0.1em; never a tiny tracked-caps eyebrow above every heading.
  3. Readable text: body 16 to 18px on the web (13 to 14px only for dense app UI), line-height 1.5 to 1.65 for body and 1.05 to 1.2 for headings, line length 45 to 75 characters. Tabular numerals wherever numbers align.
  4. Hierarchy comes from size and weight, not colour. Three weights at most.

Colour

  1. Tinted neutrals plus one accent. Give the grey ramp a slight warm or cool hue, and keep the accent to roughly 10% of the screen: primary action, focus, the key datum.
  2. No pure #000 on #fff: use near-black (#111 to #1c1c1c) and an off-white. Text contrast 4.5:1, large text and UI parts 3:1.
  3. No purple-to-blue gradients, no gradient-filled headline text, no rainbow glows. A gradient is fine when it stays in one hue family (a few % of lightness) or is part of the actual brand.
  4. Dark mode is not inverted: raise surfaces with lighter tones instead of shadows, desaturate the accent a little, and use off-white text (about #e6e6e6), not #fff.

Layout and space

  1. 4px grid. Scale 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Section padding 96 to 160px on desktop, 56 to 96px on mobile.
  2. Proximity groups things: the space inside a group is at most half the space between groups.
  3. Few alignment edges. Left-align text by default; centre only short hero lines and single CTAs.
  4. Break the template. Avoid hero, three identical icon cards, logo strip, testimonials, CTA in that order. Vary section anatomy, use asymmetry, and give each screen one oversized element.
  5. Contain it: page content about 1200 to 1280px wide, text columns 600 to 720px.

Surfaces and components

  1. One shape family: two or three radii, and a nested radius equals the outer radius minus the padding. Separate with borders or with shadows, not both at full strength; shadows are soft, layered, low opacity and tinted toward the background.
  2. Icons: one family, one stroke width (1.5px at 24px), sized to the text they sit beside. Never emoji as UI icons.
  3. Every control has hover, focus-visible (2px ring, 2px offset), active (scale 0.97 or one shade darker) and disabled states. Touch targets are at least 44px.
  4. Design the states, not only the happy path: empty (with a first action), loading (skeletons shaped like the content), error (what happened and how to fix it), success.

Motion

  1. Animate to explain change, not to decorate. 150 to 250ms for UI and 300 to 500ms for large surfaces; ease-out on enter, for example cubic-bezier(0.23, 1, 0.32, 1); never ease-in for UI; animate transform and opacity only; never transition: all; honour prefers-reduced-motion.
  2. One signature motion moment per page. No bouncing or pulsing CTAs, and no fade-up on every section.

Copy and content

  1. Specific beats clever: name the user, the job and the number. Banned: "Unlock", "Elevate", "Seamless", "Revolutionize", "Supercharge", "cutting-edge", "In today's fast-paced world", and a "Get Started" plus "Learn More" pair.
  2. Real content only: real product screenshots, realistic data, honest proof. No lorem ipsum, no invented logos, stats or testimonials.

Verify

  1. It is not designed until you have looked at it. Screenshot at 390px and 1440px, squint for a single focal point, run audit_ui, fix, and look again.

Read the guides.

Each one is also plain Markdown, and taste.md has every guide in a single file. If you'd rather not run an MCP, point your agent at that URL.