Best design skills for Claude Code and Codex (2026): 14 checked

Short answer: start with Anthropic's frontend-design. It's one small file, it makes your agent plan a look before writing code, and it installs in both Claude Code and Codex. Add Impeccable for critique and polish, web-design-guidelines to review the code, and Emil Kowalski's skills for motion. A skill changes how your agent works, not where the work lands, so to get a design your team can edit, connect the agent to a canvas such as Kite (kite.new) or Figma.

We make Kite, which isn't ranked here. It does compete with Figma and Stitch, whose skills are listed, and our runs drew in Kite. We say where Kite comes in at the end. Everything about the skills comes from their own files and docs, linked in place.

What a design skill is, and what it isn't

A design skill is a folder with a SKILL.md file that teaches a coding agent how to do design work. The format is the Agent Skills standard, “originally developed by Anthropic” and now open, and both Claude Code and Codex build on it. The agent sees each skill's name and description all the time, and reads the full file when a task fits.

Three things get mixed up in this search:

Anthropic's docs draw the same line: “MCP connects Claude to external services. Skills extend what Claude knows”. So does Figma, which says skills don't replace MCP connections. “Claude Design skill” is a separate thing again: /design is a skill bundled with Claude Code that publishes to Claude Design. You can't install it in Codex; see our Claude Design review.

The skills at a glance

Size is the SKILL.md alone, the part that stays in your agent's context once it loads. “Looks at the result” is what its file tells the agent to do, because a skill that can't see the page can only guess.

Skills that set the look

frontend-design (Anthropic): the one to start with

frontend-design is a single file with no scripts. It makes the agent act as “the design lead at a design studio”, write a plan with named colours, type roles and a layout idea, check that plan against the brief, and only then write code. Its weak spots are that the plan isn't saved, so each run starts again, it never mentions a design system, and it only reviews screenshots “if your environment supports it”.

It changed on September 3, 2026, and many pages haven't caught up. It no longer bans Inter or Roboto. It now names five looks AI tends to fall back on, such as cream with serif and terracotta, or near-black with one acid accent. It even flags #D97757 as “Anthropic's own Claude-interaction accent”, so Claude stops reaching for it.

UI UX Pro Max: a catalogue to choose from

UI UX Pro Max is a searchable database plus rules: 80 styles, 192 palettes and 74 font pairings, queried by a Python script so the data doesn't fill your context. It suits someone who wants a starting point by industry and has no opinion yet. Those choices come from a lookup table, so results can feel familiar. Its file has no step that looks at the page, and logos, brand identity and banners sit on the paid side.

taste-skill: websites in one strong look

taste-skill builds company websites and enforces its look with a checker in a real browser, which needs Node 22 and Chrome, Edge or Chromium. It's the heaviest here: the folder holds 1,617 files and weighs 36 MB. It has a narrow aim, and on skills.sh one of its audits shows a Fail and another a Warn, without a reason in what we could read. Read it before you install it.

Skills that review and fix

Impeccable: commands for each design move

Impeccable “started from Anthropic's frontend-design skill” and grew into 24 commands, such as critique, polish, bolder and distill. It goes further than text: 62 fixed rules that need no AI, a hook that scans each edited file, and a live mode that swaps variants in your running page. It also tells the agent to look at the rendered result. The price is more moving parts: it downloads an engine binary, one deep command can pull in tens of KB, and JSX files get pattern rules only, so contrast checks need a rendered address.

web-design-guidelines (Vercel): a last check of the code

web-design-guidelines only reviews. The skill is a small pointer that fetches 100+ rules on accessibility, forms, focus and motion, reads your files and reports each problem by file and line. Use it after the design is done. It checks correctness rather than taste, it never sees the page, and it needs the network on every run.

UI Skills: a short list and a directory

UI Skills is two things. Its repository has nine small skills, and baseline-ui is 3.4 KB of firm rules, such as “MUST use Tailwind CSS defaults”, so it only fits a project on that stack. ui-skills.com is a directory of 620 skills, most of them other people's, which is useful for browsing and has little method of its own.

Anthropic's design plugin: the paperwork

This plugin has seven small skills for accessibility reviews, critique, handoff and research notes. It's “primarily designed for Cowork” and also works in Claude Code. It helps a designer write things up. It won't draw or set a look.

Skills for motion

Emil Kowalski's skills are the ones to try if your interface feels stiff. There are 17, drawn from his work at Vercel and Linear. apple-design covers springs, gestures and momentum and comes from Apple's WWDC talks, but it isn't by Apple, and neither is dickwu's skill of the same name, a review skill based on Apple's guidelines. Emil's cover movement and feel, not layout or colour, and the two biggest design skills run to 50 KB together.

motion-design from LottieFiles is plain principles, timing, easing and choreography, in any tool. Motion's AI Kit pairs a skill with an MCP server, with best practices free and its deeper tools on paid Motion+.

Skills tied to one tool

These are built around their own product, and of little use without it.

• shadcn: reads your project, then uses the shadcn CLI to find and add components. It's about putting existing parts together, not taste, so the result looks like shadcn until you restyle it.
• Figma's skills: 16 skills that teach an agent Figma's MCP server. figma-use is a “mandatory prerequisite” before each write, and with figma-generate-design that comes to 74.8 KB for one visible change, the biggest pair here. Figma says writing to the canvas will eventually be a usage-based paid feature, free during the beta.
• Stitch skills: 16 skills from Google Labs, “designed to work with the Stitch MCP server”. design-md, enhance-prompt and shadcn-ui showed the most installs we recorded.
• frontend-app-builder: OpenAI removed its frontend-skill on April 23, 2026, though lists still recommend it. This is the nearest we found, and OpenAI doesn't call it the replacement. It starts from a generated image and codes from that, so it leans on Codex's image and browser tools.
• canvas-design: not product UI. It writes a “design philosophy” and expresses it as a poster, in “only .md files, .pdf files, and .png files”. You get nothing to edit as layers.

Looking for more? awesome-design-skills is 67 short style presets, all from one registry. designer-skills is a large set on process more than look. skills.sh has a design topic page.

Install one in both agents

Claude Code reads .claude/skills/ and Codex reads .agents/skills/. The skills command writes to either from one copy. We ran this on November 5, 2026, and the file landed in the right folder each time:

npx skills add https://github.com/anthropics/skills --skill frontend-design -a claude-code
npx skills add https://github.com/anthropics/skills --skill frontend-design -a codex

In Claude Code you can also run claude plugin install frontend-design@claude-plugins-official. Then ask with /frontend-design in Claude Code or $frontend-design in Codex, or just describe the job and let the agent match it. The others have their own routes:

Those commands are as each maintainer documents them, and we ran only the first. Sharing a format doesn't mean every skill behaves the same in both. Claude-only features are the risk: shadcn's file runs a command as it loads, and Codex's docs don't say how they treat that. Impeccable keeps 20 tool-specific copies of its skill, a sign the differences are real.

Read a skill before you install it, because it runs with your agent's permissions. A January 2026 study on arXiv scanned 31,132 skills of every kind from two marketplaces and flagged at least one vulnerability in 26.1% of them, with skills that bundle scripts 2.12 times as likely to be flagged. Its detector isn't perfect, at 86.7% precision by the paper's own figure, and it says nothing about these particular skills. It's still a reason to prefer a plain file such as frontend-design when that will do.

What a skill costs you

A skill isn't free to keep. Claude Code's docs say “every skill in the skill listing adds to your context on every turn”, and once one loads, “every line is a recurring token cost”. In Codex, the first list takes “at most 2%” of the context window. The standard recommends under 5,000 tokens and 500 lines, which at the common rule of four bytes a token is about 20 KB, an estimate we didn't measure.

By that yardstick, frontend-design at 9.4 KB and Impeccable at 12 KB sit comfortably inside it. shadcn, taste-skill and apple-design sit near the line, and figma-use at 35 KB is well over it. In Claude Code, /skill-doctor shows what each one costs you. Install what you'll use this month and remove the rest.

Don't pick by install count

Some lists rank by installs, and skills.sh publishes a count. On November 5, 2026 it showed about 1.1 million for frontend-design, 830,000 for web-design-guidelines, 440,000 for UI UX Pro Max and 390,000 for Impeccable. Treat those loosely, for three reasons:

• They come from anonymous telemetry on the npx skills command, so plugin installs seem to be left out.
• They can look inflated. A skill from a repository with 26 stars, first seen in September, showed 1.2 million installs, more than Anthropic's. We don't know why.
• The same skill can show two numbers. shadcn showed 407,789 in the directory's API and 136.9K on its page that day.

GitHub stars don't help much either, as they count the whole repository: Anthropic's 187,000 and shadcn's 127,000 say little about one skill. Reading the SKILL.md takes two minutes and tells you more.

What we saw in our runs

We tested frontend-design with one brief on November 5, 2026: “Design the home page of Tessel, a small online shop for hand-thrown ceramics, in a new Kite file. One desktop frame, 1440 wide.” We ran it four ways, once each, on Codex CLI 0.164.0 and Claude Code with Opus 5.5.

Three things stood out. The skill installs in Codex, and Codex said it was using it, which no maintainer page told us for this one. Installing it barely moved Codex's page in this run, while Claude Code with it came up with an actual idea, and Codex's run from the Kite file differed again, so one try can't separate agent, skill and chance. And Codex read the copy kept in the Kite file with nothing installed on its side; Claude Code put the skill in that file first. Each was one try, a second might look different, and the Claude run has no skill-free run beside it, so read this as what happened rather than a benchmark.

Where a skill stops, and where Kite comes in

A skill changes how your agent works. It doesn't change what you get back, which from most of these is code, or from canvas-design a flat PDF or PNG. If your designer wants to move a button, or your team wants to comment on the hero, there's no file for that.

Kite (kite.new) is a design canvas your agent connects to over MCP. It writes HTML and CSS, and Kite turns that into layers your team can select and retype, with Claude, Codex, Cursor or ChatGPT on the plan you already pay for. Kite's guide tells it to check a picture of its work before it finishes. Kite is a tool to draw with, not a replacement for what's above, so a skill and Kite work together.

Kite also keeps skills of its own, in a design system or in one file. The agent sees each one's name and first line and follows those that fit, so it travels with the work: anyone's agent reads the same rules, with nothing to install in two folders. Import reads a Claude SKILL.md or a Cursor rule, and Download as .md saves one back. Keep what a variable can't hold there, such as “one primary button per screen”, and your colours and type in the system's variables, which also read and write DESIGN.md.

Kite has limits here. It doesn't run scripts from a skill, so a skill's database or checker stays with your agent, and it doesn't build or run your app, so you copy a frame as HTML, React or Tailwind when it's time to build. Kite is free with unlimited editors, 3 files and 200 agent actions a day. Pro is $20 an editor a month, or $16 billed yearly, with unlimited agent actions. There are no AI credits on either.

How we checked

Methodology: on November 5, 2026, we read each skill's SKILL.md and README in its own repository and measured its size from GitHub's file list. Install counts come from skills.sh and stars from GitHub, both that day. Claude Code's, Codex's and the standard's behaviour come from their own docs. We ran only frontend-design, in the four runs above, so every other skill here is what its files say, not a test of its results. “Not checked” means we didn't read far enough to say. Kite facts come from Kite's own docs. We check this page every quarter, because these skills change fast.