Skip to content
Get packs

Guide · Open source

How to use taste-skill: install and build a page with Claude Code or Codex

Updated · written with AI from the project's own documentation and checked against our catalogue data

Taste Skill is an open-source Agent Skill for coding agents such as Claude Code and Codex. It gives the agent an art direction, real photographs from open archives and a way to check its own page in a real browser, so the result is less like a generic AI-made landing page. This guide shows how to install it, what you need on your machine, and what a build involves so you can run one yourself.

Taste SkillLeonxlnx/taste-skill · ★ 108k · MIT

Quick start

  1. 1Check prerequisites. Make sure Node.js 22 or newer and Chrome, Edge or Chromium are installed, and that the machine has internet access.
  2. 2Install the skill. Run the npx skills add command with the design-taste-frontend skill name from the README.
  3. 3Restart or start a session. Start a new Claude Code or Codex session so the skill is loaded.
  4. 4Write a brief. Describe the client, the goal and the material you have for the page.
  5. 5Let the build run. Expect roughly 30 to 45 minutes and a few hundred thousand tokens for a full page.
  6. 6Review the result. Check the page and the credits, and replace any pictures you want to swap for your own.

Check the prerequisites before you install

The skill runs its scripts with Node 22 or newer and an installed Chrome, Edge or Chromium. It installs nothing and needs no API keys.

Finding pictures needs network access, so the skill will not work fully on a project that cannot reach the internet.

  • Node.js 22 or newer
  • Chrome, Edge or Chromium installed
  • Internet access for finding pictures

Install the design-taste-frontend skill

Install the skill with the npx skills CLI using the command from the project README. The install name is design-taste-frontend.

If you already have the skill, run the same install command again; the install name did not change.

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

Install as a Claude Code or Codex plugin instead

The README also lists a Claude Code plugin and a Codex plugin. In Claude Code the skill is namespaced under taste-skill:, so it does not collide with your other skills. In Codex, start a new session after adding the plugin so the skill is loaded.

If you work from a clone, the README says ./install.sh symlinks the skill into Claude Code, with --codex for Codex or --all-agents for both, so a git pull updates it in place.

  • Claude Code: /plugin marketplace add Leonxlnx/taste-skill, then /plugin install taste-skill@taste-skill
  • Codex: codex plugin marketplace add Leonxlnx/taste-skill, then codex plugin add taste-skill@taste-skill
  • From a clone: ./install.sh, or ./install.sh --codex, or ./install.sh --all-agents
/plugin marketplace add Leonxlnx/taste-skill /plugin install taste-skill@taste-skill

Run a build and know what to expect

A build runs in six steps: the skill reads the brief and lists what only this client has, deals three of 20 researched directions for the agent to pick from, finds one idea tying the client's material to that direction, builds with real pictures and footage from open collections, checks the page in a real browser at three widths, and then reviews its own screenshots for up to three rounds.

The README says a build takes roughly 30 to 45 minutes and a few hundred thousand tokens. It is not suited to a quick one-line component.

  • Reads the brief and lists what only this client has
  • Deals three of 20 directions and the agent picks one
  • Builds with credited real pictures and footage
  • Checks the page at three widths and fails it on slop
  • Fixes the top three problems in its own screenshots, up to three rounds

Use it for dashboards and app screens

Since v2.1 the README says the skill also handles dashboards and app screens. It deals one of the app styles distilled from real product screens, builds the shell, data, charts and tables, and checks the result with app rules such as a phone layout where navigation folds away.

For these the skill has its own checks, run with inspect.mjs --app.

Handle the pictures and credits

The README says photographs come from open collections such as Wikimedia Commons, Openverse and the Met. Only public domain, CC0, CC BY and CC BY-SA files are offered, and the skill puts the credits on the page. The project links a credits file in its examples folder.

Replace the pictures with your own when you have them, and keep the credits if you use the offered files.

  • Sources named in the README: Wikimedia Commons, Openverse, the Met
  • Licences offered: public domain, CC0, CC BY, CC BY-SA

Find moved skills

The README says this repo holds one skill, design-taste-frontend. Older skills moved to separate repos and kept their install names. To install a moved skill, use its new repo with the same name.

  • Classic skills: Leonxlnx/taste-skill-classics
  • Image skills: Leonxlnx/imagegen-skills
  • full-output-enforcement was removed; see Leonxlnx/unlazy
npx skills add https://github.com/Leonxlnx/taste-skill-classics --skill "high-end-visual-design"

What people use it for

  • Prototyping a landing page from a brief for a client
  • Building a marketing page that needs real imagery with credits
  • Creating a dashboard, admin view or settings screen in Claude Code or Codex
  • Replacing a generic AI-made page with a more art-directed version

Frequently asked questions

Is taste-skill free?

The project is released under the MIT licence, as shown on its repository. The README says the skill installs nothing and needs no API keys.

What do I need to run taste-skill?

The README lists Node.js 22 or newer and Chrome, Edge or Chromium. The skill also needs network access to find pictures.

How do I install taste-skill in Claude Code?

The README gives a plugin route: run /plugin marketplace add Leonxlnx/taste-skill, then /plugin install taste-skill@taste-skill. You can also use the npx skills add command.

Does taste-skill work with React, Vue or plain HTML?

The README says yes, because the rules are about design rather than a framework.

Why is a build slow?

A full build runs six steps, including browser checks at three widths and up to three rounds of fixes. The README says this takes roughly 30 to 45 minutes and a few hundred thousand tokens.

Can I use the pictures it finds?

The README says only public domain, CC0, CC BY and CC BY-SA files are offered, and the skill puts the credits on the page. Check the licence of each file before you publish.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Taste Skill suits developers using Claude Code or Codex who want less generic frontend output, and designers or teams prototyping landing pages that need credited real imagery. It is a poor fit if you want a quick single component, if your machine lacks Node 22+ or a Chromium-based browser, or if your project cannot reach the internet.

Install options & downloads