UI UX Pro MaxTop pick
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…
Design & UI
NextLevelBuilder145k
41 skills · 13 publishers· updated November 4, 2026
Claude skills for UI/UX design
Interface design systems, UX patterns and visual polish. Skills that give Claude a designer's judgment for layout, hierarchy and interaction.
The best Claude skills for UI/UX design
- 1
UI UX Pro Max
UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems…
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max - 2
Design System
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide…
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system - 3
UI Styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user…
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling
All 41 UI/UX design skills
41 skills
Design System
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs…
Design & UINextLevelBuilder145k
UI Styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use…
Design & UINextLevelBuilder145k
Break UI
Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text…
Design & UI
Emil Kowalski54k
Pick UI Library
Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state…
Design & UIEmil Kowalski54k
Design System Patterns
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching…
Design & UI
Seth Hobson42k
Tailwind Design System
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design…
Design & UISeth Hobson42k
Shadcn UI
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
Frontend
Google Labs8.7k
Stitch Manage Design System
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Design & UIGoogle Labs8.7k
Expo Design System
Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with…
Mobile
Expo4k
Expo Native UI
Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive…
MobileExpo4k
Expo UI
Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and…
MobileExpo4k
Frontend DesignTop pick
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…
Design & UI
Anthropic187k
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…
Design & UI
Paul Bakaus103k
Prototype
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
Coding Workflow
Matt Pocock313k
Design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables…
Design & UINextLevelBuilder145k
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…
FrontendAnthropic187k
Webapp Testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots…
Testing & BrowserAnthropic187k
Design Is
Audit a design against Dieter Rams' ten "Good design is..." principles, then hand off a /make-plan prompt for one of three outcomes — new design, refine design, or redesign. Use…
Coding Workflow
claude-mem113k
Apple Design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet…
Design & UIEmil Kowalski54k
Emil Design Eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Design & UIEmil Kowalski54k
Find Animation Opportunities
Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it…
Design & UIEmil Kowalski54k
Prototype
Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right…
Design & UIEmil Kowalski54k
Vercel React View Transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…
Frontend
Vercel34k
Web Design Guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best…
Design & UIVercel34k
Brand Landingpage
Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with…
Design & UISeth Hobson42k
Interaction Design
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating…
Design & UISeth Hobson42k
Mobile Android Design
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's…
MobileSeth Hobson42k
Visual Edit Precision
Use when making UI/frontend changes guided by visual context, when the user selects elements visually, draws annotations, or provides screenshots alongside change requests. Also…
Coding WorkflowSeth Hobson42k
Web Component Design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries…
Design & UISeth Hobson42k
Design MD
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
Design & UIGoogle Labs8.7k
Enhance Prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better…
AI & AgentsGoogle Labs8.7k
Stitch Code To Design
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill…
Design & UIGoogle Labs8.7k
Stitch Extract Design MD
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files…
Design & UIGoogle Labs8.7k
Stitch Extract Static Html
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state…
Design & UIGoogle Labs8.7k
Stitch Generate Design
Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt…
Design & UIGoogle Labs8.7k
Taste Design
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color…
Design & UIGoogle Labs8.7k
Property Based Testing
Writes, reviews, and debugs property-based tests — Hypothesis, fast-check, proptest, jqwik, rapid, and Echidna or Medusa for Solidity invariants. Use whenever tests should cover a…
Security
Trail of Bits8k
Stripe Apps
Build, modify, or review Stripe Apps and extensions using the relevant documentation and reference guides. Use for custom Stripe Dashboard UI, stripe-app.yaml…
Backend & APIs
Stripe2k
Clean Cut
Step 1 of the AI Video Editor pipeline — turn raw talking-head footage into a clean master cut. Use when the user wants to "clean cut", "cut the raw footage", "remove filler /…
Video & Motion
LearnWithHasan364
Fake Screencast
Turn static SCREENSHOTS into a simulated screen recording (TSX) — a fake screencast with an animated cursor that eases to targets and clicks, a browser URL bar that updates per…
Video & MotionLearnWithHasan364
About these UI/UX design skills
This page collects every skill in the directory that covers UI/UX design: 41 from 13 publishers, including official skills from Google Labs, Expo, Anthropic and Vercel. Each one links back to its original GitHub repository, so you always get the author's latest version. They span Design & UI, Frontend, Backend & APIs and Mobile.
Questions about Claude skills for UI/UX design
What is the best Claude skill for UI/UX design?
Our top pick is UI UX Pro Max by NextLevelBuilder, from a repository with 145k GitHub stars. Design System and UI Styling round out the top three. Skills are ranked by the popularity of their source repository, with hand-picked favorites first, and official skills from Google Labs, Expo, Anthropic and Vercel carry a badge.
How do I install a Claude skill for UI/UX design?
Open a skill's page and run its install command in your project folder, for example npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max. You can also download any skill as a ZIP and add it to Claude Code or upload it to the Claude app.
Skills from claude-mem rely on shared scripts and agents, so install them as a Claude Code plugin. Their pages show the two commands.
The install guide walks through every method.
Are Claude skills for UI/UX design free?
Yes. All 41 skills on this page are open source and free to use, and most are MIT licensed. You need a Claude plan that supports skills, or a coding agent that reads SKILL.md files.
Do these skills work in Claude Code and the Claude app?
Yes. A skill is a folder with a SKILL.md file, and the same folder works in Claude Code, the Claude desktop and web apps (on paid plans with code execution turned on) and the Claude API. Many also work in other agents that support the Agent Skills format, such as Cursor and OpenAI Codex. Skills that ship scripts need somewhere Claude can run code.
How many Claude skills for UI/UX design are there?
We list 41 from 13 publishers, last updated November 4, 2026. The list refreshes from GitHub as publishers release new skills.
Related use cases
All use cases →- Claude skills for design53 skillsFrontend Design · UI UX Pro Max · Taste Skill
- Claude skills for animation39 skillsAnimate · Animate Expo · Animation Performance
- Claude skills for Tailwind CSS6 skillsTailwind Design System · Taste Skill · UI Styling
- Claude skills for React23 skillsVercel React Best Practices · Vercel React View Transitions · React Modernization
- Claude skills for accessibility14 skillsAccessibility Compliance · Wcag Audit Patterns · UI UX Pro Max
- Claude skills for Android development12 skillsMobile Android Design · Firebase Apk Scanner · Impeccable