Design & UI/UX Skills
FAQ
Can Claude Code help with UI/UX design?
Yes — design skills teach Claude visual design principles, accessibility standards, animation patterns, and how to implement design system components.
#SkillInstalls
1
235
design-systemcommunity-access/accessibility-agents
Validate design system tokens for WCAG AA/AAA contrast. Compute color token contrast, focus ring validation (WCAG 2.4.13), motion tokens, and spacing for touch
2
2.1K
figma-create-design-system-rulesnexu-io/open-design
Generate project-specific design system rules for Figma-to-code workflows. Useful for capturing tokens, naming, and lint rules in one source.
3
1.9K
figma-create-design-system-rulesopenai/skills
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r
4
1.7K
figma-create-design-system-rulesfigma/mcp-server-guide
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r
5
19.4K
design-systemnextlevelbuilder/ui-ux-pro-max-skill
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales,
6
236.6K
stitch-design-tasteleonxlnx/taste-skill
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, ca
7
16.1K
taste-designgoogle-labs-code/stitch-skills
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, ca
8
10.9K
visual-design-foundationswshobson/agents
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building sty
9
8.5K
frontend-design-systemsupercent-io/skills-template
Production-grade UI design with design tokens, layout rules, motion guidance, and accessibility validation.
103.2K
design-systemsupercent-io/skills-template
Production-grade UI design system with design tokens, layout rules, motion guidelines, and accessibility validation.
11
3.2K
ui-design-systemsamhvw8/dot-claude
React UI component systems with TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (styling), Radix UI (primitives), shadcn/ui (components), React/Next.js. Cap
12
1.5K
design-systembuildgreatproducts/builder-os
Translates an image (or a set of image references — screenshots, mockups, Figma URLs, live websites) into two mirrored design-system artifacts: `docs/design.md`
131.1K
stitch-design-tastenexu-io/open-design
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, ca
14
680
software-ui-ux-designvasilyu1983/ai-agents-public
Designs and audits UI/UX with WCAG 2.2 accessibility. Use when designing flows, running heuristic reviews, or defining design systems.
15
566
ui-ux-design-prosaifyxpro/ui-ux-design-pro-skill
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS
16
523
web-animation-designconnorads/dotfiles
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easi
17
512
frontend-ui-ux-designdauquangthanh/hanoi-rainbow
Creates comprehensive frontend UI/UX designs including user interfaces, design systems, component libraries, responsive layouts, and accessibility implementatio
18
512
ios-ux-designmosif16/codex-skills
Activate this skill when analyzing iOS app UI/UX, evaluating iOS design patterns, proposing iOS interface improvements, or creating iOS implementation specifica
19
411
animation-micro-interaction-packpatricio0312rev/skills
Provides reusable interaction patterns and motion presets that make UI feel polished. Includes hover effects, transitions, entrance animations, gesture feedback
20
260
ios-design-systempproenca/dot-skills
Clinic-architecture-aligned iOS design system engineering for SwiftUI (iOS 26 / Swift 6.2) covering token architecture, color/typography/spacing systems, compon
21190
ui-ux-designsamhvw8/dot-claude
UI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Ta
22
174
generic-react-design-systemtravisjneuman/.claude
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animatio
23
—
applying-ui-design-systemtelagod/code-abyss
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when buildin
24280.4K
high-end-visual-designleonxlnx/taste-skill
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive.
251.4K
create-design-system-rulesfigma/mcp-server-guide
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design r
26
953
web-motion-designdylantarre/animation-principles
Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.
27167
web-prototype-taste-brutalistnexu-io/open-design
Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII
28165
html-ppt-taste-brutalistnexu-io/open-design
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII
29
—
migrate-design-systemplugin87/ux-ui-agent-skills
Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…) —
3012.4K
interaction-designwshobson/agents
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading
31
8.7K
motion-designlottiefiles/motion-design-skill
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney a
32
7.9K
design-motion-principleskylezantos/design-motion-principles
Motion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposef
335.2K
figma-implement-designopenai/skills
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "im
344.1K
figma-implement-designfigma/mcp-server-guide
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "im
35
3.2K
design-systemanthropics/knowledge-work-plugins
Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a c
36
2.5K
accessibility-a11ymindrally/skills
Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.
37
2.3K
design-systemaffaan-m/ecc
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling.
382.1K
figma-implement-designnexu-io/open-design
Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
39
1.5K
ui-design-systemdavila7/claude-code-templates
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof
40
1K
ui-design-systemalirezarezvani/claude-skills
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handof
41
944
design-systemjezweb/claude-skills
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmo
42
660
design-system-startersoftaworks/agent-toolkit
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable
43
593
color-accessibilityaj-geddes/useful-ai-prompts
Design color palettes that are accessible to all users including those with color blindness. Ensure sufficient contrast, meaningful use of color, and inclusive
44475
interaction-designaj-geddes/useful-ai-prompts
Design meaningful interactions and microinteractions. Create delightful user experiences through thoughtful animation, feedback, and responsive interface design
45
437
design-taste-frontendbnd-1/taste-skill
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acce
46402
design-system-starterdavila7/claude-code-templates
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable
47
398
design-system-creationsecondsky/claude-skills
| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standa
48370
figma-implement-designdavila7/claude-code-templates
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convent
49364
interaction-designsecondsky/claude-skills
Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error han
50293
responsive-design-systempatricio0312rev/skills
Implements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users
51
256
casper-design-systemcasper-studios/casper-marketplace
Casper Studios internal design system for generating consistent, production-grade SaaS UI. Use this skill whenever generating UI code for internal tools, client
52
198
ui-design-systemborghei/claude-skills
UI design system toolkit covering design tokens, component documentation, responsive calculations, and developer handoff. Use for creating design systems, maint
53
180
figma-implement-designtech-leads-club/agent-skills
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convent
54
154
motion-design-patternsdylanfeltus/skills
Framer Motion (Motion) animation patterns for React — springs, staggers, layout animations, micro-interactions, scroll effects, and page transitions. Use when b
55
—
design-system-architectdaffy0208/ai-dev-standards
Build scalable, maintainable design systems that unify product experiences. Use when creating component libraries, design tokens, or establishing design standar
56
—
yuv-design-systemhoodini/ai-agents-skills
Yuval Avidani's YUV.AI brand and design system. Apply ONLY when YUV.AI-branded output is requested — presentations, decks, keynotes, portfolio, brand site, prof
5718.1K
banner-designnextlevelbuilder/ui-ux-pro-max-skill
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, cre
581.1K
gpt-tastenexu-io/open-design
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typograph
62—
a11y-auditplugin87/ux-ui-agent-skills
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user want
66374K
design-taste-frontendleonxlnx/taste-skill
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that d
67173.5K
design-taste-frontend-v1leonxlnx/taste-skill
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is
68
127.6K
extract-design-systemarvindrk/extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
6959.9K
tailwind-design-systemwshobson/agents
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implemen
7013.1K
design-system-patternswshobson/agents
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing the
714.5K
figma-generate-designfigma/mcp-server-guide
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',
73
2.8K
tailwind-design-systemgiuseppe-trisciuoglio/developer-kit
Skill for creating and managing a Design System using Tailwind CSS and shadcn/ui. Use when defining design tokens, setting up theming with CSS variables, buildi
742.1K
figma-generate-designnexu-io/open-design
Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
751.9K
figma-generate-designopenai/skills
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma',
761.7K
design-taste-frontendnexu-io/open-design
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that d
781.2K
high-end-visual-designnexu-io/open-design
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive.
79
1.2K
wcag-accessibility-auditmastepanoski/claude-skills
Comprehensive web accessibility audit using WCAG 2.1/2.2 guidelines. Evaluate compliance across 4 POUR principles (Perceivable, Operable, Understandable, Robust
80
1.1K
design-system-adoptionowl-listener/designer-skills
Create adoption strategies and materials to drive design system usage across teams.