Repo Year in Review

Leonxlnx/taste-skill

A collection of portable Agent Skills (SKILL.md) that push AI coding agents toward distinctive, polished frontend design and reference-image generation, installed via npx skills add.

  • 94.1k GitHub stars
  • JavaScript
  • ⚖️ MIT
View on GitHub (opens in a new tab) Setup guide
npx skills add https://github.com/Leonxlnx/taste-skill
Leonxlnx/taste-skill preview image

What it is

Taste Skill is a set of portable Agent Skills that upgrade AI-built interfaces with stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. The default taste-skill (install name design-taste-frontend) is a v2 (experimental) rewrite that reads the brief, infers a design language, and exposes three 1-10 dials. The repo also includes variant code skills and image-generation skills for web, mobile, and brand-kit reference boards. It is MIT licensed and described as framework agnostic.

Who it's for

  • Developers using Codex, Cursor, or Claude Code who want less generic AI-generated UIs
  • Teams wanting to redesign or audit an existing project's layout, spacing, hierarchy, and styling
  • Designers and developers who generate reference images (web, mobile, brand kits) and then hand them to a coding agent for implementation

Requirements

Requirements

  • An agent that supports Agent Skills / SKILL.md (e.g., Codex, Cursor, Claude Code)
  • The npx skills add CLI for the installation route (alternatively, copy a SKILL.md into your project or paste it into a ChatGPT/Codex conversation)
  • For the image-generation skills: ChatGPT Images, Codex image mode, or another agent/generator that produces images

Setup

  1. Install all skills

    The npx skills add CLI scans the skills/ folder, so code and image-generation skills install the same way.

    bash
    npx skills add https://github.com/Leonxlnx/taste-skill

  2. Install a single skill

    Pass the install name (the name: field in the SKILL frontmatter, not the folder name) via --skill.

    bash
    npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

  3. Pin to the original v1 behavior

    The default is now v2 (experimental). Use the v1 install name only if you depend on the original behavior.

    bash
    npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

Examples

Install the default taste-skill (v2)

bash
bash
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

What it does: Installs or upgrades the default skill in place; the install name did not change from v1 to v2, so no script updates are needed.

Image-first pipeline prompt

Prompt
prompt
follow the skill: generate images, then analyze, then code

Expected output: The README suggests stating the pipeline explicitly when using image-to-code-skill.

Adjust the design dials

Prompt
prompt
DESIGN_VARIANCE: layout experimentation (lower: centered/clean · higher: asymmetric/modern)
MOTION_INTENSITY: animation depth (lower: hover · higher: scroll/magnetic)
VISUAL_DENSITY: information per viewport (lower: spacious · higher: dense dashboards)

Expected output: These are the three 1-10 settings at the top of the taste-skill file, summarized from the Settings section.

Pros & cons

Pros

  • Pro:Multiple specialized skills (redesign, soft, minimalist, brutalist, output enforcement, Stitch, GPT-oriented) let you pick the one suited to a given job
  • Pro:Adjustable dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) tune layout, animation, and density in taste-skill
  • Pro:Includes image-generation skills for web comps, mobile screens, and brand kits, plus an image-to-code workflow
  • Pro:Single npx skills add command installs everything, or a single skill by install name; SKILL.md can also be copied manually

Cons

  • Con:The default taste-skill is v2 and labeled experimental, still being iterated toward v2.0.0 stable
  • Con:Dial settings apply to taste-skill only, not to the other skills
  • Con:Image-generation skills output only reference images, so a separate coding agent is needed to implement them

Images

Leonxlnx/taste-skill preview image
Leonxlnx/taste-skill preview image · Leonxlnx/taste-skill on GitHub · MIT
Leonxlnx/taste-skill preview image