tastemaker

A skill that gives AI real design taste, so the UI it builds does not look AI-generated.

Quick start  ·  Why  ·  Features  ·  Presets  ·  How it works  ·  Contributing

See it live and try the demo →

What this is

Tastemaker is a skill for coding agents (Claude Code, Cursor, Windsurf). You install it once and forget it. Whenever you ask your agent to build or style a UI, tastemaker steps in and gives it a real design system to work from, instead of the generic defaults every model reaches for.

It is plain Markdown and small Python scripts. Everything runs on your machine. There is no hosted backend, no account, and no API key.

Why AI UI all looks the same

Ask any model to build a UI and you tend to get the same thing: an indigo to purple gradient, a soft shadow card, a generic hero. This is not a prompting problem. It happens because the model has to invent taste from a text description, with nothing real to ground it and no memory of what you actually like.

Tastemaker fixes this with three ideas, not a bigger pile of presets:

1. Ground in real pixels, not words. Give it a screenshot or a reference and it reads the real colors and contrast from the actual image, using a script. It does not write a vague summary of the vibe and rebuild from that. Text summaries lose most of what made the reference feel specific.
2. Remember, do not re-derive. Once a project locks a style, every later screen reuses it. Nothing drifts. Across projects, a small profile file learns what you keep and what you reject, so your next project starts warm.
3. Scope to the real work. It reads your spec first and figures out which screens actually need design, instead of dumping a design system that has nothing to do with what you are shipping.

Quick start

Install it into your Claude Code skills folder:

git clone https://github.com/codeswithroh/tastemaker ~/.claude/skills/tastemaker

Restart Claude Code, then just ask:

build a landing page for a coffee subscription

Tastemaker triggers on its own. It picks a palette and type pairing, sources real assets, wires up motion, and builds. You do not invoke anything.

Using Cursor or Windsurf? Drop the same folder into their skills directory.

For the deterministic color extraction script you need Python 3 and Pillow (pip install Pillow). If Pillow is missing, it falls back to a vision based read instead of failing.

What you get

The five presets

When you have no reference to work from, tastemaker reads your app idea and picks a matched set. It never asks you to fill in a color form.

Each palette is checked for WCAG AA contrast on both body text and button labels before it ships. Every font is a Google Font, so there is no licensing question.

How it works

1. Read the idea      references, or the app concept itself
2. Lock the style     palette and type, contrast checked, written to a lock file
3. Source assets      photos, illustrations, icons, logo, favicons, in one pass
4. Build the screens  visual first, motion wired in, checked against an anti-slop list
5. Remember taste     what you keep rolls into a profile for the next project

The full workflow lives in SKILL.md. The reference files in references/ hold the deep material and are read only when a step needs them.

Read the story

I wrote up why I built this and how it works:

Every AI built site looks the same, so I built a skill that locks taste before any code is written

Project layout

tastemaker/
├── SKILL.md                     the workflow, read this first
├── references/                  palettes, patterns, motion, asset sourcing, checklists
├── scripts/                     palette extraction, contrast check, asset fetch, recolor
├── assets/                      GSAP motion starter and a dependency free fallback
└── site/                        the marketing site and live demo

Contributing

Contributions are very welcome. Bug reports, new presets, better docs, and new patterns all help.

Please read CONTRIBUTING.md before you start, and see the Code of Conduct. Good first issues are labeled good first issue.

If tastemaker saved you from one more indigo gradient, a star helps other builders find it.

License

MIT. Use it freely, including in commercial work.