The design-taste-frontend skill (Taste Skill): art direction for coding agents

Source: Leonxlnx/taste-skill · Maintainer: community: Leonxlnx · License: MIT · Checked: 23 October 2026

What is the taste skill?

Taste Skill, installed under the name design-taste-frontend, is an Agent Skill that makes coding agents design landing pages, marketing sites, portfolios and app screens with a real art direction instead of the default AI layout. It is for developers using Claude Code, Codex or Cursor who keep getting the same centred headline, icon cards and soft gradient.

The README puts it plainly: it "gives the agent an art direction, real pictures and a way to check its own work in a real browser." The SKILL.md description opens: "tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day)." It goes on to name the triggers: building, redesigning, restyling, polishing or reviewing any public-facing page in any stack, a user saying a page looks generic or "AI-made", and app screens such as dashboards, admin views and settings.

The repo is popular (about 101,000 GitHub stars, last pushed 20 October 2026), and its skills.sh page lists about 665,000 installs (snapshot, 23 October 2026). One naming quirk: the folder is skills/taste-skill, but the skill's name is design-taste-frontend, which is the name you install it by.

What does it do?

The SKILL.md opens with the problem: a model-built page "usually looks like the average of every page the model has seen." It replaces those defaults with decisions in four ways: a script deals directions and the agent chooses, the idea comes from the subject, a strict house style is measured in a real browser, and the agent looks at screenshots of what it made.

The run, in short. The skill splits work into pages (read and scrolled) and app screens (worked in), each with its own run. For a page, the agent:

1. Reads the brief and inventories eight to twelve things only this client has: its name, street, numbers, materials.
2. Writes the page as claims with proof, so sections exist for a reason.
3. Runs scripts/draw.mjs, which deals three of 20 researched directions; the agent picks one and the script deals the type system, palette, hero and section layouts.
4. Writes one idea sentence tying the subject to the direction, plus "one live thing" the visitor can do.
5. Writes the full copy before any markup. Proof is never invented: no fake customers, quotes or statistics.
6. Builds the page, then runs lint.mjs and inspect.mjs, which opens it at 1440, 768 and 390 pixels and fails banned patterns.
7. Critiques the screenshots, fixes the top three problems, and repeats up to three rounds, then adds motion and reports.

House rules. The inspector enforces a long list: headlines of two lines or fewer, no eyebrow labels, no monospace outside code, no 01/02/03 numbering, no hairline rules, no gradients, no shadows on resting elements, no glass, no cream-and-terracotta or violet "assistant palette," no rows of identical icon cards, two typefaces at most. The SKILL.md is honest that some rules come from the study's numbers and others are "the owner's taste."

What is in the folder. Per the skill folder:

• SKILL.md: the run, the house rules and the laws of the craft.
• references/: copy, type, colour, layout, imagery, motion, critique, tells, scroll scenes, app screens and the research write-up.
• scripts/: draw.mjs, assets.mjs (searches Openverse, Wikimedia Commons, the Art Institute of Chicago and the Met for credited pictures), lint.mjs, inspect.mjs, scenes.mjs.
• library/: the JSON data the draw reads, including 20 directions, heroes, sections, palettes, type systems and studied sites.
• assets/: an optional base CSS and JS, app styles, SVG charts and the shared stage for scroll scenes.
• evals/evals.json: ten briefs (four of them app screens) for testing the skill against a no-skill baseline.

How do you install the design-taste-frontend skill?

The README's install command uses the skills CLI:

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

The skills CLI needs Node.js 22.20 or later, installs into the current project by default and takes -g for all projects. For Claude Code, skills go under .claude/skills/ in the project or ~/.claude/skills/ globally; the skill folder's own README suggests ~/.claude/skills/design-taste-frontend/ if you copy it by hand.

As a Claude Code plugin. The README gives these commands, run inside Claude Code. The skill is then namespaced under taste-skill:, and /plugin update upgrades it later:

/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill

As a Codex plugin. The README documents codex plugin marketplace add Leonxlnx/taste-skill then codex plugin add taste-skill@taste-skill, followed by a new Codex session. Cursor and other agents read the same SKILL.md format; see Codex skills and Cursor skills.

From a clone. The repo's ./install.sh symlinks the skill into Claude Code (--codex for Codex, --all-agents for both), so a git pull updates it.

Uploading it to claude.ai as a ZIP is technically possible, but the inspector needs a local Chrome, so the full run is meant for a coding agent on your machine.

How do you use it?

Ask for page or screen work and the agent picks up the skill from its description. Give it the facts the run asks for: the subject, audience, the one action, the stack, any brand colours or fonts, and what imagery really exists. Some prompts to try:

• "Build a one-page site for a family bakery on Calle Mayor in Madrid. Main action: order a cake for pickup. Plain HTML and CSS. We have no photos of our own."
• "This landing page in src/app/page.tsx looks AI-made. Review it with the taste skill and name the three changes that would help most before you touch anything."
• "Restyle our pricing page. Keep the layout and all the content. Our brand colour is #1F4D3A and we use Inter, so keep those."
• "Design the analytics dashboard for our invoicing app: overdue invoices, cash in this month, top clients. Next.js and Tailwind."

Requirements, from the SKILL.md and README: Node 22+ and an installed Chrome, Edge or Chromium. The skill "installs nothing" and uses no API keys; assets.mjs needs network access. If Chrome or Node 22 is missing, the skill falls back to running lint.mjs (Node 18+) and critiquing whatever screenshots the agent can take.

How does it compare with frontend-design?

Both target the same problem. Anthropic's frontend-design skill is the light option; Taste Skill is the heavy one.

Pick frontend-design for quick UI work inside an existing product. Pick Taste Skill when a public page needs a distinct look and you can spend the time and tokens.

Tips and limits

• It is opinionated. The house rules ban things many brands use, like gradients, violet and monospace labels. With an existing brand, the SKILL.md says to pass --keep palette,type to the draw and --allow <rule> to the inspector for a rule the brand truly needs.
• Credit what it finds. Pictures from open collections keep their own licenses (CC0, public domain, CC BY, CC BY-SA by default), and the skill records them in assets/credits.json. Library photographs are placeholders from Unsplash via Lorem Picsum; replace them. Check each font's license too.
• Scores are model judgements. The folder README notes the scores in references/research.md "are model judgements from screenshots, not Awwwards scores."
• It runs scripts. The scripts drive a local browser over the DevTools protocol and fetch images from the network. Read them before running, as with any skill that executes code. skills.sh shows warnings from two of its three security scanners for this skill.
• History file. Draws are remembered in ~/.taste-skill/history.json so projects don't repeat; delete it to reset.

Save it in your Kipt library

Kipt keeps prompts and skills as Markdown in your own private GitHub repo. In Kipt, open Skills and paste the skill's GitHub folder link into the import box; Kipt reads the SKILL.md and its files, and for a repo with many skills it shows a list to pick from. You can also drop the folder or a .zip. Your saved skills install into Claude Code or Codex with one command. Kipt is not affiliated with the skill's author.

npx skills add https://github.com/<you>/<repo>.git --all -g

Similar skills

• frontend-design skill: Anthropic's lighter design skill, compared above.
• agent-browser skill: give your agent a real browser for testing the pages it builds.
• HyperFrames slideshow skill: presentation decks built from HTML.
• Claude skills examples: more skills and how they are structured.