How Taste Skill Gives AI‑Generated Front‑Ends Real Design Sense

Why AI‑generated front‑ends look the same

Typical AI‑generated landing pages share a predictable pattern: a centered headline, a gray subtitle, a purple‑blue gradient button, three identical cards with emojis, placeholder names like John Doe and Sarah Chan, and buzzwords such as Elevate, Seamless, Unleash. The author calls this phenomenon “slop” – a collection of shortcuts the model takes when a task seems simple or the context is long, selecting the most frequent layout patterns from its training data.

The core idea of Taste Skill

Taste Skill translates vague design advice into concrete, executable rules stored in a SKILL.md file. Installation is a single command:

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

After installation, major coding agents such as Claude Code, Cursor, and Codex can read the skill. It is framework‑agnostic (React, Vue, Svelte) and does not bind to a specific model.

What the skill bans

Purple glow and neon gradients : the project calls this “AI Purple” and forbids it as a default colour scheme.

Inter as default font : unless the user explicitly requests a neutral style like Linear, the skill prefers fonts with more character such as Geist, Outfit, or Satoshi.

Pure black and pure white : #000000 and #ffffff are disallowed; near‑black and near‑white should be used instead.

Three identical cards : identical three‑column cards are blacklisted.

Placeholder names and avatars : generic names like John Doe or Sarah Chan and gray circle avatars are prohibited.

Buzzwords (empty words) : terms like Elevate, Seamless, Unleash, Next‑Gen, Revolutionize are banned; concrete verbs are required.

Fake precise numbers : fabricated percentages or metrics (e.g., 92%, 4.1×, 48k) are not allowed unless sourced from real data.

Fake UI screenshots built from div : assembling dummy product screenshots, dashboards, or terminal windows from plain div blocks is forbidden.

Long dashes : the skill treats long dashes as a signature of large language models and bans them in titles, buttons, navigation, or body text.

In addition to bans, the skill defines “red lines”: the hero section must fit within one screen, titles limited to two lines, CTA buttons must be immediately visible, navigation must stay on a single line, and button text cannot wrap.

Adjustable knobs for different scenarios

DESIGN_VARIANCE : controls how irregular the layout can be; higher values break symmetry.

MOTION_INTENSITY : controls the amount and complexity of animations.

VISUAL_DENSITY : controls how much information is packed onto a screen.

Values range from 1 to 10; the default is roughly 8 / 6 / 4. For marketing landing pages you might raise DESIGN_VARIANCE, while for admin dashboards you increase VISUAL_DENSITY and lower MOTION_INTENSITY.

Animations must serve a clear purpose—hierarchy, narrative, feedback, or state change—and must automatically degrade for users who prefer reduced motion.

Modular skill set

Taste Skill is split into several small skills (each 200–300 lines) to avoid blowing up the agent’s context:

gpt-taste : tighter rules for GPT‑style models such as Codex.

image-to-code : takes a reference image, lets the AI understand it before generating code.

redesign : audits an existing page, identifies problems, then applies the rules.

style variants : provides minimalist, brutalist, and soft style presets.

GitHub activity

The repository has 21.5k stars, 1.7k forks, 97 commits, and is MIT‑licensed, indicating active development.

In short, Taste Skill is not a magical AI that “understands design,” but a practical checklist that blocks the most obvious AI‑generated design flaws. For developers who rely on AI to scaffold pages, it can reduce the number of re‑work cycles dramatically.