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
53 skills · 9 publishers· updated November 4, 2026
Claude skills for design
Give Claude real taste: design systems, typography, color, layout and UI polish, so what it builds stops looking like a default template.
The best Claude skills for design
- 1
Frontend Design
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 read as templated…
npx skills add anthropics/skills --skill frontend-design - 2
UI UX Pro Max
NextLevelBuilder 145k
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 - 3
Taste Skill
Leon 110k
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions…
npx skills add leonxlnx/taste-skill --skill design-taste-frontend
All 53 design skills
53 skills
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 & UINextLevelBuilder145k
Taste SkillTop pick
tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals…
Design & UILeon110k
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
Banner Design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design…
Design & UINextLevelBuilder145k
Brand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style…
Design & UINextLevelBuilder145k
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
Design System
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs…
Design & UINextLevelBuilder145k
Slides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
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
Algorithmic Art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic…
Design & UIAnthropic187k
Brand Guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style…
Design & UIAnthropic187k
Canvas Design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other…
Design & UIAnthropic187k
Theme Factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can…
Design & UIAnthropic187k
Figma
Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and…
Design & UI
HeyGen79k
Animate
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties…
Design & UI
Emil Kowalski54k
Animation Performance
Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops…
Design & UIEmil Kowalski54k
Animation Vocabulary
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS…
Design & UIEmil Kowalski54k
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
Ask Sonner
Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts…
Design & UIEmil Kowalski54k
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 & UIEmil Kowalski54k
Choreograph
Coordinate several elements that animate together — decide what moves, in what order, how much they overlap, and what stays still — so a group reads as one intentional motion…
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
Improve Animations
Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper…
Design & UIEmil 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
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
Remove Animations
Find the animations an interface doesn't need and remove them — motion on keyboard actions, high-frequency surfaces, functional data, and decoration with no purpose — then clean…
Design & UIEmil Kowalski54k
Review Animations
Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
Design & UIEmil Kowalski54k
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 & UI
Vercel34k
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA…
Design & UI
Seth Hobson42k
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
Deployment Pipeline Design
Design multi-stage CI/CD pipelines with approval gates, security checks, and deployment orchestration. Use this skill when designing zero-downtime deployment pipelines…
Design & UISeth Hobson42k
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 & UISeth Hobson42k
Event Store Design
Design and implement event stores for event-sourced systems. Use when building event sourcing infrastructure, choosing event store technologies, or implementing event persistence…
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
KPI Dashboard Design
Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics…
Design & UISeth Hobson42k
Postgresql Table Design
Use this skill when designing or reviewing a PostgreSQL-specific schema. Covers best-practices, data types, indexing, constraints, performance patterns, and advanced features
Design & UISeth Hobson42k
Python Design Patterns
Python design patterns including KISS, Separation of Concerns, Single Responsibility, and composition over inheritance. Use this skill when designing a new service or component…
Design & UISeth Hobson42k
Responsive Design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces…
Design & UISeth 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
Visual Design Foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or…
Design & UISeth 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 & UI
Google Labs8.7k
Site MD
Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop
Design & UIGoogle 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
Stitch Loop
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
Design & UIGoogle 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
Stitch Upload To Stitch
Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs…
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
About these design skills
Out of the box, AI-generated interfaces tend to look the same: centered heroes, purple gradients, generic cards. Design skills fix that by giving Claude concrete rules for spacing, type scales, color and hierarchy, plus the judgment to break them on purpose.
You'll find Anthropic's own frontend-design skill, full UI/UX systems with hundreds of style presets, and focused skills for brand guidelines, Figma handoff and accessibility.
This page collects every skill in the directory that covers design: 53 from 9 publishers, including official skills from Google Labs, Anthropic, HeyGen and Vercel. Each one links back to its original GitHub repository, so you always get the author's latest version.
Questions about Claude skills for design
What is the best Claude skill for design?
Our top pick is Frontend Design by Anthropic, from a repository with 187k GitHub stars. UI UX Pro Max and Taste Skill 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, Anthropic, HeyGen and Vercel carry a badge.
How do I install a Claude skill for design?
Open a skill's page and run its install command in your project folder, for example npx skills add anthropics/skills --skill frontend-design. You can also download any skill as a ZIP and add it to Claude Code or upload it to the Claude app.
The install guide walks through every method.
Are Claude skills for design free?
Yes. All 53 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 design are there?
We list 53 from 9 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 UI/UX design41 skillsUI UX Pro Max · Design System · UI Styling
- Claude skills for Tailwind CSS6 skillsTailwind Design System · Taste Skill · UI Styling
- Claude skills for animation39 skillsAnimate · Animate Expo · Animation Performance
- 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 presentations16 skillsPPTX · Slides · Slideshow