The Best Claude Skills for Web Design

Everyone has now watched Claude build a landing page in four minutes, and everyone has had the same second thought: it's good, but it looks like all the others. Big centred hero, soft gradient behind it, three feature cards, a stats row, a dark footer. Technically fine. Completely forgettable.

Skills are the fix, and they're the most underused part of the toolbox. A skill is a folder of instructions the model loads when it becomes relevant, and a few of them are genuinely excellent at design. This is the honest rundown of which ones matter for websites, what each is actually good at, and where each one lets you down. We use these every day to build customer sites, so the criticism is first-hand, not a feature list.

What a Claude Skill is, in one minute

An Agent Skill is a directory with a SKILL.md file in it: some YAML at the top saying what it does and when to use it, then instructions, and optionally reference files and scripts. Claude loads it in stages. The name and description are always in context (roughly 100 tokens each), the instructions load only when a request matches, and bundled reference files cost nothing until they're read. That's why you can install a dozen skills without slowing anything down.

They work in Claude Code (drop the folder in ~/.claude/skills/ for yourself, or .claude/skills/ for a project), on claude.ai (upload a zip under Settings, on the paid plans), and through the API. One caveat worth taking seriously: a skill is instructions plus code that Claude will run, so install them the way you'd install any other software, from sources you trust, and read what's in the folder first.

The short list

1. frontend-design: the baseline everyone should have

Where: Anthropic's own skills repository. It's the reference implementation, and several other design skills build on top of it.

What makes it work is that it forces a decision before any code gets written. Pick a tone and go to an extreme with it: brutally minimal, maximalist, retro-futuristic, editorial, art deco, industrial. Then it hands over a set of rules that are surprisingly specific. Avoid Arial, Inter and system fonts; pair a distinctive display face with a refined body face. Commit to a dominant colour with sharp accents rather than a timid, evenly spread palette. Spend the motion budget on one well-orchestrated page load with staggered reveals instead of scattering micro-interactions everywhere. Break the grid. Give the background atmosphere rather than a flat fill. And it carries an explicit blocklist of the AI look, purple gradients on white in particular.

Use it for: components, dashboards, internal tools, a quick landing page, anything where you already have the concept in your head and just want it executed properly. It is also the right skill when consistency matters more than surprise.

2. impeccable: the one that works out what the business is

Where: pbakaus/impeccable, installed with npx impeccable install. It builds on frontend-design and goes considerably further. It's also one of the fastest-growing skills out there, north of 250,000 installs as of September 2026.

Four things make it different in practice:

• It picks a mode first. Persuade, Operate, Read or Experience, meaning "what does success look like for a visitor on this particular surface". A pricing page and a settings screen are different jobs, and it stops treating them the same way.
• It has 24 commands, not one. shape, critique, audit, polish, bolder, quieter, distill, harden, animate, typeset, layout, delight, overdrive, adapt, optimize, clarify. So "make it calmer" or "this looks cheap" become instructions with a procedure behind them rather than vibes you hope land.
• Refinement and redesign are separate decisions. Refinement keeps the identity and touches nothing outside scope. Redesign treats the old look as evidence of what not to do and replaces it. It refuses to split the difference, which is exactly the mush most AI redesigns produce.
• It remembers. Product and design context get written down, so the next session starts where the last one ended. It also ships deterministic checks that catch known anti-patterns without a model call.

But the reason to install it is none of those. It's that impeccable goes looking for the idea. Ask it to redesign a page and it reads what the business actually does, then tries to find a form that carries it. A doctor's practice page laid out like a prescription. A physiotherapist's homepage that reads like the treatment plan you'd work through. A materials manufacturer whose entire homepage is one molecule chain that draws itself as you scroll, with each link explaining one thing you can specify. That's the difference between a site that looks designed and a site that looks like it's about something.

Three things we've learned running it on real customer sites:

• It takes you literally, so be careful with the word "redesign". Say "refine this hero" if that's what you mean. Ask for a redesign and it will replace the world, not polish it.
• The concept has to be legible to the visitor, not just to you. We built a page for a technical product twice. The first version was designed for the specialist and assumed you already knew the category, and non-specialists bounced straight off it. The second version explained as it went, and the specialists preferred that one too. That asymmetry is the whole lesson: the explaining version works for both audiences, the insider version only works for one.
• It costs more per run. Bigger prompt, verification passes, screenshots. Match the effort to the ask, and don't let a request about one section turn into a whole-site rebuild.

Use it for: homepages, landing pages, a real redesign, and any time the complaint is "it looks generic".

3. design-shotgun: when you can't describe what you want

Where: the design-shotgun skill in garrytan/gstack, part of a larger opinionated toolchain.

The workflow is the point. It asks a short round of questions about audience, goal and flow (two rounds maximum, so it doesn't become an interview), reads back what you've approved before so it leans towards your taste, then writes several concepts as text. Usually three, up to eight, with a hard rule that each one must use a different font family, a different colour palette and a different layout approach. You confirm the concepts, it runs the variants in parallel and renders them, and then it opens a comparison board in your browser. You rate them, leave notes per variant, and the result is saved so the next round starts closer to what you like.

Why it works is almost psychological. The worst step in AI design is judging a single draft with nothing to compare it against, where all you can say is "hmm, not quite". Three distinct options tell you what you actually want in about thirty seconds, and the feedback you give is far more useful: the second one's type, the third one's layout, none of the first one.

It was built for product UI, but it works fine for websites and it's especially good on the homepage decision, which is the one that sets everything else. Two caveats. What you're comparing is a first draft, so you still take the winner into impeccable or frontend-design to build it for real. And running several agents in parallel is not cheap, so use it on the decisions that matter rather than on every section.

Use it for: the start of a project, and the exact moment you catch yourself saying "I don't like it" without knowing why.

Three more worth installing

theme-factory (Anthropic). Ten ready-made themes with matched palettes and font pairings, or it generates one, then applies it to whatever you already built. Most AI-built sites fall apart on page five, when every page has developed its own opinion about buttons. This is the cheapest possible fix for that.

webapp-testing (Anthropic). Playwright, screenshots, console logs. A design skill without this is designing blind. Have the agent open the page at phone width and desktop width, look at it, then fix everything it found in one batch. Sideways scroll, overlapping text, a hero that eats the entire first screen on mobile, grey-on-grey contrast: all obvious in a screenshot, all invisible in the code.

canvas-design and algorithmic-art (Anthropic). For posters, share images and generative hero art. Both work by writing a design philosophy first and only then expressing it visually, which is why the output holds together better than "make me a hero image" ever does. For a site that's trying not to look like everyone else, original generated art beats stock photography by a distance.

The real unlock: write your own

The best design skill you will ever use is the one that describes your own system. It's a folder with a markdown file in it. Put your fonts in it, your spacing scale, your button rules, your tested snippets, and the corrections you find yourself making over and over. From then on the agent starts every task already on-brand instead of being told about your brand in every single prompt. Anthropic's brand-guidelines skill is exactly this pattern (their colours and typography, packaged up), and skill-creator helps you write your own.

We keep one for motion, for instance: four battle-tested snippets for page-load choreography, scroll reveals, a canvas hero and page transitions, plus the reduced-motion and no-JavaScript fallbacks that are easy to forget at 11pm. It's worth more than any generic animation prompt, because it's ours and it's already correct.

One tip that matters more than it sounds: write the description line carefully. It's the only part always in context, and it's what decides whether your skill gets loaded at all.

How to combine them

Skills compose, and the order matters. The loop we actually use:

1. Write the brief. Three sentences: what the business really does, who the visitor is and what they should do next, and the one thing you want them to remember.
2. design-shotgun for three directions. Pick one. This takes minutes and saves hours.
3. impeccable to build the winner properly: shape it, build it, then typeset and animate, then polish and harden.
4. webapp-testing to look at it on desktop and mobile, then fix everything in one batch. Then stop.
5. theme-factory or your own brand skill to hold every other page to the same system.

That "then stop" in step four is a real instruction, not a throwaway. Open-ended self-QA loops burn a remarkable amount of money doing badly what one batched pass does well.

The part no skill does for you

Every skill on this list raises the floor. Not one of them writes the brief. The clearest predictor of whether AI design comes out well isn't which skill you loaded, it's whether the request contained a fact about the business that the model could not have guessed.

"Make my dentist site look modern" produces the modern dentist site, the one with the soft blue gradient and the smiling stock photo. "We're the only practice in town with Saturday hours, and half our patients are genuinely afraid of dentists" produces something else entirely, because now there's something to design about. This is also why the same skill gives one person award-winning work and another person a template. Same tool, different input.

If you want the longer version of where this is heading, we wrote about what AI actually automates in web development and the architecture that replaces the current web.

If you don't write code

All of this assumes a terminal, a repo and a willingness to debug your own CSS. Most business owners have none of those, which is the gap we built ShiftPress for.

Every skill on this list runs inside ShiftPress. frontend-design and impeccable do the design, design-shotgun offers you directions to choose between, theme-factory holds the whole site to one system, and webapp-testing checks the result in a real browser, all inside our own editor, on the customer's actual site. You type a sentence about what you want changed, the agent designs it against your brand, and you see a before and after and publish when you're happy. Same skills, same ceiling, no installation and no terminal. If you're curious how that feels day to day, we wrote about editing your website by chat, and the editor itself is here. It's also a different proposition from the AI buttons bolted onto the usual builders, which we compared in AI in Wix, Squarespace and Webflow.

Frequently asked questions

The bottom line

Install frontend-design because it should always be on. Install impeccable when the design has to mean something, and give it a brief worth designing around. Install design-shotgun for the moment you're stuck choosing. Add theme-factory to keep the site coherent and webapp-testing so somebody actually looks at the page before it ships. Then write one skill of your own describing your system, and everything after that starts closer to right.

The skills have got very good very fast. What they still can't do is know your business. That part is yours, and it's the part that decides whether the result looks designed or just generated.