Claude Code UI design skill and plugin · Emerging v1.0 skill with active maintenance signals and a documented workflow, but limited supplied evidence of broad real-world validation.

codeswithroh/tastemaker

Claude Code plugin and Agent Skill for reference-grounded UI design that generates contrast-checked palettes, persists project and personal taste memory, sources visual assets, diversifies marketing-page structure, adds motion, and audits common AI-generated UI patterns.

frontend engineeringUI designdesign systemsweb accessibilityvisual asset sourcingmotion designdesign reviewdeveloper tooling
Routing score
80.0
Readiness
Ready for guided use in UI projects when generated design and fetched assets are reviewed; some optional asset and export paths require extra local dependencies or setup.
License
MIT
Maintenance
active
Components
19
Revision
0

Selection

Select when

  • You want Claude Code to build or improve a UI from a product brief.
  • You have screenshots or images whose actual colors should ground the design.
  • You want fresh project palettes with machine-checked contrast pairings.
  • You need project styling to remain consistent across later sessions and screens.
  • You want preferences learned from explicit keep and reject decisions.
  • You need landing-page structure to vary rather than repeat a standard AI template.
  • You want photos, icons, illustrations, favicons, and motion handled in the same workflow.
  • You need a ranked read-only audit of an existing interface.
  • You want mechanical scans for generic UI patterns and motion mistakes.
  • Your project can run Python 3 scripts locally.
  • You use Claude Code's plugin or Agent Skills system.
  • You are willing to review aesthetic judgments and third-party assets before shipping.

Boundaries

Avoid when

  • You need a standalone visual editor or GUI.
  • You require mathematically verified aesthetic quality rather than contrast verification.
  • You cannot allow an agent or local scripts to read and write project design files.
  • You prohibit network access to all external asset services.
  • You need full Cursor support through SKILL.md conversion today.
  • You expect bundled unDraw artwork without maintaining a local illustration library.
  • You cannot add Pillow but require deterministic palette extraction from images.
  • You cannot add Cairo dependencies but require PNG or favicon export paths that depend on them.
  • You need an audit mode that automatically edits the interface.
  • You must use a fixed corporate design system without any generated visual direction.
  • You cannot review licensing, quality, and suitability of fetched third-party assets.
  • You need independently audited security assurances.

Strengths

Capabilities

Installs as a Claude Code plugin or as a copied Agent Skill folder.Automatically targets UI build, style, improvement, study, audit, and comps requests.Extracts deterministic color data from local reference images with a Python script.Generates fresh mood-based palettes using OKLCH, harmony rules, seeds, and contrast targets.Computes pairwise WCAG contrast matrices and records legal color uses.Persists project style rules, structural history, and append-only keep or reject decisions.Carries resolved cross-project preferences in a local per-user profile.Builds reference boards and direction contracts for cold-start design work.Selects page macrostructures and component archetypes while rotating away from prior project choices.Guides use of existing behavioral primitives and visual component registries after stack detection.Fetches keyless Openverse photos and Iconify icons through bundled helpers.Supports an optional Pixabay photography path using a user-provided API key.Vendors an illustration skill that indexes, matches, recolors, composes, and validates local unDraw SVGs.Constructs cold-start geometric marks and exports favicon assets when no identity exists.Provides GSAP-based motion guidance and a dependency-free reveal fallback.Scans source files for common AI-UI tells, accessibility omissions, placeholders, and problematic transitions.Audits motion for timing, easing, layout animation, input gating, and reduced-motion handling.Covers marketing pages, dashboards, forms, data views, editors, settings, and interface states.Supports read-only UI audits and structured image-generator comp briefs.Includes CI checks for domain policy, security regressions, and SVG validity.

Risk profile

Risks and limitations

  • A contrast pass verifies legibility thresholds, not whether a palette or completed design is aesthetically good.
  • Taste classification, reference interpretation, mood matching, anti-slop judgments, and preference promotion remain heuristic.
  • Font selection is limited to five curated mood pairings, and similar projects can receive the same pairing.
  • Illustration matching depends on a finite user-maintained unDraw library and may repeat source art for similar concepts.
  • High-quality illustration setup is not fully automatic because unDraw files are deliberately not bundled.
  • Deterministic image palette extraction requires Python 3 and Pillow; the documented fallback is a less deterministic vision read.
  • PNG and favicon export paths require cairosvg and a system Cairo library.
  • Cursor conversion is documented as degraded because supporting references and scripts are stripped.
  • Networked asset sourcing exposes asset search requests to allowlisted third-party services and depends on their availability.
  • GSAP is the default motion path, which may conflict with projects that avoid that dependency or extensive animation.
  • Uncertain: repository-authored security controls and claims were not independently audited in the supplied evidence.
  • Uncertain: the root and skill security files conflict on whether vulnerabilities should be reported privately or through a public issue.

First-party files state that bundled Python helpers avoid subprocess, shell execution, eval, exec, and pickle; HTTPS and redirect-aware host allowlisting are enforced by a network guard. CI runs domain checks, security regression tests, and SVG validation on pushes, pull requests, and weekly. Allowed egress is documented for Iconify, Openverse, optional Pixabay, jsDelivr, and cdnjs. These are repository claims, not independently verified here. Reporting guidance conflicts: the root policy requests private advisories or email, while the nested skill policy says to open a security issue.

Component inventory

19 documented components

Claude Code plugin / Agent Skill

Tastemaker

Context-injection extension for reference-grounded UI design, generated palettes, asset sourcing, motion, quality gates, and persistent taste memory; runs locally with no backend.

.claude-plugin/plugin.json; skills/tastemaker/SKILL.md
skill workflow

Build workflow

Scopes screens, builds references, locks style, sources assets, implements UI and motion, scans quality, and records decisions.

skills/tastemaker/SKILL.md
skill workflow

Study workflow

Extracts reusable design DNA from a screenshot or URL, with optional handoff into a fresh build or style lock.

skills/tastemaker/SKILL.md; skills/tastemaker/references/verbs/study.md
read-only skill workflow

Audit workflow

Scores existing UI against anti-slop gates and returns a severity-ranked punch list without editing.

skills/tastemaker/SKILL.md; skills/tastemaker/references/verbs/audit.md
skill workflow

Comps workflow

Creates structured reference-comp briefs using palette, structure, and logo rules, then preserves decisions for a later build.

skills/tastemaker/SKILL.md; skills/tastemaker/references/verbs/comps.md
vendored illustration skill

Ideagram

Matches concepts to locally stored unDraw illustrations, recolors them to the brand, validates them, and optionally composes or exports them.

skills/tastemaker/ideagram/SKILL.md; skills/tastemaker/ideagram/README.md
Python command

Palette generator

Generates a fresh mood-based OKLCH palette with solved contrast roles and a full pairing matrix.

skills/tastemaker/scripts/generate_palette.py
Python command

Palette extractor

Deterministically extracts dominant colors, contrast ratios, and lightness data from reference images.

skills/tastemaker/scripts/extract_palette.py
Python command

Contrast checker

Checks one pair, critical palette pairs, or every token pairing using WCAG contrast thresholds.

skills/tastemaker/scripts/check_contrast.py
Python command

Anti-slop scanner

Statically flags high-confidence generic-AI UI tells, placeholder content, dead links, missing alt text, emoji icons, and transition-all.

skills/tastemaker/scripts/anti_slop_scan.py
Python command

Motion auditor

Scans UI source for motion craft failures such as transition-all, ease-in, scale(0), long timing, layout animation, and missing reduced-motion handling.

skills/tastemaker/scripts/audit_motion.py
Python command

SVG asset validator

Validates SVG files or directories for well-formed assets before they ship.

skills/tastemaker/scripts/validate_assets.py
Python command

Photo fetcher

Fetches attribution-free Openverse photography and writes voluntary source credits; Pixabay is an optional keyed source.

skills/tastemaker/scripts/fetch_photos.py
Python command

Icon fetcher

Searches and fetches mood-matched Iconify SVG icons, tinted to the project accent.

skills/tastemaker/scripts/fetch_icons.py
Python command

SVG recolorer

Recolors local SVG files to the locked accent while optionally preserving dark colors.

skills/tastemaker/scripts/recolor_svg.py
Python command

Favicon exporter

Exports a mark SVG into favicon, Apple touch, PWA icon, manifest, and OG-card assets.

skills/tastemaker/scripts/export_favicons.py
Python command

Ideagram library indexer

Builds Markdown and JSON indexes for a local unDraw illustration library.

skills/tastemaker/ideagram/scripts/build_library_index.py
Python module suite

Ideagram asset toolchain

Recolors unDraw art, extracts reusable scene components, validates SVG output, and exports raster PNGs.

skills/tastemaker/ideagram/scripts/
static web application

Tastemaker website and live demo

Public marketing page, before/after comparison, and embedded Calmly demonstration of the skill’s design rules.

site/index.html; site/demo.html

Technical profile

Requirements and configuration

Repository
codeswithroh/tastemaker
License
MIT
PrimaryLanguage
Python
SkillVersion
1.0.0
Distribution
Claude Code marketplace plugin plus manual Agent Skill folder
PluginManifest
.claude-plugin/plugin.json
SkillEntry
skills/tastemaker/SKILL.md
Runtime
Local Markdown workflow with Python 3 helper scripts
StateFiles
.tastemaker/style-lock.md, .tastemaker/decisions.log, .tastemaker/log.json, .tastemaker/reference-board.md, and ~/.tastemaker/profile.md
PaletteEngine
OKLCH mood generation with harmony rules, optional seeds, and WCAG target solving
ReferenceProcessing
Local image palette extraction; Pillow is required for the deterministic path
QualityChecks
Contrast matrix, anti-slop static scan, motion audit, SVG validation, and pre/post design review gates
AssetSources
Openverse, Iconify, optional Pixabay, and a user-maintained local unDraw library
NetworkPolicy
HTTPS-only allowlist checked on requests and redirects according to the supplied security file
Motion
GSAP and ScrollTrigger by default, with dependency-free reveal and scoped anime.js alternatives
Ci
.github/workflows/security.yml runs Python 3.11 domain, security, and SVG checks
FrontendSubprojects
A static marketing site is documented alongside a separate React, TypeScript, and Vite web package
RepositoryStatus
Public, unarchived, MIT-licensed repository with 232 stars and 14 forks in supplied metadata

Classification

How it enters the stack

Context InjectionTool Surface

The Claude Code plugin injects a SKILL.md workflow and exposes bundled local Python helpers through that workflow; inference: optional illustration and export dependencies can raise setup beyond the basic install.

Claude Extension · low setup effort · high confidence · automated

Evidence and risk

Primary sources

first_party_fileREADME.mdhttps://github.com/codeswithroh/tastemaker/blob/main/README.md
first_party_fileweb/README.mdhttps://github.com/codeswithroh/tastemaker/blob/main/web/README.md
first_party_filesite/README.mdhttps://github.com/codeswithroh/tastemaker/blob/main/site/README.md
first_party_fileresearch/README.mdhttps://github.com/codeswithroh/tastemaker/blob/main/research/README.md
first_party_fileSECURITY.mdhttps://github.com/codeswithroh/tastemaker/blob/main/SECURITY.md
first_party_fileCONTRIBUTING.mdhttps://github.com/codeswithroh/tastemaker/blob/main/CONTRIBUTING.md
first_party_fileweb/package.jsonhttps://github.com/codeswithroh/tastemaker/blob/main/web/package.json

Routing context

Conflicts, complements, and synergies

complements

gh_cathrynlavery_diagram_design

Tastemaker focuses on reference-grounded UI taste, while Diagram Design provides branded diagram generation and source redrawing.

medium confidence
extends

gh_anthropics_claude_code

Tastemaker is explicitly packaged as a Claude Code marketplace plugin and Agent Skill.

high confidence
overlaps_with

gh_emilkowalski_skills

Both provide Agent Skills for UI design, frontend craft, motion, prototyping, and review, while Tastemaker adds persistent taste memory and bundled asset and palette tooling.

high confidence
complements

gh_amaancoderx_npxskillui

Inference: npxskillui can extract agent-ready design systems, while Tastemaker can apply references and persistent style constraints through a broader UI build workflow.

medium confidence
overlaps-with

gh_conardli_garden_skills

Inference: both extend Claude Code with opinionated UI design workflows and local helpers, while Garden Skills has broader non-UI coverage and Tastemaker has deeper taste-memory and asset-sourcing features.

medium confidence
complements

gh_owl_listener_designer_skills

Tastemaker adds reference-grounded palettes, taste memory, asset sourcing, and implementation-oriented UI checks that can complement this suite's broader design workflows.

high confidence
complements

gh_shadcndashboard_shadcndashboard

Inference: Tastemaker can provide broader UI direction and audits, while this repository's local skill supplies implementation conventions for the specific dashboard codebase.

medium confidence