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

Tastemaker

A UI design skill that extracts real color/type tokens from reference pixels, locks them per project, and rotates page structure so your interfaces stop looking AI-generated.

Design & UIIntermediate★ 444⑂ 44AI score 9/10Last updated: Sep 29, 2026

What it does

  • Grounds style in real pixels: paste screenshots, Pinterest exports, or URLs and it runs extract_palette.py for deterministic dominant colors, lightness stats, and contrast ratios instead of a lossy text summary of "the vibe."
  • No references? Generate, don't pick: classifies the product idea's mood, then generate_palette.py --mood <mood> produces a fresh, legible-by-construction palette plus a matching type pairing — so two similar projects don't ship identical UIs.
  • Remembers decisions: writes palette, typography, and the contrast matrix into .tastemaker/style-lock.md as a contract every later screen reuses; keeps a cross-project taste profile at ~/.tastemaker/profile.md.
  • Fights structural sameness: reads .tastemaker/log.json and ~/.tastemaker/structure-history.json to pick a macrostructure and component archetypes different from prior builds, avoiding the hero → 3 cards → testimonial → CTA template.
  • Fills all assets in one pass: Openverse photos (no API key), Iconify icons and real brand logos, illustrations via the bundled ideagram skill, favicon export — using only attribution-free sources, with credits kept in code comments.
  • Four modes: build (default), study (extract reusable design DNA), audit (critique-only scoring against an anti-slop checklist), comps (structured briefs for your own image generator).

Who it's for

  • Developers shipping landing pages or dashboards with Claude Code whose output always looks the same
  • Solo founders and side-project builders without a designer
  • Frontend engineers on React + Tailwind + shadcn who want registry components restyled into one coherent system
  • Teams with a PRD who want design effort scoped to the screens actually being shipped

Examples

  1. "Build our landing page to match this Dribbble screenshot" → palette extracted from pixels, contrast verified, style lock written, page built with real photos, icons, and illustrations.
  2. "Why does this page look AI-generated?" → audit mode scores it against the numbered anti-slop gates and returns a severity-ranked punch list without editing files.
  3. "Now do the landing page for our second product" → reads structure history and deliberately chooses a different macrostructure, nav, and footer archetype to avoid template repetition.

· · · 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 /tmp/tastemaker && mkdir -p ~/.claude/skills && cp -r /tmp/tastemaker/skills/tastemaker ~/.claude/skills/

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

  1. Open a terminal.
  2. Make sure the skills folder exists: mkdir -p ~/.claude/skills
  3. Clone the repo: git clone https://github.com/codeswithroh/tastemaker.git /tmp/tastemaker
  4. Copy the skill into place: cp -r /tmp/tastemaker/skills/tastemaker ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/tastemaker — you should see SKILL.md, references/, scripts/, and ideagram/.
  6. The scripts need Python 3: check python3 --version and install any libraries the scripts request (e.g. pip install pillow).
  7. Optional: download 20–30 free SVGs from undraw.co into ~/.ideagram/undraw/ for high-quality illustrations — a one-time step reused across projects.
  8. Restart Claude Code and try a prompt like "build a landing page that matches this screenshot"; the skill triggers automatically.
View source on GitHub ↗License: MIT