codeswithroh/tastemaker

A Claude Code skill that grounds AI-generated UI in real reference images and a persistent per-developer taste profile, instead of generic AI-slop defaults.

What it solves

AI-generated user interfaces often suffer from a "monoculture" of generic designs—typically characterized by indigo-to-purple gradients and soft-shadow cards—because models lack grounded design taste and memory of user preferences. Tastemaker provides coding agents with a structured design system and a set of computational constraints to ensure UIs look professional, unique, and accessible.

How it works

Tastemaker acts as a skill for coding agents (such as Claude Code, Windsurf, and Gemini CLI) that replaces generic defaults with a rigorous design workflow:

  • Computational Palette Generation: Instead of picking from a list, it uses a Python script to generate a fresh, contrast-verified palette based on a project's "mood" (e.g., premium, technical, playful) using OKLCH color space.
  • Pixel-Based Extraction: It can read actual pixel values from reference images via scripts rather than relying on the model's text descriptions of a "vibe."
  • Enforced Constraints: A contrast matrix script (check_contrast.py) mathematically verifies that color pairings meet WCAG accessibility standards, treating readability as a hard constraint rather than a suggestion.
  • Anti-Slop Scanning: A dedicated script (anti_slop_scan.py) flags common AI design tropes like generic gradients, h-screen usage, and placeholder copy.
  • Persistent Memory: Design decisions are locked in local files (.tastemaker/style-lock.md) and personal preferences are stored in a global profile (~/.tastemaker/profile.md) to maintain consistency across sessions and projects.

Who it’s for

Developers using AI coding agents who want to build high-quality, visually distinct landing pages and app screens without manually managing a design system or fighting the model's default aesthetic tendencies.

Highlights

  • Dynamic Palette Generator: Creates unique, legible color schemes per project based on mood and harmony rules.
  • Real Asset Sourcing: Integrates with Openverse, Iconify, and unDraw to pull in attribution-free photos, icons, and illustrations.
  • ** Firestore-free Local Execution:** Runs entirely on the user's machine with no hosted backend or API keys required.
  • Motion Integration: Implements GSAP and ScrollTrigger for professional motion by default, with an audit script to prevent common animation errors.
  • Design Lock: Prevents "style drift" by recording decisions in a project-specific log and a durable user profile.

Related

  • Project
  • Project
  • Project
  • Project