Taste Skill (install name design-taste-frontend) is the most popular community design skill for coding agents. Its repository by Leonxlnx had about 94,000 stars on 9 October 2026. It calls itself an "anti-slop frontend skill" for landing pages, portfolios and redesigns, and it is the opposite of Anthropic's short frontend-design skill in one respect: where that skill is 71 lines, Taste Skill's SKILL.md runs to about 1,200, most of it explicit rules.
We ran it on a real brief beside a run with no skill. This page explains what the skill does, how to install it, what came out, and the two checks it missed.
What Taste Skill tells your agent
Read the brief and say so. Before any code, the agent must write a one-line "design read": Reading this as: page kind, for audience, with a vibe, leaning toward a design system or aesthetic. If the brief is ambiguous it may ask one question, never several.
Set three dials. Every layout, motion and density decision is gated by three numbers: DESIGN_VARIANCE (1 perfect symmetry, 10 artsy chaos), MOTION_INTENSITY (1 static, 10 cinematic) and VISUAL_DENSITY (1 gallery, 10 cockpit). The baseline is 8 / 6 / 4, and a table maps brief words to values: "minimalist" or "Linear-style" lowers variance and motion; "trust-first" or "regulated" lowers them further.
Avoid a long list of AI tells. Section 9 bans or rations the patterns that mark a generated page. The em dash is banned everywhere, outright. So are three identical feature cards in a row, Inter as the default face, section-number eyebrows like 06 · how it works, "BETA" labels in the hero, decorative status dots, filler verbs ("elevate", "seamless", "unleash") and fake-perfect numbers like 99.99%. The middle dot is rationed to one per line.
Pass a pre-flight check. About 40 tick boxes before the agent hands over: zero em dashes, one accent colour, one radius system, CTA contrast, a hero that fits the viewport with the headline in two lines or fewer, no duplicate CTAs, a copy self-audit. Appendices list install commands for real design systems (shadcn/ui, Radix, GOV.UK Frontend, USWDS, Primer and more) for briefs that should use one.
Install it
From the author's repository with the skills CLI:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
From SkillGild, for Claude Code, Codex, Cursor or Gemini CLI:
skillgild install design-taste-frontend --agent claude-code
The repository's default design-taste-frontend is v2, which its README calls experimental; design-taste-frontend-v1 installs the original. SkillGild also lists the upstream folder as taste-skill.
The test
The brief: a landing page for Ledgerline, a fictional bookkeeping app for freelance designers, written as one self-contained HTML file with Google Fonts as the only external resource. It listed the sections and forbade invented testimonials, customer counts, logos and awards. One run followed Taste Skill; one had no skill. Both used Claude Code 2.1.278 with Claude Opus 5 on 9 October 2026, with the Skill tool switched off so nothing else installed could load. One run each: an example, not a benchmark.
Taste Skill's run opened exactly as the skill asks:
Reading this as: SaaS landing for solo freelance designers (visually literate, spreadsheet-averse), with a calm, type-led, honest-tool language, leaning toward native CSS + Google Fonts (Outfit + IBM Plex Mono) and a near-monochrome palette with one ink-blue accent.
It set the dials to 7 / 5 / 4, lowering variance from the baseline 8 "because this is a money app and trust matters". It also resolved two conflicts in writing: the skill wants an icon library, but the brief allowed only Google Fonts, so it used no icons; and rather than a fake screenshot (which the skill bans) it built a small working version of the product in the hero, with a client menu on each sample transaction and totals that recompute.
With Taste Skill. The panel is labelled "Example transactions" and the tax figure "an example 25% rate".
The same brief with no skill.
What it got right
The tell counts at 1440 px:
| Tell | No skill | Taste Skill |
|---|---|---|
| All-caps labels | 9 | 0 |
A · B middle-dot strings |
4 | 0 |
| Spaced em dashes | 10 | 0 |
| Typefaces | Inter + Fraunces | Outfit + IBM Plex Mono |
| Horizontal scroll at 375 px | 16 px overflow | None |
Zero em dashes is notable: of the five pages in our test, only Taste Skill's and Impeccable's had none, and Taste Skill's rule is absolute. It was also the shortest page, about 460 visible words against 710 for the baseline, and it labels its sample data as examples in the interface itself.
The whole Taste Skill page, top to bottom (no sound). Watch it on skillgild.dev.
What it missed
Two of its own pre-flight items failed. The headline wrapped to three lines, and at 1440 by 900 the hero copy sits low with a large empty area above it, because it is centred against the taller transaction panel. The pre-flight check asks for a headline of two lines or fewer and says hero content must not "float halfway down the viewport". A long checklist is still checked by the same model that wrote the page, so look at the result yourself at the sizes you care about.
It also accented one word in the headline ("spreadsheet" in blue), which Taste Skill allows and Anthropic's skill discourages. And like every run in the test except Impeccable's, it invented product facts: a read-only bank link, receipt capture, CSV and PDF exports, email support "from the people who build" it, and 30 days to export your data after cancelling. None of that was in the brief.
The run took 13 turns and 7.1 minutes, with an API-equivalent cost of $2.28 reported by Claude Code. The baseline took 2 turns, 3.3 minutes and $0.98.
Taste Skill at 375 px: no horizontal scroll, and a menu button replaces the nav links.
Getting more from it
Taste Skill reacts to vibe words, references and audience, so give it those:
Use Taste Skill (design-taste-frontend) for this landing page.
Product facts, and nothing else: <what it does, price, trial>.
Audience: <who>. Feel: <two or three vibe words>. References: <URLs you like>.
Dials: variance <n>, motion <n>, density <n>.
State your design read and dials before writing code.
Setting the dials yourself is the fastest way to steer it: a lower DESIGN_VARIANCE for a sober product, a higher MOTION_INTENSITY for a launch page. For dashboards and multi-step product UI, the skill itself says it is out of scope; use Impeccable's Operate mode or UI UX Pro Max there.
See all ten in the top Claude frontend and design skills, with four of them run on the same brief.
Originally published at skillgild.dev.
Top comments (0)