PlugWiki

Claude frontend design skills

Claude skills that make AI-built web pages look designed. Start with Anthropic's frontend-design, then add one that reviews or extends it.

Picks
9
ranked

Start with Anthropic's frontend-design skill. It is the most installed skill here, and it is one Markdown file with no scripts to review.

The other eight add what it does not: a design database (UI UX Pro Max), full page builds checked in a browser (Taste Skill), reviews and fixes (Impeccable, web-design-guidelines), motion polish (Emil Kowalski) and Tailwind design systems. These skills change how Claude designs, but none of them knows your product or users, so give each one a short brief.

Good for

  • Developers shipping a UI without a designer
  • Founders and solo builders who want pages that do not look templated
  • Front-end engineers who want accessibility and polish checks on existing screens
  • Teams building on Tailwind

Top picks

Skills about building or polishing web UI, ordered by installs on skills.sh as of November 2, 2026, with GitHub stars beside them. Stars belong to the whole repo, so skills from one repo share a count.

  1. 1
    frontend-designSkill

    Anthropic's own design skill. Claude plans a look from your subject, checks it against stock AI styles, builds the page, then critiques it. One file, no scripts.

    186,362 GitHub stars
  2. 2
    web-design-guidelinesSkill

    Reviews your UI files against Vercel's Web Interface Guidelines and lists problems as file:line findings. It fetches the latest rules on every run, so it needs web access.

    33,354 GitHub stars
  3. 3
    design-taste-frontendSkill

    Taste Skill. Picks a visual direction, writes the copy, finds real pictures, then checks the page in a real browser. Needs Node 22 or newer and Chrome, Edge or Chromium. A full build takes about 30 to 45 minutes.

    107,631 GitHub stars
  4. 4
    ui-ux-pro-maxSkill

    A searchable design database of styles, palettes, font pairings and UX rules. Claude picks them for your product before it writes UI code. Needs Python 3.

    143,821 GitHub stars
  5. 5
    emil-design-engSkill

    Emil Kowalski's rules for UI animation and polish. Reviews code in a Before, After and Why table. Guidance only, mostly for CSS, Framer Motion and React.

    52,705 GitHub stars
  6. 6
    impeccableSkill

    Paul Bakaus's design skill with 23 commands such as critique, audit and polish. It checks every UI edit through a hook, and the installer needs Node.js 18.19 or newer.

    99,312 GitHub stars
  7. 7
    web-artifacts-builderSkill

    Anthropic's skill for complex claude.ai artifacts. Builds React, Tailwind and shadcn/ui apps and bundles them into one HTML file. Not for simple artifacts.

    186,362 GitHub stars
  8. 8
    frontend-ui-engineeringSkill

    Addy Osmani's skill for accessible, responsive UI that follows your design system, with a list of AI defaults to avoid. Its accessibility checklist sits in the wider agent-skills pack.

    112,555 GitHub stars
  9. 9
    tailwind-design-systemSkill

    Builds Tailwind CSS v4 design systems: tokens, variants and dark mode. Written for v4, so v3 projects get an upgrade pointer instead.

    42,081 GitHub stars

Get a designed page out of Claude in four steps

Claude

  1. 1

    Pick one skill to start

    Use frontend-design for a first pass on a new page. Add Impeccable or web-design-guidelines when you want a review of a page that already exists. Our advice: install one skill at a time so you can see what each changes.

    Uses frontend-design, impeccable, web-design-guidelines

  2. 2

    Install it

    npx skills add https://github.com/anthropics/skills --skill frontend-design

    In Claude Code, frontend-design also ships as a plugin in claude-plugins-official. Use one route, not both, or Claude loads the skill twice.

    Uses frontend-design

  3. 3

    Ask for the page with a brief

    Name the audience, the tone and anything to avoid. The skill makes Claude plan the look from your subject before it writes code.

    Prompt
    Build a pricing page for a small accounting firm that serves freelancers. Tone: calm and precise. Plan the look first, then build it.

    Tip: Example prompts are illustrations; swap in your own page.

  4. 4

    Review what it built

    Run a review skill on the result. Impeccable gives a scored UX review with ranked fixes. With web-design-guidelines, ask Claude to review your UI and name the file; it lists file:line findings.

    Prompt
    /impeccable critique the pricing cards

    Uses impeccable, web-design-guidelines

Comparison

SkillBest forNeedsInstalls
frontend-designThis pageFirst passNothing1,062,579
web-design-guidelinesCode reviewWeb access812,640
Taste SkillFull page buildsNode 22, browser715,989
UI UX Pro MaxPalettes, fontsPython 3428,860
ImpeccableReviews, fixesNode 18.19+378,685

Questions

What is the best Claude skill for frontend design?

By installs on skills.sh, Anthropic's frontend-design leads, followed by web-design-guidelines and Taste Skill. Start with frontend-design and add another when you need reviews, a design database or full page builds.

What does the Claude frontend-design skill do?

It makes Claude plan a look from your subject, check that plan against stock AI styles, build the page and critique it. This page ranks it against eight others; the frontend-design page has the install steps.

How do I install a frontend design skill in Claude Code?

Run the npx skills add command in the steps above, or use the install box on each skill's page. Anthropic's frontend-design also ships as a plugin, so use one route and not both.

Do these skills work in Cursor or Codex?

Many do. Impeccable lists Claude Code, Cursor, Codex, GitHub Copilot and Gemini CLI, and UI UX Pro Max lists 25 assistants through its own command line tool. Taste Skill lists Claude Code and Codex.

Which skill reviews UI I have already built?

web-design-guidelines checks files against Vercel's guidelines and lists file:line findings. Impeccable's critique command gives a scored UX review with ranked fixes. emil-design-eng reviews animation and polish in a Before, After and Why table.

Do frontend design skills need API keys?

Most do not. Taste Skill and Impeccable need no API key, though Impeccable can use an optional OpenAI key for images. Taste Skill needs Node 22 and a browser, and UI UX Pro Max needs Python 3.

Are frontend design skills free?

Yes. You pay only for your Claude plan or API use. Licenses vary: frontend-design and Impeccable are Apache-2.0, and UI UX Pro Max, Taste Skill and Emil Kowalski's skill are MIT.

Are these skills safe to install?

They are text instructions, but some bundle scripts or hooks. Impeccable checks UI edits through a hook, and web-artifacts-builder runs scripts that install npm packages. skills.sh shows a Socket warning on web-design-guidelines and web-artifacts-builder, so read their files first.

What is the difference between this list and Claude design skills?

This list is for building web pages and screens in code. For brand work, posters, banners, diagrams and design tokens, see Claude design skills.

Sources

Docs, issue trackers and discussions this page is built from.

Show all 20
  1. skills.sh · skills.sh
  2. skills.sh: frontend-design · skills.sh
  3. anthropics/skills · github.com
  4. skills.sh: design-taste-frontend · skills.sh
  5. leonxlnx/taste-skill · github.com
  6. skills.sh: impeccable · skills.sh
  7. pbakaus/impeccable · github.com
  8. skills.sh: ui-ux-pro-max · skills.sh
  9. nextlevelbuilder/ui-ux-pro-max-skill · github.com
  10. skills.sh: web-design-guidelines · skills.sh
  11. vercel-labs/agent-skills · github.com
  12. skills.sh: emil-design-eng · skills.sh
  13. emilkowalski/skills · github.com
  14. skills.sh: web-artifacts-builder · skills.sh
  15. skills.sh: frontend-ui-engineering · skills.sh
  16. addyosmani/agent-skills · github.com
  17. skills.sh: tailwind-design-system · skills.sh
  18. wshobson/agents · github.com
  19. skills.sh: shadcn-ui · skills.sh
  20. google-labs-code/stitch-skills · github.com

Updated Nov 3, 2026.