Leonxlnx /
taste-skill
Agent skills that steer AI coding tools toward better layout, type and motion
- 101.2k stars
- 9.3k stars since 3 Oct
- JavaScript
- Updated 2 days ago
- Beginner friendly
- Agent skills & plugins
AI coding agents tend to produce interfaces that look alike: the same layouts, fonts and spacing. Taste Skill is a collection of SKILL.md files that tell the agent how to design instead. They cover layout, typography, motion and spacing, and the model reads them, not you.
The main skill reads your brief, infers a design language, and uses three 1-10 dials at the top of the file: DESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY. You change the numbers to get calmer or bolder results. Other skills target specific styles (soft, minimalist, brutalist), redesign existing projects, or push the model to finish its output without placeholder comments.
The repo also has image-generation skills for website comps, mobile screens and brand-kit boards. You make reference images with ChatGPT Images or a similar tool, then hand them to Codex, Cursor or Claude Code to build. The image-to-code skill chains the steps: generate references, analyze them, write the code.
What it does
Three-dial main skill
The default skill (install name design-taste-frontend) is a v2 rewrite marked experimental. It exposes layout variance, motion intensity and visual density as 1-10 settings.
Style-specific skills
Separate skills cover soft and polished UI, editorial minimalism, industrial brutalism, Google Stitch rules, and a stricter variant for GPT and Codex.
Redesign existing projects
The redesign skill audits a current UI first, then fixes layout, spacing, hierarchy and styling.
Image reference skills
Three skills produce images only: website comps, mobile screens and flows, and brand-kit boards. You pass the results to a coding agent.
Full-output enforcement
A small skill for models that ship half-finished work. It asks for complete output with no placeholder comments.
What you could build
- Restyle a landing page your agent built so it stops looking like a template.
- Audit and improve the spacing and hierarchy of an existing frontend codebase.
- Generate website or mobile screen mockups as images, then have an agent implement them.
- Explore logo directions, palettes and type in a brand-kit board before building a site.
- Tune an agent's output toward a minimalist, soft or brutalist look by setting a few numbers.
Get started
Run the first command to install all skills, or the second to install only the main one by its install name. You can also copy a SKILL.md into your project or paste it into a ChatGPT or Codex chat.
npx skills add https://github.com/Leonxlnx/taste-skillnpx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Commands are copied from the project's README. Read it on GitHub for the full setup.
More in Agent skills & plugins
superpowers
A set of skills that makes coding agents plan, test and review before they write code
mattpocock/skills
Small, editable agent skills for planning, testing and reviewing code with AI
ECC
Agents, skills, hooks and memory that add an engineering workflow to coding agents
andrej-karpathy-skills
A CLAUDE.md file that tells Claude Code to ask first, keep code small, edit narrowly
anthropics/skills
Anthropic's example Agent Skills: folders of instructions Claude loads per task
ponytail
A skill that makes AI coding agents write the least code that works
gstack
Slash-command skills that give Claude Code roles like reviewer, QA and release engineer
addyosmani/agent-skills
A pack of 25 Markdown skills that guide AI coding agents from spec to ship
archify
Agent skill that turns a description or a codebase into an interactive HTML diagram
impeccable
A design skill for AI coding agents that steers them away from generic frontend looks