How to use Taste Skill in Codex and Claude Code.
Taste Skill is the best-known design skill for making AI-built websites look less generic. Version 2.5, released on November 4, 2026, is a complete rebuild for company and marketing websites. This tutorial covers what it needs, how to install it in Codex and Claude Code, how a build works, and how to get the most out of it.
Updated November 6, 2026 · 7 min read
What Taste Skill 2.5 does
Taste Skill is an open-source skill (MIT license) by Leonxlnx, installed as design-taste-frontend. Version 2.5 builds company websites with plain copy, one design system, one section per screen, equal left and right edges, real photographs, real brand icons, and real product UI. Shader effects and scroll scenes are kept for software, tech, and gaming pages only, and a checker verifies every page in a real browser before the agent hands it over.
What you need
- Node.js 22 or later.
- Chrome, Edge, or Chromium. Set
CHROME_PATHif it’s installed somewhere unusual. - Optional: ffmpeg, for WebP photos and the phone crop of a hero photo.
It installs nothing and needs no API keys. Its bundled photos work offline; downloading extra photos, fonts, or icons needs network access.
Install it
Codex:
codex plugin marketplace add Leonxlnx/taste-skill
codex plugin add taste-skill@taste-skill
Start a new Codex session afterwards so the skill loads.
Claude Code:
/plugin marketplace add Leonxlnx/taste-skill
/plugin install taste-skill@taste-skill
In Claude Code the skill is namespaced as taste-skill:. Run /plugin update to upgrade it later.
Any agent that supports the npx skills CLI:
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
Already installed an older version? Run the same install command again; the install name hasn’t changed.
Build a page with it
Ask your agent to build or redesign a company website. The skill loads on its own, copies its assets into your project, and starts from its starter page. Give it real material, because the skill is built around substance: the name, what the business does, real numbers, opening hours, and photos if you have them.
Build the website for [Ostra, a small seafood bar in Lisbon with 24 seats]. It opens [Tuesday to Saturday, 6 pm to midnight], the menu changes [daily with the morning catch], and bookings go through [a phone number and Instagram]. Use the Taste Skill to plan the page screen by screen before writing any markup, and run its checker before you hand the page over.
Every build follows the same steps:
- Classify the business as software, gaming, tech, product, service, or place, and plan the page screen by screen.
- Deal the tokens and layout. A script deals a palette and a Google Fonts pairing for that kind of page, plus one of eleven tested hero layouts.
- Start from one system: one section per screen at 1440×900, equal edges, a fixed navigation bar, and a closing footer.
- Show real things: product UI fragments and diagrams for software and tech; curated, credited photographs for places, shops, and services.
- Keep effects for tech and gaming. Cafes, hotels, shops, studios, and services get no WebGL or scroll effects.
- Check in a real browser at 1440, 1024, 768, and 390 pixels wide, catching empty visuals, contrast drops, misaligned columns, placeholder text, and more.
To redesign an existing page, ask the same way. The skill audits the current page in a browser before it changes anything.
Run its tools yourself
All the tools are plain Node scripts in the skill folder. Two are worth knowing:
# Deal a palette and font pairing for a kind of page
node scripts/start.mjs deal --page software
# Check a built page (a URL or a file) against the rules
node scripts/consistency.mjs <url or file> --page software
The checker prints PASS, WARN, or FAIL for each rule, which is a quick way to see why a page still looks off.
Where the other Taste skills went
The repository now holds one skill. The older style skills (high-end-visual-design, minimalist-ui, industrial-brutalist-ui, gpt-taste, stitch-design-taste) moved to Leonxlnx/taste-skill-classics, and the image-first skills (imagegen-frontend-web, imagegen-frontend-mobile, brandkit, image-to-code) moved to Leonxlnx/imagegen-skills. They keep their install names:
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"
When to use something else
- Mobile apps and dashboards. Version 2.5 is built for websites. For app screens, see Impeccable and UI UX Pro Max, or start from an app system in our design system library.
- An existing brand. Taste Skill deals its own palette and fonts. If your brand already has them, put them in a DESIGN.md and tell the agent to keep them.
- Choosing between directions. Each build deals one palette, one font pairing, and one hero layout. If you want to compare several looks, ask for two or three versions of the first screen and look at them side by side.
Frequently asked questions
Is Taste Skill free?
Yes. It’s open source under the MIT license. Its author also offers TasteCode, a free, open-source desktop app with the skill and a design agent built in.
Does Taste Skill work with React or Next.js?
Yes. You can ship the plain HTML it builds, or ask the agent to port the same tokens, section layout, and checks into React, Next.js, Vue, Svelte, Astro, or Tailwind.
Why does Taste Skill need Chrome?
Its checker renders each page in headless Chrome at four widths to verify the rules, such as contrast and alignment, instead of trusting the code.