Taste Skill: Design Taste Frontend by Leon Lin

We read the file at commit dfb6f9f of Leonxlnx/taste-skill and verified our catalog copy matches the repository byte for byte. One naming note: the repository directory is skills/taste-skill/, while the skill's registered name is design-taste-frontend; both point at the same file.

design-taste-frontend at a glance

1. One 87KB file, always loaded: the whole doctrine rides along on every trigger, the opposite trade-off from the index skills.
2. It reads the room before touching code, declaring a one-line Design Read and asking at most one question.
3. Three dials gate every decision: variance, motion, density, defaulting to 8 / 6 / 4.
4. It names the AI defaults to kill, from purple gradients to Inter + slate-900.
5. The taste rules are mechanically checkable, down to a formula for how many eyebrow labels a page may carry.
6. The scope is fenced on line one: landing pages and portfolios, never dashboards.

1. One 87KB file, always loaded

Most heavyweight skills we have covered keep a thin index and load detail on demand: vercel-react-best-practices indexes 70 rule files, microsoft-foundry routes to twenty sub-skills. design-taste-frontend makes the opposite bet: one 87KB, 1,206-line SKILL.md with everything inline, from typography directives to canonical animation skeletons. The cost is context, paid on every load. The bet is coherence: the file wants its rules read together, because they gate each other through the dials in section 3. The file does tell the agent not to fire everything at once:

Every rule below is contextual. None of it fires automatically. First read the brief, then pull only what fits.

Source: SKILL.md, preamble

2. It reads the room before touching code

Section 0 is brief inference, and it scripts its own output:

Before any code, state in one line: "Reading this as: \<page kind> for \<audience>, with a \<vibe> language, leaning toward \<design system or aesthetic family>."

Source: SKILL.md, "Design Read"

The declared read makes the agent's aesthetic assumption visible and correctable before any code exists. And when the brief is genuinely ambiguous:

Ask exactly one clarifying question - never a multi-question dump - and only when the design read genuinely diverges.

Source: SKILL.md, "If the brief is ambiguous"

One question, not an interview. It is the opposite calibration from grill-me, and correctly so: a landing page brief needs a direction check, not a design tree.

3. Three dials gate every decision

After the read, the agent sets three numbers, and the rest of the file keys off them:

• DESIGN_VARIANCE: 8 - 1 = Perfect Symmetry, 10 = Artsy Chaos

Source: SKILL.md, "The Three Dials"

MOTION_INTENSITY and VISUAL_DENSITY follow, baseline "8 / 6 / 4", with an inference table mapping vibe words to dial values: "minimalist / Linear-style" pulls variance down to 5-6, "trust-first / public-sector" pins it at 3-4 and motion at 2-3. Later rules reference the dials directly; centered hero sections, for instance, are avoided by default "when DESIGN_VARIANCE > 4". Configuration happens conversationally: the file explicitly says not to make the user edit it.

4. It names the AI defaults to kill

The anti-slop list is specific enough to be falsifiable:

Do not default to: AI-purple gradients, centered hero over dark mesh, three equal feature cards, generic glassmorphism on everything, infinite-loop micro-animations everywhere, Inter + slate-900. These are the LLM defaults.

Source: SKILL.md, "Anti-Default Discipline"

Anyone who has generated a landing page recognizes every item. It is the same diagnosis Anthropic's frontend-design makes with its three named "AI looks"; this file's version is longer, angrier, and wired into pre-flight checks.

5. The taste rules are mechanically checkable

The hard-rules section turns taste into arithmetic. The best example is self-aware about why it exists:

EYEBROW RESTRAINT (mandatory, the #1 violated rule in production tests). [...] Every AI-built site puts an eyebrow above EVERY section header, producing the same templated rhythm.

Source: SKILL.md, "Layout Discipline"

The rule itself is a formula: "Maximum 1 eyebrow per 3 sections", checked by counting uppercase tracking labels against ceil(sectionCount / 3). The same section caps zigzag layouts ("The 3rd consecutive image+text split is a Pre-Flight Fail"), limits the hero to four text elements, bans the split-header pattern as a default, and requires a bento grid to have exactly as many cells as it has content. Rules a script could enforce are rules an agent follows; "make it tasteful" is not one.

All of it converges on a final gate, a checklist the file refuses to make optional:

THIS IS NOT OPTIONAL. Run every box. If any box fails, the output is not done.

Source: SKILL.md, "FINAL PRE-FLIGHT CHECK"

The boxes are countable: the declared design read, explicit dial values, WCAG AA contrast on every CTA and form input, one theme for the whole page, one accent color, one corner-radius system. One box we appreciated on a personal level bans em dashes everywhere on the rendered page, "headlines, eyebrows, pills, body, quotes, attribution, captions, buttons, alt text", calling it non-negotiable. The AI tell that gives away written text apparently gives away designed pages too.

6. The scope is fenced on line one

The file opens by refusing work:

Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI.

Source: SKILL.md, scope line

That is the right fence: every rule in the file optimizes for pages that persuade, and applying eyebrow math to a settings screen would be noise. The repo carries twelve sibling skills for neighboring jobs (brandkit, brutalist, minimalist, image-to-code, redesign, and taste-skill-v1, this skill's own earlier version); this file stays in its lane.

Tools it drives: none directly; it shapes the frontend code the agent writes, with a mandatory dependency-verification step before using any design-system package.

Behavior change, before and after:

The fine print worth knowing:

• The whole 87KB loads whenever the skill fires, which is real context spent on every landing-page task; the index-style skills cost a fraction of that per load.
• The baseline dials (8 / 6 / 4) lean expressive by default. If your brand is conservative, say so in the brief; the trust-first row of the inference table exists for exactly that.

Should you install design-taste-frontend?

Install it if your agent builds marketing pages, portfolios, or redesigns and the output keeps looking like every other AI page; the mechanical rules attack precisely the tells everyone recognizes. Skip it for product UI and dashboards, which the file itself refuses on line one, and weigh the context cost if your tasks are small: this is the heaviest single file in our series so far.

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

Previous: how caveman actually works. All dives: the series index.