Design skills for Claude Code, Cursor and Codex: which to install
A skill is a folder with a SKILL.md file. Your agent reads its short description, and loads the full instructions when a task matches. Design skills are the cheapest way to stop Claude Code, Cursor, Codex or Windsurf from shipping the same purple-gradient page as everyone else. Here are the six worth knowing, what each one is for, and install commands we ran ourselves.
Short answer: start with Anthropic's frontend-design for a new page. Add Emil Kowalski's emil-design-eng when motion and small interactions matter. For a site that already exists, use Impeccable or Taste Skill's redesign skill, and run Vercel's web-design-guidelines as the last review before launch. Most of them install with npx skills add, which writes to the folder each agent reads.
Last updated: 1 October 2026. Every repository was opened and every install command below was run on that date, with skills CLI 1.7.0.
Which skill for which job
| Job | Skill |
|---|---|
| A new landing page or section | frontend-design (Anthropic) |
| Animations, hovers, drawers, toasts | emil-design-eng (Emil Kowalski) |
| An existing site that looks vibe coded | Impeccable, or Taste Skill's redesign-existing-projects |
| More visual personality | Taste Skill |
| A review before launch | web-design-guidelines (Vercel), plus npx impeccable detect |
| Browsing more design skills | UI Skills |
Keep the stack small. Two skills that both try to set the visual direction will pull against each other. One for direction and one for review is a good pair.
The six skills
Most skills install with the open skills CLI. Run it in your project folder. Add -a claude-code, -a cursor or -a codex to choose the agent, or leave it out and pick from the list it shows.
npx skills add <owner/repo> --skill <skill-name>frontend-design
By Anthropic. anthropics/skills, Apache 2.0. Also in Claude Code's official plugin marketplace.
The baseline most other design skills start from. It tells the agent to ground the design in the subject, then work in two passes: first a compact plan with 4 to 6 named hex colors, the typefaces and their roles, and a layout sketch; then a check of that plan against generic defaults before any code is written. It names the looks AI design keeps landing on, such as the SaaS card kit and an ALL-CAPS label above every heading, and sets a quality floor: responsive to mobile, visible keyboard focus, reduced motion respected.
In Claude Code:
/plugin install frontend-design@claude-plugins-officialIn Cursor, Codex and other agents:
npx skills add anthropics/skills --skill frontend-designIn Lovable (workspace owners and admins): Workspace settings, Skills, Add, Import from GitHub, and paste https://github.com/anthropics/skills/tree/main/skills/frontend-design. Lovable's docs accept a link to a folder that holds a SKILL.md.
emil-design-eng
By Emil Kowalski, design engineer and author of Sonner. emilkowalski/skills, MIT.
In his words, "mostly animation, but also some design advice". It gives the agent strict rules where it would otherwise guess: which easing for which movement, how long an animation should take, when not to animate at all, and how components should feel. When it reviews code it has to answer in a table with Before, After and Why columns, so you see each change and the reason.
npx skills add emilkowalski/skills --skill emil-design-engThe same repository has narrower skills: review-animations, improve-animations, find-animation-opportunities, animation-vocabulary, apple-design, pick-ui-library, prototype and mobile-native. Run npx skills add emilkowalski/skills without --skill to choose from the list. To see the thinking behind them, read Agents with Taste and 7 practical animation tips, or his course at animations.dev. His drawer component Vaul is still on GitHub, but its README says it is unmaintained.
Impeccable
By Paul Bakaus. pbakaus/impeccable, Apache 2.0. Docs at impeccable.style.
Its README says it started from Anthropic's frontend-design and grew from there: one skill with 24 commands and 61 detector rules. /impeccable init writes a PRODUCT.md with your audience, purpose and voice, so later commands know what the site is for. Then you work with commands such as critique, audit, polish, typeset, layout, bolder and quieter. It suits a site that already exists and that you keep improving.
npx impeccable install
# then, inside your agent:
/impeccable initThe installer can also add a hook that runs the detector whenever the agent edits a UI file, in Claude Code, Cursor, Codex, GitHub Copilot and Grok Build. The detector runs on its own too, with no model and no API key: npx impeccable detect https://yourname.com. The package asks for Node 22.18 or newer.
Taste Skill
By Leonxlnx. Leonxlnx/taste-skill, MIT.
A set of anti-slop skills. The default, design-taste-frontend, reads the brief and tunes three dials: layout variance, motion intensity and visual density. The README marks this v2 as experimental. For a site you already have, redesign-existing-projects audits the current UI first, then fixes layout, spacing, hierarchy and styling. There are style variants (minimalist-ui, industrial-brutalist-ui, high-end-visual-design) and a stricter gpt-taste for GPT and Codex.
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend
npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projectsweb-design-guidelines
By Vercel. vercel-labs/agent-skills, based on the Web Interface Guidelines.
A reviewer, not a stylist. Ask "review my UI" and it checks your code against the guidelines, which its README says cover more than 100 rules on accessibility, performance and UX: focus rings, hit targets, contrast, image sizes that prevent layout shift, prefers-reduced-motion. It fetches the latest guidelines from Vercel each time it runs, so the agent needs network access.
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelinesUI Skills
By ibelick. ibelick/ui-skills, MIT. Site: ui-skills.com.
A registry of design engineering skills you can browse from the terminal or from your agent. It also connects as an MCP server at https://www.ui-skills.com/mcp, with the tools list_skills and get_skill.
npx ui-skills list --category motion
npx ui-skills get baseline-uiWhere each tool looks for skills
Skills follow one open format, so the same folder works in several tools. If you install by hand, copy the skill folder (the one with SKILL.md in it) here:
| Tool | Project folder | Use it |
|---|---|---|
| Claude Code | .claude/skills/, or ~/.claude/skills/ for every project | Automatic, or type /skill-name. Docs |
| Cursor | .cursor/skills/ or .agents/skills/; it also loads .claude/skills/ | Automatic, or type / in Agent chat. Docs |
| Codex | .agents/skills/, or ~/.agents/skills/ | Automatic, or /skills and $skill-name. Docs |
| Windsurf | .windsurf/skills/ (still read; the docs now name .devin/skills/) or .agents/skills/ | Automatic, or @skill-name. Docs |
| Lovable | Workspace settings, Skills: import from GitHub or upload a ZIP | Automatic, or type / in chat. Docs |
When we ran npx skills add anthropics/skills --skill frontend-design -a claude-code -a cursor -a codex, the CLI put one copy in .agents/skills/frontend-design for Cursor and Codex and linked it into .claude/skills/ for Claude Code. Commit the folder and everyone on the project gets the same skills.
How to prompt with a design skill
A skill does not replace a brief. It works best when the prompt gives it a subject, an audience and one job, and asks for the plan before the code, which is how Anthropic's skill is meant to be used.
Build a landing page for my climbing gym. Make it modern and clean.
Use the frontend-design skill. Landing page for a bouldering gym in an old warehouse. Visitors are beginners deciding whether to book a first session. Before you code, write the plan: 4 to 6 named hex colors, the typefaces and their roles, a layout sketch. Change anything in the plan that would fit every other gym site. Then build it.
Then make the result stick. Copy the colors, type and radii the plan settled on into CLAUDE.md, AGENTS.md or your Lovable knowledge, with a short list of things to never do. Our guide Make your AI-built website look less AI has 12 before and after fixes and a design rules file you can start from.
Read before you install
- A skill is instructions your agent follows, and some come with scripts or hooks. The skills CLI ends every install with: "Review skills before use; they run with full agent permissions."
- Open the
SKILL.mdon GitHub first. They are plain Markdown and take a few minutes to read. - Install into the project before you install for every project, and try the same prompt with and without the skill.
- Impeccable's installer offers to add an edit hook. Say no if you only want the commands.
When the design is done, publish it
Once it looks right, ask the same agent to put it online. DropTheHassle has an MCP server, so Claude Code, Cursor, Codex or Windsurf can publish the built folder for you and hand you a claim link. You get a free yourname.dropthehassle.app link on HTTPS with no account and no card. A .com is EUR 19 a year including VAT in the EU, or USD 19 elsewhere, the same every year, with no DNS edit. Your AI can publish. It can never spend your money.
claude mcp add dropthehassle -- npx -y dropthehassle-mcpSetup for every tool is in Is there an MCP server to publish my site and manage the domain?, with steps for Claude Code, Cursor, Codex and Windsurf.
Questions
What is the Anthropic frontend-design skill?
A SKILL.md from Anthropic that makes the agent commit to a distinct visual direction: plan colors, type and layout first, check the plan against generic AI defaults, then build. It is in the anthropics/skills repository and in Claude Code's official plugin marketplace.
How do I install the frontend-design skill in Claude Code?
Run /plugin install frontend-design@claude-plugins-official inside Claude Code, or run npx skills add anthropics/skills --skill frontend-design in your project folder.
Do Claude skills work in Cursor and Codex?
Yes. Skills follow the open Agent Skills format. Cursor reads .cursor/skills/ and .agents/skills/ and also loads .claude/skills/. Codex reads .agents/skills/. The skills CLI writes to the right folder with -a cursor or -a codex.
What is Emil Kowalski's design skill?
emil-design-eng, from the emilkowalski/skills repository. In his words it is mostly animation, with some design advice: easing, duration, when not to animate, and how components should feel. Install it with npx skills add emilkowalski/skills --skill emil-design-eng.
Should I use Impeccable or Taste Skill?
Impeccable is built around critique, audit and a detector you can run without a model, which suits a site you keep improving. Taste Skill pushes visual personality with dials for layout variance, motion and density. Either can sit next to Anthropic's frontend-design.
Do design skills cost money?
The skills on this page are free to install from public GitHub repositories. You pay only for the agent you already use. Read each SKILL.md before you install it, because skills run with your agent's permissions.