Good taste for Claude Code

What it is and why it matters

Ask Claude Code for your app's page and you almost always get the same one: a centered headline, a small label above it, three boxes with an icon, a soft gradient. Nothing in it is wrong, but nothing in it is yours. It's the average of every page the model has seen.

Taste Skill is there to remove that average. It's an Agent Skill, meaning a folder of instructions and small programs that Claude uses when you ask it for a page. The code is open on GitHub under the MIT license, so it's free. It gives Claude an art direction, real photos from open archives and a check in a real browser before it tells you it's done.

It's for people who do everything alone and don't have a designer: founders, indie hackers, people who code with AI. It works with any technology, from React to plain HTML. The cost is time: a page takes 30 to 45 minutes and a few hundred thousand tokens.

1. What you need and how to install it

Before installing it, check two things on your computer:

• Node 22 or newer. Node is the program that runs JavaScript outside the browser: to see your version, type node -v in the terminal.
• Chrome, Edge or Chromium installed. It's needed to open the page and take screenshots of it.

You don't need any API keys, and it installs nothing of its own on your computer. It uses the internet only to look for photos. Then you install it as a Claude Code plugin:

1. Open Claude Code and type /plugin marketplace add Leonxlnx/taste-skill. It adds the catalog that contains the skill.
2. Then type /plugin install taste-skill@taste-skill. The skill goes into Claude Code under the taste-skill prefix, so it doesn't get mixed up with your other skills.
3. Open a new session, so you're sure Claude sees it. To update it later, there's /plugin update.

Or install it from the terminal with skills, a program that installs skills into coding assistants:

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

2. How it works, in six steps

Behind it there's a study: 248 sites collected from two design galleries, 156 from One Page Love and 92 from Awwwards' Sites of the Day, of which 247 loaded. The scores weren't given by people but by AI models, which judged them from screenshots and measurements. The study says so itself.

From there come the rules and twenty directions, meaning twenty ways to compose a page. When you ask it for a page, Claude does this:

1. It reads the request and takes inventory: eight to twelve things only your product has and no competitor does. The name and what it means, the numbers, the constraint it lives with.
2. A program, draw.mjs, deals three directions at random from the ones that fit the request, and Claude picks one. You don't choose: a model left to itself always takes the most predictable option.
3. It finds the idea: one sentence that ties something from your inventory to the chosen direction. If the sentence also works for your nearest competitor, it throws it out.
4. It builds the page with real photos: yours first. If you have none, assets.mjs looks for pictures of your world in open archives like Wikimedia Commons, Openverse, the Met and the Art Institute of Chicago (for video, also the Internet Archive and NASA), and it puts the credits on the page.
5. It runs the check. lint.mjs reads the code, inspect.mjs opens the page in a real browser at 1440, 768 and 390 pixels wide, down to the phone, and marks FAIL wherever a rule breaks: headlines over two lines, gradients, empty screens. Claude has to fix every FAIL.
6. It looks at its own screenshots, judges them, fixes the three worst problems and checks again. Three rounds at most.

At the end it gives you a report: the direction, the idea, what still falls short and the list of photos with author, license and source.

3. The first prompt: your app's page

The more you give it, the better it works. This is the prompt I'd use for the page of a fitness app built by a solo founder. Replace the parts in [ ] with yours:

Use the design-taste-frontend skill to create the landing page for [app name], an iPhone app that [what it does, in one sentence].
Who it's for: [who uses it].
The one thing the page must get people to do: [download the app from the App Store].
What only it has: [three or four true things: a number, a constraint, a habit].
Stack: [plain HTML / Next.js].
My photos: [folder with the real photos, or: none].
Don't invent reviews, customers or numbers. At the end, tell me the direction dealt, the idea and which sample texts I need to replace.

The last line matters. The skill doesn't invent reviews, customers or statistics, but it fills the gaps with sample texts and lists them in the report. You check those yourself, one by one.

4. Give it the material only you have

In the study, the highest-scored pages started from an idea taken from the product itself, not from the styling. So your job is to give it that raw material:

• The name and what it means. It can become the center of the page.
• Your real photos: you, the product, the place. Tell it they're yours and it puts them first. A real photo of the product ends up large on the first screen.
• The real screenshots of your app. For software, they're the strongest picture there is.
• The constraint: what you don't do, or only do in a certain way.

Here's my material for the page.
Name: [name], and it means [meaning].
My photos in [folder]: they're real, use them before any other.
App screenshots in [folder].
Real numbers: [numbers].
The constraint that makes us different: [constraint].
Start from these things for the inventory and the idea, not from the category.

5. Redoing a page you already have

If you already have the page, you don't start from scratch: redoing existing pages is part of the skill. Before touching anything, it opens your page in a real browser, measures it and saves the before screenshots. It keeps your technology, the content and what works, and changes typefaces, colors, margins and headings, and last the stock blocks. At the end it shows you before and after.

Use the design-taste-frontend skill to redo the page at [path or local address]. First record how it looks now, with measurements and screenshots. Keep the stack, the content, and the links and forms that work. At the end, show me before and after at all three widths and tell me what you changed.

6. Dashboards and app screens

It also works for the screens where people work: dashboards, admin panels, settings. Here it follows its own route, from a separate study of 23 screens from real products: draw.mjs --app deals a style for your kind of product, and inspect.mjs --app checks with its own rules, like color only on data and aligned numbers.

Use the design-taste-frontend skill for the dashboard of [app]: it's a screen people work in, not a page to read. Who uses it: [who]. The question it must answer first: [question]. Realistic data that adds up: [data or file]. Use the same colors and typefaces as my landing page.

Common mistakes

• Running it without checking how much usage you have left. A page is 30 to 45 minutes and a few hundred thousand tokens: on a plan with limits, that's a big share. Do it when you have room.
• Giving it a one-line request. Without your material, the idea comes from the category, and the page goes back to looking like all the others.
• Using it without Node 22 or without Chrome. The inspector doesn't start: Claude only checks the code, looks at screenshots taken another way and tells you the inspector didn't run.

Checklist

• I have Node 22 or newer and Chrome, Edge or Chromium
• Taste Skill is installed and Claude recognizes it
• The prompt has the name, what it does, who it's for and the one thing to get people to do
• The inspector ends with zero FAILs at 1440, 768 and 390
• I replaced the sample texts listed in the report
• The photo credits are at the bottom of the page

Frequently asked questions