Taste Skill

// Overview

Taste Skill is a collection of portable Agent Skills aimed at one specific failure mode: coding agents produce interfaces that work but look like boilerplate. Instead of a component library, it ships design direction as instructions — layout structure, typography, spacing, motion and visual density — that a coding agent reads before it writes the frontend.

The repository is organised as several single-purpose skills rather than one big prompt. The default, installed as `design-taste-frontend`, reads the brief, infers a design language and tunes three dials: DESIGN_VARIANCE (centred and clean through to asymmetric), MOTION_INTENSITY (hover-level through to scroll and magnetic effects) and VISUAL_DENSITY (spacious through to dense dashboards). Around it sit variants for a stricter GPT/Codex profile, for redesigning an existing UI, and for named visual directions — high-end soft, minimalist editorial, or industrial brutalist — plus an output-enforcement skill for when a model ships half-finished work.

A second group produces images rather than code: `imagegen-frontend-web`, `imagegen-frontend-mobile` and `brandkit` generate reference comps, mobile flows and brand boards. The documented workflow is to generate those frames with an image model, then hand them to a coding agent to implement — or to use `image-to-code` to run generate → analyse → implement as one pipeline.

Everything installs through the `npx skills add` CLI from vercel-labs/agent-skills, which scans the repository's skills folder, so the code skills and the image skills install the same way and can also simply be pasted into a conversation as SKILL.md files. The default skill is currently at an experimental v2; v1 is preserved under its own install name for projects that depend on its exact behaviour.

// What it does

• Design-direction skills that set layout, typography, spacing and motion rules for AI-built frontends
• Three tunable dials at the top of the skill file — DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY
• Named visual directions as separate skills: high-end visual design, minimalist editorial UI, industrial brutalist
• A redesign skill that audits an existing UI first, and an output-enforcement skill against placeholder-comment output
• Image-generation skills for website comps, mobile flows and brand kits, plus an image-to-code pipeline skill
• One install path for every skill via npx skills add, or paste any SKILL.md straight into an agent conversation

// Getting started

The skills install with the Agent Skills CLI, which reads the repository's skills/ folder. Install the whole collection, or a single skill by the install name in its SKILL frontmatter.

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

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

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

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

Commands and code are distilled from the project's own documentation — always check the official repo for the latest.

// When to use it

• Reach for it when an agent's frontend output is functional but visually generic
• Use the redesign skill to audit and lift the UI of an existing project instead of restyling greenfield code
• Generate reference comps or a brand board with the image skills, then hand the frames to Codex, Cursor or Claude Code
• Pick a named direction — minimalist, soft/high-end or brutalist — when the visual language is already decided

// How Taste Skill compares

Taste Skill alongside other open-source agent skills & plugins tools AI/TLDR tracks, ranked by GitHub stars.