Best Claude Skills for Design, Sorted by What You're Making

November 2, 2026

For a landing page, start with Taste. For a new product with no design system yet, UI UX Pro Max proposes one from your product type, and a screen that already looks AI-made is a job for Unslop or Impeccable. If your team has a design system, skip the skills that pick a look: their choices compete with a brand you've settled. Put your tokens into a copy of brand-guidelines and let Impeccable audit whatever Claude builds.

All thirteen run in Claude Code, and the five from Anthropic also work in the Claude app.

A look for a new site or app

Pick one to set the look. To combine two, let one choose the tokens and the other only build with them, as the chained request below does.

frontend-design

Anthropic describes the default this skill fights as Inter fonts, purple gradients on white and minimal animation, in the post that introduced it. Claude drafts a compact set of design tokens before any code, checks that plan against your brief, and keeps interface copy in plain verbs like "Save changes".

/plugin install frontend-design@claude-plugins-official. It knows nothing about your brand, so it suits work that doesn't have one yet.

UI UX Pro Max

Name your product type and it returns a page pattern, visual style, palette, font pairing and a list of things to avoid. The answers come from tables shipped with the skill: 192 product types with their own rules, 74 font pairings and 34 landing page patterns, according to the README. It can save the result to design-system/<project>/MASTER.md, and later sessions build to the same rules.

Install with /plugin install ui-ux-pro-max@ui-ux-pro-max-skill. Logos, brand identity and slides are in a paid premium version, outside this repository.

Taste

Taste turns your brief into a one-line "design read" and asks a single question if the brief is unclear. Three dials then set layout variance, motion and density, and a separate redesign variant audits an existing site before changing anything. Dashboards and data-heavy product screens are out of scope, per its SKILL.md.

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend installs the main skill.

A UI that already looks AI-made

Unslop fixes one screen and stops; Impeccable stays in the project.

Impeccable

Start with /impeccable init, which writes a PRODUCT.md with your audience, purpose and voice. Commands like critique, audit, quieter, typeset and harden then read it and work on what's already there. The rule checks listed in its README run from a command-line tool or a browser extension with no model and no API key, so they fit a review step before release.

Run npx impeccable install. Install it for an app that keeps changing; for one page, frontend-design alone is lighter.

Unslop

Unslop lists every AI tell on a screen, from glowing cards to emoji labels, proposes a five-line direction drawn from your product, and waits for your answer. Per its README, the redesign then runs in nine passes, spacing first and motion last, with spacing snapped to a 4px grid. Your code, a live URL or a screenshot all work as input.

To install, clone heydamir/unslop and copy skills/unslop into ~/.claude/skills/.

Keeping a brand consistent

If the brand exists, encode it; if not, borrow a theme.

brand-guidelines

As shipped, it applies Anthropic's own colors and fonts, Poppins and Lora per its SKILL.md. Swap those values for yours and the short file becomes your brand skill. It installs with Anthropic's example set: /plugin install example-skills@anthropic-agent-skills. Logo rules and tone of voice aren't in it.

theme-factory

Ten preset themes, each a palette plus a font pairing, applied across a whole deck, document or page; the list is in its SKILL.md. When none fits, it builds a custom one.

Same example-skills install as brand-guidelines. A theme's fonts have to be installed wherever the file opens, or the viewer swaps in others.

Dashboards and slide decks

A general design brief has no rules for charts or slides; these two do.

dashboard-design

Seven steps, laid out in its SKILL.md, each end on a "done when" the agent can check: name the screen's question, choose a chart form for every number, lay out the hierarchy, set color tokens, build, design every state, then QA with screenshots at three widths. Honest numbers come ahead of looks. If sales fall from one to zero, the card shows "was 1" in grey, never a red −100%.

Install: /plugin install dashboard-design@dashboard-design-skill. After a finished job the reply ends with one line advertising the author's Mac apps; delete the "Sign-off" section of SKILL.md to stop it.

Frontend Slides

You pick one of three styled sample slides, and the whole deck is built in that style as a single HTML file. It also restyles an existing .pptx. /plugin install frontend-slides@frontend-slides adds it.

Graphics and generative art

Both draw in code; photos need an image model.

canvas-design

Reach for it when you want a poster or a piece of static art drawn in code rather than an interface. It's part of the example-skills install.

algorithmic-art

You get a seeded p5.js sketch inside one HTML page with sliders and seed controls. Scroll through variations and download the one you like as a PNG. It's in the same example-skills set.

Motion and game effects

Each one targets a runtime of its own: mobile apps or game engines.

rossark-motion

The principles at the top of its SKILL.md say nothing teleports between poses, amplitudes stay small, and each part pivots on its real joint. Engines for React Native and SwiftUI come with it, along with recipes for mascots, plants, fire, water and icons.

Install with npx skills@latest add rossark0/rossark-motion-skill. There's no web template: on a website, Claude applies the same principles by hand with SVG or CSS transforms.

pixelfx

A library of pixel art effects written in JavaScript (244 of them, per the README), plus a skill that searches it, recolors a match and drops it into a canvas, Phaser or three.js game. Godot, Unity and other engines get a sprite sheet. For a new effect it drafts several, renders contact sheets and refines over at least three rounds.

/plugin install pixelfx@pixelfx. The loop needs an agent that can open image files, and the gallery font sits outside the MIT license.

One request that chains three of them

When each skill gets its own numbered step, the one that picks the look, the one that builds and the audit stop overwriting each other. Paste this into Claude Code and fill the brackets:

Build a landing page for [product], a [one-line description] for [audience].
Stack: [framework and styling library].

1. Use ui-ux-pro-max to pick a style, palette and font pairing for this
   product type. Show me the choices and wait for my OK before any code.
2. Build the page with the frontend-design skill, using those choices
   as the design tokens.
3. Run /impeccable audit on the result and fix what it flags.
4. With the webapp-testing skill, screenshot the page at 375, 768 and
   1440 px wide and list anything that overflows or overlaps.

Step 4 needs Anthropic's webapp-testing skill and Playwright installed. Prompts for UI work without any skill are among the Claude Code prompts.