Taste Skill

Taste Skill (tasteskill 2.5.0) is an Agent Skill, distributed as the design-taste-frontend skill for Claude Code and Codex, that steers coding agents away from generic AI landing pages toward company websites built on one design system, with real photographs, real brand icons and real product UI, verified in headless Chrome before delivery.

What is Taste Skill?

Taste Skill is an agent skill plus a set of plain Node 22+ scripts that a coding agent loads when asked to build or redesign a company site. It takes a brief and the client's business type as input and produces a static HTML page (starting from assets/starter.html plus assets/system.css and assets/layout/layout.css) along with a pass/warn/fail report from a browser checker. It is made by Leonxlnx and released under the MIT License.

Key features

• Business classification first — every build starts by sorting the client into one of six kinds (software, gaming, tech, product, service, place), which decides layout, photography and effects.
• Dealt design tokens — scripts/start.mjs deal --page <kind> prints a palette (library/palettes.json) and a Google Fonts pairing (library/type.json) as :root tokens and <head> links.
• Eleven hero layouts — assets/layout/deal.mjs picks from split, centred, product, photo, place, collage, editorial, word, film, statement and triptych, stress-tested by assets/layout/check.mjs.
• Real assets, not placeholders — scripts/photos.mjs deals vetted photographs (bundled Wikimedia Commons WebP sets and Unsplash frames) with enforced image weight and one expandable footer credit line; scripts/icons.mjs resolves real brand and interface SVGs locally.
• Effects gated by page kind — shader grounds, scroll moments, scroll scenes and procedural 3D prints go only to software, tech and gaming pages, within a four-context WebGL cap, with static fallbacks for phones and reduced motion.
• Browser verification — scripts/consistency.mjs renders the page over HTTP at 1440, 1024, 768 and 390 pixels wide and flags empty visuals, broken shaders, contrast drops, misaligned columns, section-height drift, placeholder text and invented street numbers.
• Extras — scripts/perf.mjs for page weight and speed, scripts/shoot.mjs for full-page and per-section screenshots.

Who is it for?

• Frontend developers using coding agents: ask the agent to build a company site and get a page that passes a defined rule set instead of a generic landing page.
• Designers auditing existing pages: design-taste-frontend includes the old redesign-existing-projects skill and audits a live page in a real browser before changing anything.
• Teams porting to frameworks: the tokens, section geometry, UI fragments and checks can be carried into React, Next.js, Vue, Svelte, Astro or Tailwind.

Use cases

• Landing-page builds: start the agent with a brief for a cafe, hotel, software product or gaming brand and get a single-screen-per-section page with matched left and right edges and a fixed nav.
• Benchmarking agent output: run node scripts/consistency.mjs <url or file> --page <kind> against a page your agent produced to see which rules fail at each breakpoint.
• Effect discipline: confirm that a hospitality or product page stays free of WebGL and scroll effects while a tech page gets shaders with a static fallback.

How does Taste Skill work?

1. Ask your agent to build or redesign a site; it loads the skill, classifies the business and plans the page screen by screen.
2. Run node scripts/start.mjs deal --page software to get tokens and a hero layout, then write markup from assets/starter.html with UI fragments from assets/ui/ and diagrams from assets/diagrams/.
3. Run node scripts/consistency.mjs <url or file> --page <kind> before handover.

Requirements and limitations

The skill needs Node 22 or newer and an installed Chrome, Edge or Chromium (set CHROME_PATH if it is non-standard); ffmpeg is optional and only used for WebP output and the phone crop of a hero photograph. It installs nothing and needs no API keys. Bundled Commons photographs work offline, but fetching additional photographs, Google Fonts or brand icons uses network access.

FAQ

Is Taste Skill free?

Yes. Taste Skill is MIT licensed (Copyright 2026 Leonxlnx) and free to use. Optional support is available through GitHub Sponsors, and the README notes that Kimi API buyers coming from the project get bonus credits.

Which agents does it support?

It ships as the design-taste-frontend skill installable with the npx skills CLI, as a Claude Code plugin namespaced under taste-skill:, as a Codex plugin added through the Codex plugin marketplace, and as a symlinked install from a clone via ./install.sh.

Do cafes and hotels get animation effects?

No. Shader grounds, scroll moments, scroll scenes and 3D prints are dealt only on software, tech and gaming pages. Places, shops, cafes, hotels, studios, services and everyday physical products stay on photographs, typography and flat colour.

Is there an official token or coin?

The README states that Taste Skill has no official token, coin or crypto project, and that any token using the author's name, image or project is unaffiliated and not endorsed.