Development · GitHub repo
Taste Skill
Portable agent skills that enforce design quality in AI-generated frontends
Taste Skill is an open-source collection of instruction sets (skills) designed for AI coding agents like Claude Code, Cursor, and Codex. It prevents AI models from producing generic, repetitive UI layouts by enforcing strong typography, spacing, motion, and design system constraints. The repository also includes specialized image-generation skills to generate reference boards before implementing code.
How it works
To install and use:
- Download `SKILL.md` and place it in your project root.
- In your prompt (e.g., in Cursor using `@SKILL.md`), instruct: "Please read and strictly follow the rules in SKILL.md."
- Tune three settings on a scale from 1 to 10:
- DESIGN_VARIANCE: 1–3 (Normal / Centered grids), 4–7 (Creative / Overlaps & varied sizes), 8–10 (Wild / Asymmetric, masonry grids, large empty spaces).
- MOTION_INTENSITY: 1–3 (Static / Simple hover color shifts), 4–7 (Smooth / Fade-ins & smooth scroll), 8–10 (Cinematic / Spring physics, magnetic buttons, parallax).
- VISUAL_DENSITY: 1–3 (The Art Gallery Mode / Minimalist, spacious luxury feel), 4–7 (The Daily App Mode / Standard feed density), 8–10 (The Cockpit Mode / Compact data tables, dashboards, sci-fi interfaces).
What it's for
- Prevent AI coding assistants from generating generic boilerplate landing pages
- Audit and redesign the visual hierarchy of an existing frontend codebase
- Generate styled reference comps and brand kits using AI image models before writing code
- Force AI models to deliver complete code files without placeholder comments
Features
- Modular skill architecture installable via npx skills add or markdown copy-paste
- Adjustable visual dials for design variance, motion intensity, and visual density
- Specialized style profiles including minimalist editorial, industrial brutalist, and high-end visual design
- Image-to-code pipelines for generating reference frames and implementing matching frontends
- Compatibility across major AI coding agents including Claude Code, Cursor, and Codex
- Output enforcement mode to prevent AI assistants from truncating code
Pricing
Free and open source (MIT license)
Details
- Type
- GitHub repo
- Category
- Development
- Topic
- AI Coding Prompts
- Open source
- Yes
- Platforms
- Command line
- For
- Developers and designers using AI coding agents who want polished, non-generic frontend interfaces.
- Tags
- agent skills, cursor, claude code, frontend, ui design, vibecoding
Why it was saved
- @adam_ha_yes: Prevents AI models from producing generic 'AI slop' designs by constraining them to high-taste frontend design principles.
- @chase.h.ai: Prevents AI models from generating bland, generic frontend code by enforcing design systems, density rules, and aesthetic standards.
- @alexeevweb: Prevents AI from generating generic, boring 'slop' frontend code with plain white backgrounds and default buttons, allowing fine-grained control over layout asymmetry, animations, and density.
- @LexnLin: Companion to the portfolio directories: feed curated layouts to an AI builder to build distinctive pages
Related
A CLAUDE.md template fixing common LLM coding pitfalls using four principles.
AI agent skills for UI animation, design engineering, and interface polish
Claude Code skill to ground the agent in the current branch diff
Gallery of community prompts for generating Remotion videos with coding agents
Cursor rules to keep Claude 3.7 Sonnet focused and non-destructive
Curated design-engineering skills and constraints for coding agents
Updated