Best Agent Skills for UI Design in Claude Code, Codex, Cursor

Best agent skills for UI design: the short answer

Pick one skill per job, not five skills that all control visual taste. Start with Anthropic's frontend-design for a new interface, Impeccable for fixing an existing UI, Vercel's web-design-guidelines for accessibility and interaction review, and shadcn for projects using components.json. Use Mowgli when you need to design a whole multi-screen product, including every state, before implementing it. Superdesign fits page- or feature-level canvas drafts.

We make Mowgli.

Install counts below are skills.sh all-time installs on October 8, 2026.

Caption: The Design and UI topic on skills.sh, the directory behind the npx skills installer. Captured October 2026. Source: skills.sh, captured October 2026.

How to install a design skill in Claude Code, Codex and Cursor

An Agent Skill is a folder containing a SKILL.md with a name, description and instructions. It can also include scripts, references and assets. Anthropic originally developed the format and released it as an open standard.

Agents use progressive disclosure. At startup, they load each skill's name and description. They load the complete instructions only when your task matches, so installing several focused skills costs little context until you use them.

Anthropic created design skills because safe choices dominate web training data, producing recurring defaults such as Inter and purple gradients. See why AI-built apps look the same for more of those tells.

Vercel Labs' skills CLI supports Claude Code, Codex, Cursor and 75 more agents:

npx skills add <owner/repo>

Use -g, --global for the user directory, -a, --agent <agents...> to target claude-code, codex or cursor, -s, --skill <skills...> for selected skills, and -l, --list to inspect a repository. Maintenance commands include npx skills list, npx skills find [query], npx skills update [skills] and npx skills remove [skills].

You can also try a skill without installing it:

npx skills use vercel-labs/agent-skills@web-design-guidelines | claude

Cursor also reads Claude and Codex skill directories. Plugins provide another route: Claude Code uses /plugin install {plugin-name}@claude-plugins-official, Codex exposes /plugins in its CLI and a Plugins tab in the desktop app, and Cursor can install compatible GitHub repositories through Customize.

Read Agent Skills vs MCP servers for the architectural difference, or compare MCP servers for UI design.

Taste skills: change the defaults before code is written

Taste skills are instructions, not services. They change how the model chooses palette, typography, layout and copy before it writes code. On October 8, 2026, skills.sh reported about 964K all-time installs for frontend-design, 579K for design-taste-frontend and 387K for UI UX Pro Max.

Anthropic frontend-design: the default to install first

Anthropic's skill works in two passes. It first plans four to six named palette colors, type roles and a layout concept with ASCII wireframes. It then reviews that plan against the brief and revises generic choices before coding.

The skill identifies repeated clusters including warm cream with serif and terracotta, near-black with one acid accent, broadsheet layouts, identical rounded SaaS cards, gradient washes and template chrome. It avoids single-word headline accents, unnecessary labels and all-caps labels. It keeps lines below 80 characters.

Its principle is "Spend your boldness in one place." The quality floor includes mobile responsiveness, visible keyboard focus and reduced-motion support. Calls to action describe the result, while errors explain what failed and how to fix it. A pinned brief always wins.

/plugin install frontend-design@claude-plugins-official

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

For Codex or Cursor, add -a codex or -a cursor. See the Claude Code UI design workflow for where this fits.

Taste Skill: dials for bolder marketing pages

Taste Skill exposes three 1-10 controls: DESIGN_VARIANCE, MOTION_INTENSITY and VISUAL_DENSITY. They move output from centered to asymmetric layouts, simple hover effects to scroll or magnetic motion, and spacious pages to dense dashboards.

Its README also includes brief inference, GSAP skeletons, a redesign audit and a pre-flight check. Variants include gpt-taste, redesign-existing-projects, minimalist-ui, industrial-brutalist-ui, high-end-visual-design and stitch-design-taste. Codex users are directed to gpt-taste.

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

UI UX Pro Max: pick a style from a catalog

UI UX Pro Max searches 79 styles, 192 product types, 192 palettes, 34 landing patterns, 74 font combinations and 22 frameworks. It produces a design system with style, colors, typography, effects, anti-patterns and a delivery checklist.

Checks include 4.5:1 text contrast, visible focus, reduced-motion support, pointer cursors and responsive layouts at 375, 768, 1024 and 1440 pixels. Its Python 3 search script uses the standard library and makes no network calls.

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

npm install -g ui-ux-pro-max-cli
uipro init --ai codex

Use claude or cursor instead of codex, and add --global for a user-level install.

Review and polish skills: catch what slipped through

Run review skills on existing code. They identify or fix concrete problems instead of selecting the initial style. On October 8, 2026, skills.sh reported about 712K installs for web-design-guidelines, 334K for emil-design-eng and 319K for Impeccable through the skills CLI.

Impeccable: audit, critique and polish commands

Impeccable provides one skill, 24 commands, browser iteration and 59 deterministic detector rules. It started from Anthropic's frontend-design.

Caption: Impeccable's README: one skill, a command vocabulary and a detector that also runs without an agent. Source: github.com, captured October 2026.

/impeccable init writes PRODUCT.md; /impeccable document derives DESIGN.md from existing code. Read more about DESIGN.md for coding agents.

Useful commands include audit, critique, polish, harden, onboard, typeset, layout, colorize, animate and live. Its detector flags patterns such as gray text on colored backgrounds, cards nested inside cards and bounce easing.

npx impeccable detect src/

npx impeccable install

Use --providers=claude,codex,cursor, choose --scope=project|global, or add --no-hooks. The optional hook checks UI edits and can block flagged Cursor writes before they land.

Vercel web-design-guidelines: an accessibility and interaction audit

This skill fetches the latest Web Interface Guidelines, reviews named files and reports findings as file:line. Its 100-plus rules cover accessibility, performance and UX.

Checks include labels for icon-only buttons, :focus-visible, useful input names and autocomplete, paste support, reduced motion, explicit image dimensions and empty states. It discourages transition: all and limits animation to transform and opacity.

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Emil Kowalski's skills: motion and detail

These skills correct details such as using ease-out for entering elements and choosing a translucent shadow instead of a solid border. The collection includes emil-design-eng, review-animations, improve-animations, find-animation-opportunities, break-ui, prototype, mobile-native and pick-ui-library.

npx skills@latest add emilkowalski/skills

Component system skills: build with the parts you already have

Taste skills guide choices. Component skills make the agent reuse installed parts and tokens so new screens match the current product.

shadcn skill

The shadcn skill activates when it finds components.json. It reads framework, Tailwind version, aliases, base library, icons and installed components.

It requires semantic tokens such as bg-primary, uses gap-* instead of space-y-*, and maps forms, option sets, empty states and loading states to the appropriate components. Dialog, Sheet and Drawer require a Title. It searches registries before writing custom UI.

npx skills add shadcn/ui

Community registries are third-party. Review their code before installation.

Caption: The shadcn skill reads components.json so the agent uses your installed components and tokens. Source: ui.shadcn.com, captured October 2026.

Codex Build Web Apps plugin

OpenAI's Build Web Apps plugin includes frontend-app-builder, testing and debugging, React, shadcn, Stripe and Supabase skills. Codex users working with shadcn can use shadcn-best-practices through /plugins. OpenAI removed the earlier frontend-skill on April 23, 2026; Build Web Apps is its successor. See frontend design with Codex.

Figma's plugin skills

If your system lives in Figma, its plugin bundles figma-design-to-code, figma-code-connect, figma-generate-library and figma-use with the MCP server. Install it with /plugin install figma@claude-plugins-official in Claude Code or /add-plugin figma in Cursor.

Full design surface skills: design every screen before building

Taste, review and component skills improve UI code as the agent writes it. A full design surface lets you inspect screens, compare directions and approve states before implementation.

Mowgli: a whole product, every screen and state, synced with code

A Mowgli project combines a spec with every screen and state on an infinite canvas. Its skill lets Claude Code, Codex or Cursor push a real codebase into that project and pull approved React + Tailwind designs back through the mowgli CLI.

The agent reads and writes SPEC.md, frontend.xml and one <ScreenId>.tsx file per screen. Screen code uses exact Tailwind classes, icons from lucide-react and one state prop. The edit command keeps the spec, screen map and code synchronized. Every edit creates a version, and mowgli -p <projectId> diff shows the changes.

npx skills add mowgli-ai/skills

Add -a codex or -a cursor to target one agent. Account linking uses browser approval through mowgli login. Without skill support or a terminal, connect the MCP server at https://app.mowgli.ai/mcp.

Caption: Mowgli's Connect dialog hands Claude Code, Codex or Cursor one prompt: skill first, CLI second, MCP as a fallback.

This changes the implementation contract. Claude Code, Codex, Cursor or another coding agent builds approved screens and named loading, empty and error states instead of inventing them during development. You can compare a moodboard of 16-plus styles, edit designs through chat and return versioned code to the repository.

Caption: Each state is a value of one state prop, so the agent implements the empty state that was designed, not one it guesses.

Free to start (300 credits); credit packs from $12; plans from $15/mo. Explore the Mowgli skill, agent workflow, Claude integration and Codex integration.

Mowgli designs and prototypes; to host and ship, you hand off to a builder or coding agent (Claude Code, Codex, Cursor, Lovable).

Superdesign: canvas drafts for a page or feature

Superdesign reads your code, gathers references and creates branchable drafts on an infinite canvas. It stores its system in .superdesign/design-system.md; existing-page work begins with an HTML replica.

npx skills add superdesigndev/superdesign-skill
npm install -g @superdesign/cli@latest
superdesign login

For Claude Code, use /plugin marketplace add superdesigndev/superdesign-skill followed by /plugin install superdesign@superdesign. Do not also run the skills installer, which creates a duplicate copy.

Google Stitch skills

Google's repository contains 16 skills across design, build and utility plugins. It requires the Stitch MCP server. Stitch is currently free with a daily credit limit and exports HTML/CSS, Figma and DESIGN.md, not React components.

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

For Codex, run codex plugin marketplace add google-labs-code/stitch-skills --ref main, then install the plugins.

Sleek: mobile apps

Sleek's sleek-design-mobile-apps skill creates mobile screens through its REST API and requires SLEEK_API_KEY.

npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-apps

The REST API and skill are available on Pro at $69 per month or $360 per year, and on Team.

Already built in: Claude Code /design and Codex frontend-app-builder

Claude Code /design is a research preview that publishes editable artboards from a brief, then implements the selected direction. It requires Claude Code v2.1.265 or later and is available on Pro, Max, Team and Enterprise.

Codex's frontend-app-builder generates Image Gen concepts, builds a small design system from the accepted image, implements it and compares the concept with a browser screenshot before handoff.

Prices are from each vendor's pricing page, October 2026. Claude Pro costs $20 per month or $17 per month annually. See MCP and skills for visual design for more design canvases.

Which design skills to combine

• New Claude Code landing page: frontend-design plus web-design-guidelines.
• Generic existing app: /impeccable audit, then /impeccable polish; add shadcn when components.json exists. See how to redesign a vibe-coded app.
• New Codex app: Build Web Apps or gpt-taste, plus web-design-guidelines.
• Cursor with shadcn and Tailwind: shadcn plus Impeccable.
• Whole multi-screen product: Mowgli plus one review skill for implementation.
• Motion-heavy interface: add review-animations.

Before you install: conflicts, hooks and trust

Use one taste skill per project. Frontend-design's default clusters, Taste Skill's dials and UI UX Pro Max's catalog all govern the same choices. Combine across jobs instead: one taste skill, one review skill and one component skill.

Your brief still wins. Put fixed rules in CLAUDE.md, AGENTS.md or a documented design system. Avoid duplicate plugin and skill copies.

Hooks execute code. Impeccable notes that Claude Code command hooks run independently of model-tool approval, so use --no-hooks if you only want its instructions. Plugins and registries are third-party. Read SKILL.md and bundled scripts first, and inspect a repository with npx skills add <repo> --list.

Keep installations current with npx skills update, npx impeccable update and uipro update.

FAQ

What is the best Claude Code skill for frontend design?

Anthropic's frontend-design is the best default starting point. Install it with /plugin install frontend-design@claude-plugins-official; it plans palette, type and layout, then checks the plan against common AI defaults. For existing code, add Impeccable and run /impeccable audit followed by /impeccable polish.

Do Claude Code skills work in Codex and Cursor?

Yes. Skills follow the open Agent Skills format, and npx skills add <owner/repo> -a codex or -a cursor installs the same skill for either agent. Codex reads .agents/skills; Cursor reads .agents/skills, .cursor/skills and compatible Claude and Codex directories.

What are the best design skills for Codex?

Use OpenAI's Build Web Apps plugin for concept-first app work, Taste Skill's gpt-taste for visual direction, and Vercel's web-design-guidelines for review. OpenAI removed the older frontend-skill on April 23, 2026 and replaced it with Build Web Apps.

Can I install more than one design skill at once?

Yes. Agents initially load only each skill's name and description. Combine one taste skill with review and component skills; multiple taste skills provide competing rules for the same decisions.

Do design skills replace a design tool?

No. Taste, review and component skills change how an agent writes UI code, but they do not provide an approved set of screens. For a multi-screen product, the Mowgli skill connects the coding agent to every screen, state and the product spec, with changes synchronized in both directions.

Sources

• Agent Skills open standard
• Anthropic on improving frontend design through skills
• Vercel Labs skills CLI
• skills.sh
• skills.sh Design and UI topic
• Anthropic frontend-design installs
• Taste Skill installs
• UI UX Pro Max installs
• Vercel web-design-guidelines installs
• Emil Design Engineering installs
• Impeccable installs
• Claude Code skills documentation
• Codex skill documentation
• Codex plugins documentation
• Cursor skills documentation
• Anthropic frontend-design SKILL.md
• Taste Skill repository
• UI UX Pro Max repository
• Impeccable repository
• Vercel Web Interface Guidelines
• Emil Kowalski's skills
• shadcn skills documentation
• OpenAI Build Web Apps plugin
• Figma MCP server guide
• Mowgli skill repository
• Superdesign skill repository
• Google Stitch skills
• Sleek agent skills
• Claude pricing