Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Tastemaker — Anti-"AI slop" UI Design Engine

A design workflow skill that grounds UI in real reference pixels and per-project style memory so your app stops looking like every other AI-generated site.

Design & UIIntermediate★ 181⑂ 11AI score 9/10Last updated: Aug 22, 2026

What it does

Tastemaker replaces the LLM default (indigo→purple gradient, same rounded card, same hero) with a grounded, repeatable design process.

  • Ground in pixels, not prose: runs extract_palette.py on pasted screenshots/URLs for deterministic dominant colors, lightness stats and contrast ratios, then check_contrast.py to validate colors once assigned to roles (button background, text, border).
  • Remember instead of re-deriving: locks palette, type pairing and dark-mode decisions into .tastemaker/style-lock.md, plus a cross-project taste profile at ~/.tastemaker/profile.md and a decisions log with strict precedence rules.
  • Structural diversification: reads .tastemaker/log.json to rotate macrostructures and component archetypes away from the previous build, driven by an explicit narrative arc (hook → problem → solution → proof → close).
  • Complete asset pass: keyless Openverse photos, mood-matched Iconify icon sets, recolored unDraw illustrations, favicon export, and GSAP ScrollTrigger motion — all in one pass, attribution-free by design.
  • Four modes: build (default), study (extract reusable design DNA), audit (severity-ranked critique, no edits), comps (structured briefs for your own image generator).
  • Injection-aware: treats PRDs, tickets and text inside reference images as untrusted data, not instructions.

Who it's for

  • Developers shipping landing pages, dashboards and app screens with Claude Code who are tired of cookie-cutter output.
  • Solo founders and indie devs without a designer.
  • Frontend engineers wanting to match a reference's vibe — strongest on React + Tailwind + shadcn stacks.

Example uses

  1. "Build a SaaS landing page with this Dribbble screenshot's vibe" → palette extracted from the image, contrast verified, a macrostructure different from the last build chosen, photos/icons/illustrations/motion wired in.
  2. "Why does this page look AI-generated?" → audit mode scores it against the anti-slop gate list and returns a ranked punch list without touching your files.
  3. "Read the PRD and design only the screens that need it" → extracts just the screen list, classifies each surface (marketing vs. dashboard vs. form), and records the decisions in the style lock.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/codeswithroh/tastemaker/HEAD/skills/tastemaker/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/tastemaker folder from the GitHub repo codeswithroh/tastemaker into my ~/.claude/skills/tastemaker/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/codeswithroh/tastemaker.git && mkdir -p ~/.claude/skills && cp -r tastemaker/skills/tastemaker ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Create the skills directory: mkdir -p ~/.claude/skills
  3. Clone the repo: git clone https://github.com/codeswithroh/tastemaker.git
  4. Copy the skill in: cp -r tastemaker/skills/tastemaker ~/.claude/skills/
  5. Verify that references/, scripts/, assets/ and the bundled ideagram/ folder came along — the instructions depend on them.
  6. Check Python is available (python3 --version) since palette, contrast, photo, icon and favicon helpers are Python scripts.
  7. Optional one-time setup for illustrations: download 20-30 free SVGs from undraw.co into ~/.ideagram/undraw/; it is reused by every later project.
  8. Optional: export a free PIXABAY_API_KEY for more polished stock photos. Openverse photos and Iconify icons need no key.
  9. Restart Claude Code and try a prompt like "make this landing page look good" to confirm the skill triggers.
View source on GitHub ↗License: MIT