Claude Code Has No Design Taste. Three Skills Give It Some.

Ask Claude Code to build you a site and it will. The page loads, the buttons click, the copy is fine, and it looks like every other AI-built page you have seen. The template feel is the giveaway. A client clocks it in about two seconds.

That is not the model hitting its ceiling. A bare model was never shown what good design looks like, so it reaches for the most average version of every choice. Average choices stacked on top of each other read as generic, and that is the whole problem.

Here is the fix before I explain any of it. You install three skills, each one a small folder of instructions that sits on your machine. One teaches motion. One runs a design audit on a single command. One gives Claude actual taste. Install all three, start a new session, and the same plain-English brief comes back looking like someone paid for it.

What Is a Claude Code Skill?

A skill is a markdown file you drop into a folder that Claude reads. It is not a plugin and it is not code. It is a set of structured instructions that teach Claude how to handle a specific job. Once the file is in place, Claude loads it at the start of every session and follows it without being reminded.

Picture the default model as a strong developer who has never opened a design portfolio. It writes working code that looks plain. A design skill hands that same developer the reference material: easing curves, whitespace, type scale, contrast, visual hierarchy. The code still works. Now it looks expensive.

Skills live in one of two places. Put a skill in ~/.claude/skills/ and it works in every project on your machine. Put it in .claude/skills/ inside a repo and it ships with that project to your team through Git. For everything below, the personal folder is what you want.

How to Install a Skill

You have two reliable methods. Pick the one that fits, and keep the second as the fallback that always works.

The fast method uses the open skills CLI:

npx skills add owner/repo

That command pulls the skill from its GitHub repo and drops it into the right folder for Claude Code. It also works across other agents, Codex and Cursor among them, so you are not locking yourself to one tool.

The guaranteed method is manual. It never fails, because there is nothing for the terminal to recognize:

# 1. Clone the repo
git clone https://github.com/owner/repo.git /tmp/skill

# 2. Copy it into your skills folder
cp -r /tmp/skill ~/.claude/skills/skill-name

# 3. Clean up
rm -rf /tmp/skill

Some Claude Code versions also expose a direct install command. If you try one and the terminal says it does not recognize the command, your version is older. Do not fight it. Use the manual clone above and move on.

After either method, start a new Claude Code session. Skills load at startup, so anything you add mid-session will not appear until you restart. That single detail is behind most of the "I installed it and nothing happened" confusion.

Skill 1: Motion and Easing

Built by Emil Kowalski, the designer behind animations.dev.

What It Does

It teaches Claude how motion actually works. Without it, Claude builds interfaces where elements blink in and out. Things just appear. With it, they slide, fade, scale, and settle using the easing a professional would reach for.

In practice that means hover states that transition instead of snapping, elements that enter in a staggered sequence instead of all at once, and modals and dropdowns that animate in and out on proper timing. Scroll-triggered motion uses spring physics rather than a flat linear crawl.

Install It

npx skills add emilkowalski/skill

Or clone github.com/emilkowalski/skill and copy it into ~/.claude/skills/ by hand.

Your First Real Run

Take a page you already have and ask Claude to add one entrance animation and one hover transition. Nothing more. Load it and watch once. Motion should move your eye toward what matters, not announce itself. If an animation is the first thing you notice, that is the one to cut. Done. The page now moves with intent.

The Mistake That Makes It Fail

Adding motion first and taste later. Animation on top of a generic layout is a generic layout that moves. Motion is the last coat, not the primer. Install this skill, but do not lead your build with it.

Skill 2: Impeccable

Built by Paul Bakaus, who created jQuery UI and led Chrome DevTools. It is open source and passed ten thousand GitHub stars inside four months.

What It Does

Impeccable gives Claude a set of about twenty design commands covering typography, color contrast, layout, and spacing. The one that earns its place is /polish. Run it on a finished interface and Claude sweeps the whole thing in a single pass: it fixes inconsistent spacing, tightens the type, corrects contrast that fails accessibility, and aligns elements that drifted. It reads like handing your work to a design reviewer who checks every detail you would have missed.

Other commands are worth knowing. /audit runs an accessibility and responsiveness check. /critique gives you a blunt UX review. /animate adds purposeful motion. But /polish is the one you will reach for on every build.

Install It

npx skills add pbakaus/impeccable

Or clone github.com/pbakaus/impeccable into your skills folder.

Your First Real Run

Build or open an interface, then type /polish in Claude Code and let it scan and rewrite. Put the before and after side by side. That gap is the entire point of the skill. On most first runs the spacing and typography corrections alone are worth the two minutes the install took.

The Mistake That Makes It Fail

Treating /polish as a substitute for judgment. It fixes execution, not direction. If the layout was pointed at the wrong idea, a polished version is a well-typeset version of the wrong idea. Run polish last, after you already like the bones.

Skill 3: Taste

Built by Leon. Of the three, this is the one that moves the needle most.

What It Does

Taste gives Claude access to real, curated design references instead of leaning on whatever averaged out of its training data. That distinction is the whole game. Left alone, Claude defaults to safe and forgettable, because safe is what a blank file rewards. With Taste installed, it pulls from higher-quality patterns and produces layouts that read as intentional.

Layouts move from a Bootstrap-default look toward compositions with a point of view. Type gets a real scale and weight instead of one flat size. Color becomes a considered palette rather than a random pick. The skill points Claude at real example builds, so it is reasoning from work that already exists rather than inventing an aesthetic from nothing. The guide lists a handful of those sites, from a dark cinematic scroll showcase to a clean commercial landing page, as evidence of the range.

Install It

npx skills add Leonxlnx/taste-skill

Or clone github.com/Leonxlnx/taste-skill into your skills folder.

Your First Real Run

Rebuild one page you already have with Taste installed and nothing else changed in your brief. Same words, same request. Compare it to the version the bare model gave you. If the new one looks like a different company made it, the skill is doing its job. Done.

The Mistake That Makes It Fail

Installing the other two first and wondering why the output still feels flat. Motion and polish refine what is already on the page. Taste decides what goes on the page in the first place. If you only install one of the three, install this one.

How the Three Work Together

They are not competing. Each one handles a different layer of the same problem.

The workflow follows the same order:

1. Build with all three installed. Taste shapes the first draft.
2. Run /polish. Impeccable cleans up spacing, type, and contrast.
3. Ask for motion in plain words. Emil's skill handles the animation.
4. Ship a page that looks like a funded startup's site instead of a demo.

The order is not decoration. Taste sets the standard everything else gets measured against. Polish and motion make a good layout better, and neither one can rescue a weak one. Install them in that order and each skill has something worth refining.

Who This Is Really For

If you build or sell websites, this is the part that matters. The building half of web work is getting commoditized fast, and the taste half is not. Those two used to sit on the same invoice. They are separating now. The freelancer pitching your client next month is showing up with a setup like this one, and their edge stops being the hours of hand-building. It becomes the judgment about what to build. That is a better business to be in anyway, even on the week the old pricing stops working.

If you would rather install one packaged bundle than three separate skills, the component-library web design stack is the alternative approach, built around 21st.dev and Framer Motion instead of these named skills. And if your output still feels generic after all this, the problem is usually the brief, not the tools. The five-input brief fixes that side.

Honest: The Limits You Should Know

These skills do not make design judgment optional. They give Claude taste, but it will still hand you a good result and a bad one with equal confidence. If you cannot tell which is which, you will ship the wrong one. The skills raise the floor. You are still the ceiling.

They do not replace strategy either. A page pointed at the wrong offer sells nothing no matter how it looks. This makes the page look right. It does not decide what the page should say or who it is for.

They are also not one click. You are installing three skills, restarting a session, and reviewing output like the person responsible for it. The setup runs once. The reviewing runs every time. When /polish over-corrects or the motion gets busy, say so plainly: too much movement, cut everything except the hero fade. Claude will pull it back.

One version note. Skills change, repos move, and install commands get renamed. If a command errors, fall back to the manual clone and check the skill's own page for the current path. The manual method is the one that keeps working when the convenience layer shifts under you.

If You Only Do One Thing This Week

Install Taste and rebuild one page you already have. Not a new project. One existing page, same brief, run through the model with the skill loaded. Give it thirty minutes. If the result is worse, you spent half an hour and you keep your old page. If it is better, you just found out your whole build process is about to get shorter. Add Impeccable and the motion skill once the first one has earned the space.