Taste Skill: A Design Skill That Helps Claude Code Build Beautiful Websites, Free of AI Slop

You get a brief for a small company’s website: a logo, a few lines of description, a few office photos. You hand it to Claude Code, wait a few minutes, and open the result — a purple-gradient hero, a generic headline, three feature cards identical to every other landing page, a “Get Started” button, and stock-looking imagery that is clearly not real.

You rewrite the prompt and ask for something more distinctive. The agent switches the gradient to blue, changes the font, shuffles the cards — but the page still smells like AI. The client opens the demo and says: “It looks like a template. I can’t see our company in it.” The problem is not that the agent writes bad code. It has no taste — and no way to check its own work.

Taste Skill exists to close exactly those two gaps: an open-source agent skill, version 2.5.1, by Leonxlnx/taste-skill, under the MIT license, with 111,442 stars and 7,491 forks as of 2026-11-07.

Why Every AI Landing Page Looks the Same

A client spots it immediately: nothing on the page belongs only to them — no real photos, no real numbers or address that only their company could have.

In my view, AI slop is soulless sameness — a longer prompt is not enough. You need curated design decisions before the build and a verification loop after it.

What Is Taste Skill?

The Leonxlnx/taste-skill repo currently holds a single skill: design-taste-frontend, which guides Claude Code, Codex, and compatible agents to design professional company websites instead of generic landing pages. Its scope is company, product, service, and place websites. It works with plain HTML from the bundled starter, or with an existing React, Vue, Svelte, Astro, or Tailwind project; for Next.js, only static export is supported.

Install this skill — the older skills have moved to taste-skill-classics and imagegen-skills.

Taste Skill tackles three problems: missing art direction, fake imagery and UI (placeholders, AI images, invented street numbers), and no visual verification after the build. It suits developers using Claude Code or Codex, freelancers building sites for clients, indie makers, and IT admins who need a quick internal introduction page. It does not replace a designer for complex brand identity work.

The README banner also introduces TasteCode (tastecode.dev) as a free, open-source desktop app — I have not downloaded or run it, so I do not recommend installing it for production.

Architecture and How It Works

The biggest difference: taste is encoded as curated data and verification scripts, instead of leaving the LLM to improvise inside a prompt.

Classify First, Design Second

Before writing any interface, the agent classifies the brief into one of 6 kinds — software, gaming, tech, product, service, place — then plans the page screen by screen. A café (place) needs real photos, opening hours, and a real address; a SaaS product (software) needs real product UI and a flow diagram. Classify the kind wrong, and the palette, layout, and effects all go wrong.

The “Deal” Mechanism for Palette, Fonts, and Hero Layout

The script scripts/start.mjs deals a palette and a Google Fonts pairing by kind, drawn from library/palettes.json and library/type.json. In parallel, assets/layout/deal.mjs deals one of 11 tested hero layouts: split, centred, product, photo, place, collage, editorial, word, film, statement, triptych. Each page uses its own design system — assets/starter.html, assets/system.css, assets/layout/layout.css — with one section per screen at desktop 1440×900.

Real Photos and Real UI

The skill uses lit feature cards, HTML UI fragments rewritten to match the real product, and real SVGs via scripts/icons.mjs. Photos come from Wikimedia Commons and Unsplash via scripts/photos.mjs, with credit in the footer — keep it when you hand the site over.

Effects are limited by kind: only tech, gaming, and software pages get shader grounds, scroll scenes, and procedural 3D prints, within a 4-WebGL-context cap, with static fallbacks for mobile and reduced motion. The other kinds use only photos and typography, no WebGL.

Browser Checker and Finish Gate

After the build, the page is verified over HTTP in headless Chrome using scripts/consistency.mjs, assets/layout/check.mjs, scripts/perf.mjs, and scripts/shoot.mjs, rendered at 5 viewports — 1440, 1024, 820, 768, and 390 — to catch empty visuals, broken shaders, contrast drops, misaligned columns, placeholder text, invented street numbers, and missing images on slow networks. Then scripts/gate.mjs holds the work unfinished until no fixable FAIL remains, up to 3 rounds — the gate does not guarantee “no errors left”.

Workflow Diagram

flowchart TD
    A[Brief: business type, content, real photos] --> B[Classify kind: software, gaming, tech, product, service, place]
    B --> C[Deal palette + Fonts: start.mjs]
    B --> D[Deal 1 of 11 hero layouts: deal.mjs]
    C --> E[Build: starter.html + system.css + layout.css]
    D --> E
    E --> F[Real photos photos.mjs, real UI icons.mjs]
    F --> G[Effects by kind]
    G --> H[Verify in headless Chrome, 5 viewports]
    H --> I{gate.mjs: any fixable FAIL left?}
    I -- Yes, under 3 rounds --> E
    I -- No FAIL or 3 rounds reached --> J[Hand over the page]
    K[Node 22+, real Chrome; no API key] -.-> H

The main flow is a build → check → gate → fix loop, not a one-way line; the taste lives in the curated library and the verification scripts.

Requirements: Node 22+ and installed Chrome, Edge, or Chromium (CHROME_PATH if the browser is in a non-standard location). ffmpeg is optional only. No extra packages are installed, no API key is needed, but network access is still required for Google Fonts, extra photos, and brand icons. For Next.js, only static export is supported.

Installation for Claude Code and Codex

I have not installed and run this hands-on; I only cross-checked the commands against the official documentation, version 2.5.1, read on 2026-11-07. Before installing, check node --version is 22 or higher and that Chrome opens — without Chrome, the checker and gate cannot run.

Option 1 — npx skills (quick try):

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

Option 2 — plugin for Claude Code and Codex. In Claude Code:

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

The skill lives under the taste-skill: namespace; upgrade with /plugin update. For Codex:

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

Open a new Codex session after installing.

Option 3 — clone the repo and use install.sh:

git clone https://github.com/Leonxlnx/taste-skill.git
cd taste-skill
./install.sh

Add --codex to install for Codex, or --all-agents for both. Update with git pull.

First run. From the project folder, run the deal command with the kind matching your real brief:

node scripts/start.mjs deal --page software

Replace software with your brief’s kind. Check a built page with:

node scripts/consistency.mjs <url or file> --page <kind>

Expected result: a palette, fonts, and layout have been dealt; the checker runs across 5 viewports; the gate reports PASS or lists FAILs to fix. I do not quote sample logs because I have not run it.

Common Errors

On rollback: before running the checker and gate on a client’s project, commit the working version. If the gate breaks the layout, return to that commit. For a clone, check out tag v2.5.1 again.

Review — Pros, Cons, Security, Operations

Pros. Systematic art direction instead of free-form prompting. Real photos and real UI make the page more trustworthy in a client demo. A real-browser checker and finish gate catch visual errors before handover. Lightweight setup, no API key; the repo has 111,442 stars, with the latest push on 2026-11-07.

Cons. Variety is bounded by the curated library: 11 hero layouts and dealt palettes can make sites of the same kind share a similar aesthetic family. The skill depends on a real browser and Node 22+, which is hard to run in a headless or minimal-CI environment without Chrome. The gate caps at 3 rounds, so persistent errors after that still need human intervention.

In my view, the biggest trade-off: the skill reduces dependence on prompting skill, but increases dependence on the runtime environment and on the initial kind classification.

Security. No API key and no extra packages mean the credential attack surface is near zero. Still, photos, fonts, and icons fetched from the network need their sources checked. The skill runs local Node scripts, so only run code from the official repo or the verified v2.5.1 release — do not install from an unknown fork.

Performance and operations. This article gives no benchmark or Lighthouse score, because no measured figures exist. Only design-level factors apply: a 4-WebGL-context cap, static fallbacks for mobile, optional WebP images via ffmpeg, and verification at 5 viewports. Update with git pull or /plugin update; each time you change kind, deal again and rerun consistency and the gate.

Comparison with Hallmark, Impeccable, and Prompt-Only Work

Taste Skill differs because it is a closed loop that generates and verifies pages, not just a rule set or a gate set. Hallmark fits when you need a quick anti-slop fix; Impeccable fits when you need gates in CI. Read Hallmark, Impeccable, Superpowers, and CC Switch to pick the right tool.

Real Use Cases

Freelancers and agencies building client websites. For a SaaS or company landing page of kind software or tech: brief → deal → build → checker and gate before the client demo.

Indie makers and full-stack developers. For a product page, the skill uses real UI instead of invented mockups, saving many design-revision rounds.

Service and place websites. For kinds service and place, the skill uses real photos and typography, no WebGL — suited to cafés, hotels, shops, and studios that need real photos and real information.

IT admins and internal teams. An IT admin can use the skill for an internal service introduction page, a docs page, or a landing page for an internal tool. Limit: it builds introduction pages; it does not replace a complex dashboard or admin UI.

Lessons Learned

1. An AI’s taste does not come from a longer prompt, but from a curated library organised by business type.
2. Real photos and real UI are the clearest line between a “professional website” and “AI slop”.
3. Verification must run in a real browser at several viewports; eyeballing will not catch misaligned columns, contrast drops, or broken shaders.
4. A finish gate only has value with a round limit — at most 3 rounds, after which remaining errors need a human.
5. Even a good skill still needs a human to decide the brief and the initial kind — a wrong classification sends everything in the wrong direction.
6. Do not install a skill from an unknown fork — local Node scripts run on your machine, so the source must be Leonxlnx/taste-skill or the verified v2.5.1 release.

Conclusion

Use it if you work with Claude Code or Codex and want to hand a website to a client without the AI smell; if you are a freelancer or indie maker who needs a good-looking landing page fast; or if your team needs to standardise interface quality without a designer. The deal → build → check → gate loop lets you deliver a verified page instead of one that merely “looks fine”.

Do not use it if the project needs deep, custom brand identity, if a design system already exists, or if you only need a very simple static page where preparing Node 22 and Chrome costs more than it gains.

Next step: pick the kind that matches your real brief, install it using one of the three methods above, run node scripts/start.mjs deal --page <kind>, then run node scripts/consistency.mjs and the gate before demoing to a client.

Verification Scope

Checked on: 2026-11-07. Sources: the README and GitHub API for Leonxlnx/taste-skill, release v2.5.1, plus third-party records. Verified: version 2.5.1, stars and forks, install commands (npx skills, Claude Code/Codex plugins, install.sh), Node 22+ and Chrome requirements, optional ffmpeg, 6 kinds, 11 hero layouts, checker at 5 viewports, gate of at most 3 rounds, no API key. Default vs opt-in: WebGL only by default for tech, gaming, and software; bundled Wikimedia photos work offline by default; ffmpeg is opt-in; TasteCode is not independently verified. The numbers 11 layouts, 6 kinds, 5 viewports, a gate of at most 3 rounds, and a 4-WebGL-context cap are configuration figures, not benchmarks. Not verified: no hands-on install or run; page quality at “figma.com / x.ai level” is the author’s claim; the stars growth and the 247-gallery-sites study are third-party records.

References

• Taste Skill — official repo: https://github.com/Leonxlnx/taste-skill
• Taste Skill — official website: https://tasteskill.dev
• Taste Skill v2.5.1 — release: https://github.com/Leonxlnx/taste-skill/releases/tag/v2.5.1
• TasteCode — desktop app: https://tastecode.dev