The best design skills for Claude Code in 2026, compared
Nine skills that change how a coding agent designs a page, scored by the same six rules: what they change, whether they look at real websites, how they check the result, and what they cost.
The short answer
To design a website from real ones, 
regards’ design skill: before your agent designs a page, it searches regards, where every site is picked by hand for its look, keeps five to eight sections that fit the brief and sets the direction from them. It is a fork of tasteskill v2 (MIT), free, with its research on every plan, Free included. For a whole design process at no cost, tasteskill or Impeccable, which come top by score. For a quick lift in Claude, Anthropic’s frontend-design. For app screens from real products, Refero’s and Mobbin’s skills. For motion, Emil Kowalski’s; to review UI code, Vercel’s Web Interface Guidelines.
Disclaimer: we make regards and its design skill, and it’s our pick for designing a website from real ones, since a
few good references do more than many: before your agent designs a page, it searches websites picked by hand for their
look, keeps the sections that fit the brief and sets the direction from them. It’s a fork of tasteskill, which comes
out ahead of it here. Every skill, ours included, is scored by the same six rules below, with the reason for every
score printed under it. By total, ours comes third of 9: its research
needs a paid plan and an MCP server.
Every fact about another skill comes from its own repository or pages, checked on 21 October 2026.
A skill is a folder of instructions, a SKILL.md and whatever it needs beside it, that an agent reads when the task fits. Design skills change what your agent does before, while and after it makes a page: some give it a process, some rules, some a review. A few send it to look at real work first. They mix well, so the ranking comes twice: once by score, then by what you’re making.
How did we score them?
Six criteria, 1 to 5 each, 30 at most. A 5 means:
- Changes: it takes your agent from the brief to a finished page: the idea, copy, type, colour, layout and motion.
- References: it searches real sites or screens for each brief, and looks at them.
- Checks: it opens the page in a browser, measures and screenshots it, and fixes what it finds.
- Install: one command and nothing else.
- Clients: it names Claude Code, Codex and Cursor.
- Cost: free and open source, with nothing to pay for to use it in full.
The total weighs all six the same. A skill that reviews code was never meant to design a page, so read the columns you care about, then the picks by use under the table.
How do they score?
| Site | Changes | References | Checks | Install | Clients | Cost | Total of 30 |
|---|---|---|---|---|---|---|---|
| 1Impeccable | 5 | 3 | 5 | 4 | 5 | 5 | 27 |
| 1tasteskill | 5 | 3 | 5 | 4 | 5 | 5 | 27 |
| 3regards design skill | 5 | 5 | 5 | 3 | 5 | 2 | 25 |
| 4Refero Skill | 4 | 5 | 3 | 3 | 5 | 3 | 23 |
| 5Mobbin skills | 3 | 5 | 3 | 3 | 5 | 3 | 22 |
| 6frontend-design | 4 | 1 | 3 | 5 | 3 | 5 | 21 |
| 6UI UX Pro Max | 3 | 2 | 2 | 4 | 5 | 5 | 21 |
| 8Emil Kowalski’s skills | 2 | 1 | 2 | 5 | 5 | 5 | 20 |
| 8Web Interface Guidelines | 2 | 1 | 2 | 5 | 5 | 5 | 20 |
regards by the same rules. The reason for every score is under each skill below.Which is best for what?
| Pick | Also good | |
|---|---|---|
| Designing a website from real ones | regards design skill | tasteskill, free, dealt from 247 curated sites |
| A whole design process, free | tasteskill | Impeccable |
| Polishing and auditing a UI you have | Impeccable | Web Interface Guidelines, for a review |
| A quick lift, with nothing to set up | frontend-design | UI UX Pro Max, for a design system |
| App screens from real products | Refero Skill | Mobbin skills |
| Motion | Emil Kowalski’s skills | Impeccable’s animate |
| Reviewing UI code | Web Interface Guidelines | Impeccable’s audit |
Which design skills look at real websites?
regards design skill
Best for designing a website from real ones, researched for each brief.
Better references, not more of them. Before your agent designs a page, it searches regards for sections that fit
the brief, looks at each one, keeps five to eight, names the one thing it takes from each and what that becomes,
and sets the page’s direction from what it kept. It’s a fork of tasteskill v2 by
Leonxlnx, under its MIT licence, and keeps the rest of tasteskill’s run: what is true of this client and no other, the
idea test, real pictures from open collections, the browser inspector and the look-and-fix loop. Where tasteskill
deals one of 20 directions, this searches for one, for this brief. One command installs it, for Claude Code, Codex,
Cursor and the other agents that read skills. The skill is free and open source; its searches run on the regards MCP server, which comes with every plan, Free included, Pro at $20 a month or $200 a year. The catch: without the
server it falls back to tasteskill’s deal, and says so.
- Changes
- 5tasteskill’s whole run, brief to checked page
- References
- 5Searches regards for each brief, keeps 5 to 8
- Checks
- 5A browser at three widths, then look and fix
- Install
- 3One command, plus the MCP server and a plan
- Clients
- 5Claude Code, Codex, Cursor and more
- Cost
- 2MIT; its research on Pro, $20 a month
- Total
- 25of 30
For a small ceramics studio’s home page, one of its searches reads like the brief below. These are three of the heroes it came back with, none of them ceramics, each with the one thing it would take:
regards hero for a small ceramics studio: warm and quiet, one photograph of the work, a serif name set small, no buttons shouting 
Takes: one object alone on white, two tiny captions in the bottom corners, nothing else to read.
Takes: the credit line, a small “Starring” over a name in a large serif, as on a film poster.
Takes: a serif sentence over a ruled list of what’s inside, the work framed beside it.
Refero Skill
github.com Its page on regards
Best for app and web screens from real products, researched first.
Refero’s skill makes research a step that can’t be skipped: styles, then screens, then flows from Refero’s library, the references locked before any code and a ledger of the decisions made from them, with notes on type, colour, motion, icons and copy. Afterwards it compares the result with the references. MIT, as a plugin for Claude Code, Codex and Gemini or through npx skills. The catch: its research needs Refero’s MCP server, on Pro at $10 a month billed yearly; without it, it works from its notes.
- Changes
- 4Research first, then a ledger of decisions
- References
- 5Searches Refero’s screens for each task
- Checks
- 3Compares the result with its references
- Install
- 3A plugin, the MCP server and a plan
- Clients
- 5Claude Code, Codex, Cursor and more
- Cost
- 3MIT; its research on Pro, $10 a month yearly
- Total
- 23of 30
Mobbin skills
github.com Its page on regards
Best for redesigning app screens from real ones.
Four skills: best practices, search, redesign a screen, and plain writing. Redesign searches Mobbin’s 600,000+ real product screens and stops if the server isn’t connected rather than work from memory, then shows the screen before and after. MIT, for Claude Code, Codex and Cursor. The catch: it needs Mobbin’s MCP server, on Pro, Team or Enterprise.
- Changes
- 3Search, redesign a screen, plain writing
- References
- 5Searches Mobbin’s screens, never memory
- Checks
- 3A before and after of each redesign
- Install
- 3A plugin, the MCP server and a plan
- Clients
- 5Claude Code, Codex, Cursor
- Cost
- 3MIT; its research on Pro, $10 a month yearly
- Total
- 22of 30
Which give your agent a whole design process?
tasteskill
Best for a whole design run, free, with its pictures found and its pages checked.
Leonxlnx’s skill reads the brief and lists what this client has that no other does, deals three of 20 directions drawn from a study of 247 curated sites for the agent to pick from, finds the idea, makes the page with real pictures and footage from open collections, credited, checks it in a real browser at three widths, and fixes the three worst problems in its own screenshots, up to three rounds. Since v2.1, dashboards and app screens take a route of their own. Free, MIT; a plugin for Claude Code and Codex, or one command with npx skills; it needs Node 22 and Chrome, Edge or Chromium. The catch: a page takes roughly 30 to 45 minutes and a few hundred thousand tokens, by its README, and the directions come from a fixed study rather than your brief.
- Changes
- 5Brief, direction, idea, pictures, page, checks
- References
- 3Deals from a study of 247 curated sites
- Checks
- 5A browser at three widths, then look and fix
- Install
- 4One command; Node 22 and Chrome
- Clients
- 5Claude Code, Codex, Cursor and more
- Cost
- 5Free, MIT
- Total
- 27of 30
Impeccable
Best for commands to shape, critique and polish a UI, and a detector that checks it.
Paul Bakaus’s skill gives your agent 24 commands, from craft, shape and critique to audit, polish, typeset, colorize and animate, each with its own playbook, after an init that writes down what the product is. A detector with 61 rules runs after edits, and a live mode works in the browser. A new design starts from a hand of visual worlds dealt from a catalogue reviewed by people. Free, Apache 2.0, one command into Claude Code, Cursor, Codex and more than a dozen others. The catch: every deal is a request to impeccable.style, so it needs a connection, and the hand comes from its catalogue rather than from websites found for your brief.
- Changes
- 524 commands, from craft to polish and audit
- References
- 3Deals from a catalogue reviewed by people
- Checks
- 5A detector after edits, and a live browser
- Install
- 4One command; Node, and a browser to check
- Clients
- 5Claude Code, Cursor, Codex and more
- Cost
- 5Free, Apache 2.0
- Total
- 27of 30
frontend-design
Best for a quick lift in Claude, with nothing to set up.
Anthropic’s skill has Claude plan before it writes code: four to six named colours, the typefaces and their roles, a layout sketched in text and a few principles, then check the plan against the brief and change whatever is generic. It names the habits AI-made pages share, from cream and terracotta to all-caps labels, so Claude steers clear, keeps motion sparing and covers the copy. Free, Apache 2.0, one plugin command in Claude Code, and among Claude’s example skills on its paid plans. The catch: no references, no checks beyond screenshots where Claude can take them, and it’s written for Claude.
- Changes
- 4A plan before code: colours, type, layout
- References
- 1None: its own rules
- Checks
- 3Screenshots, where Claude can take them
- Install
- 5One plugin command
- Clients
- 3Claude Code and Claude’s apps
- Cost
- 5Free, Apache 2.0
- Total
- 21of 30
UI UX Pro Max
Best for a design system picked from a database of styles.
It searches its own tables of UI styles, palettes, font pairings and rules by industry to choose a pattern, a style, colours and type for your product, with the anti-patterns to avoid and a checklist before delivery, and it makes no network calls. Free, MIT, as a Claude Code plugin or a command line for many agents; it needs Python 3. The catch: the styles are rules and tables, not real pages.
- Changes
- 3A design system from its databases
- References
- 2Tables of styles, palettes and fonts
- Checks
- 2A checklist before delivery
- Install
- 4One command; Python 3
- Clients
- 5Claude Code, Cursor, Codex and more
- Cost
- 5Free, MIT
- Total
- 21of 30
Which focus on one part of the job?
Emil Kowalski’s skills
Best for motion: animations that feel right.
Fifteen skills from Emil Kowalski, mostly about animation: one for design engineering, and others to animate, review and improve animations, check their performance, and more. Rules and reviews, with no references and no browser. Free, MIT, one command with npx skills. The catch: motion first, so layout and type want another skill beside it.
- Changes
- 2Motion, mostly, with some design advice
- References
- 1None
- Checks
- 2Reviews the animations in your code
- Install
- 5One command
- Clients
- 5Any agent npx skills installs into
- Cost
- 5Free, MIT
- Total
- 20of 30
Web Interface Guidelines
Best for reviewing UI code against 100+ rules.
Vercel’s skill fetches its Web Interface Guidelines fresh before each review, then reads the files you name and lists what breaks them, by file and line: accessibility, focus, forms, animation, type, images, performance, navigation, touch, dark mode and more. Free, MIT, one command with npx skills. The catch: it reviews code rather than designing, and it never sees the page.
- Changes
- 2A review of code you already have
- References
- 1None
- Checks
- 2100+ rules, findings by file and line
- Install
- 5One command
- Clients
- 5Any agent npx skills installs into
- Cost
- 5Free, MIT
- Total
- 20of 30
Not scored here: Josh Puckett’s Interface Craft is a library, $249 once, whose membership includes its skill files, which we couldn’t read without joining. Landingfolio’s seven skills are free and MIT, and three of them search its sections over its MCP server. Rams’ skill is a free design review of the files you name, against an eight-part checklist. And shadcn’s and Figma’s skills teach an agent their own tools, components and files, rather than how to design.
How do you install a design skill in Claude Code, Codex or Cursor?
Most install with one command, npx skills add and the skill’s repository, which puts it where Claude Code,
Codex, Cursor and dozens of other agents look for skills. Claude Code and Codex also take skills as plugins, from a
marketplace you add once. regards’ is npx skills add filipwojda/regards-skill, and connecting your agent to regards lets it search. A skill is read when the task fits, so ask
for the page as you would; you can also name the skill.
Skills that look at real work need an MCP server to look with. We scored those servers, ours among them, in the best design MCP servers for Claude Code, Cursor and Codex.
Which design skills are free?
- Free and open source, nothing else to pay for: tasteskill, Impeccable, frontend-design, UI UX Pro Max, Emil Kowalski’s skills and the Web Interface Guidelines.
- Free and open source, with research on a paid plan: regards’ design skill (every plan, Free included), Refero
Skill and Mobbin’s skills (Pro and up on each).
- Paid: Interface Craft, $249 once.
Try them side by side
Give the same brief to two of these, in two folders, and keep the page you’d ship. To see what our skill looks at, search regards by look, or browse the sections we picked, from heroes to footers. The design skill and MCP for agents have the setup, and every plan is on one page. For
galleries to look at yourself, we scored the best web design
inspiration sites.
Sources, checked 21 October 2026: regards’ design skill’s repository; tasteskill’s repository and SKILL.md;
Impeccable’s repository, FAQ and research;
Anthropic’s frontend-design and plugin;
Refero’s skill, MCP and pricing; Mobbin’s skills and MCP;
UI UX Pro Max’s repository;
Emil Kowalski’s skills; Vercel’s guidelines and skill;
the skills command line; Interface Craft’s home page; Landingfolio’s skills; Rams’ skill; shadcn’s skills;
and Figma’s guide.
FAQ
What is the best design skill for Claude Code?
It depends on the job. To design a website from real ones, regards’ design skill searches sections of hand-picked sites for each brief first. For a whole process at no cost, tasteskill and Impeccable, which come top by score at 27 of 30. For a quick lift with nothing to set up, Anthropic’s frontend-design. To review code you already have, Vercel’s Web Interface Guidelines.
What does Anthropic’s frontend-design skill do?
It has Claude plan a design before writing code: four to six named colours, the typefaces and their roles, a layout sketched in text and a few principles, then check the plan against the brief and change whatever is generic. It names the habits AI-made pages share so Claude avoids them, keeps motion sparing and covers the copy. It is free, Apache 2.0, and installs as a Claude Code plugin.
Is Impeccable free?
Yes. Impeccable, by Paul Bakaus, is free and Apache 2.0: one skill with 24 commands, from craft and critique to audit and polish, and a detector with 61 rules that runs after edits. One command installs it into Claude Code, Cursor, Codex and more than a dozen other agents.
Do design skills work in Codex and Cursor?
Most do. A skill is a folder with a SKILL.md, and npx skills add installs one into Claude Code, Codex, Cursor and dozens of other agents. Anthropic’s frontend-design is written for Claude; regards’ design skill, tasteskill, Impeccable and most of the others name Codex and Cursor too.