Design & UI/UX — Skills

Claude Code skills for design and UI/UX. Build design systems, implement accessibility, create animations, and follow visual design best practices.

522 skills in this category

522 skills
SkillInstalls
frontend-design logo
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 defaults.

493.2Kinstalls
web-design-guidelines logo
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 practices".

361.1Kinstalls
ui-ux-pro-max logo
ui-ux-pro-max

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks.

196.6Kinstalls
sleek-design-mobile-apps logo
sleek-design-mobile-appssleekdotdesign/agent-skills

AI-powered mobile app design tool with REST API for creating projects, describing designs in plain language, and rendering screens.

182.3K
extract-design-system logo
extract-design-systemarvindrk/extract-design-system

Reverse-engineer design tokens from public websites into starter token files for your project.

120.8K
emil-design-eng logo
emil-design-engemilkowalski/skill

Craft-focused design philosophy for building interfaces where every detail compounds into something that feels right.

77.5K
canvas-design logo
canvas-designanthropics/skills

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 static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

66.4K
gpt-taste logo
gpt-tasteleonxlnx/taste-skill

gpt taste

64.4K
image-to-code logo
image-to-codeleonxlnx/taste-skill

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

53.3K
brandkit logo
brandkitleonxlnx/taste-skill

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

51.5K
brand-guidelines logo
brand-guidelinesanthropics/skills

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 guidelines, visual formatting, or company design standards apply.

50.9K
imagegen-frontend-web logo
imagegen-frontend-webleonxlnx/taste-skill

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

50.7K
imagegen-frontend-mobile logo
imagegen-frontend-mobileleonxlnx/taste-skill

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

49.6K
design-md logo
design-mdgoogle-labs-code/stitch-skills

Analyze Stitch design projects and generate semantic DESIGN.md files as prompting source of truth.

47.1K
tailwind-design-system logo
tailwind-design-systemwshobson/agents

CSS-first design system framework for Tailwind v4 with tokens, components, and responsive patterns.

46.1K
frontend-design logo
frontend-designanthropics/claude-code

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics through intentional design direction.

41.6K
accessibility logo
accessibilityaddyosmani/web-quality-skills

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

25.2K
huashu-design logo
huashu-designalchaincyf/huashu-design

Huashu-Design · HTML-first prototyping, animations, and design direction for AI agents.

24.8K
baoyu-xhs-images logo
baoyu-xhs-imagesjimliu/baoyu-skills

Generates infographic image card series with 12 visual styles, 8 layouts, and 3 color palettes. Breaks content into 1-10 cartoon-style image cards optimized for social media engagement. Use when user mentions "小红书图片", "小红书种草", "小绿书", "微信图文", "微信贴图", "image cards", "图片卡片", baoyu-xhs-images, or wants social media infographic series.

23.7K
api-design-principles logo
api-design-principleswshobson/agents

REST and GraphQL API design principles for building scalable, developer-friendly APIs.

22.1K
mobile-ios-design logo
mobile-ios-designwshobson/agents

Native iOS app design with SwiftUI, Apple HIG compliance, and adaptive layouts for iPhone and iPad.

16.3K
mobile-android-design logo
mobile-android-designwshobson/agents

Material Design 3 and Jetpack Compose patterns for building modern, adaptive Android applications.

16K
fixing-motion-performance logo
fixing-motion-performanceibelick/ui-skills

Audit and fix animation performance issues including layout thrashing, compositor properties, and scroll-linked motion.

15.5K
web-design-guidelines logo
web-design-guidelinesantfu/skills

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 practices".

14.2K
Showing 124 of 522
1 / 22

Related categories

FAQ

What are design & ui/ux skills?

Design & UI/UX skills are reusable instructions that teach AI agents how to work in design & ui/ux workflows. They help agents follow framework conventions, generate better output, and stay aligned with best practices in this domain.

How do I install a design & ui/ux skill?

Run the install command shown on each skill page, e.g. `npx skills add owner/repo --skill skill-name`. The skill becomes available in your agent sessions after installation.

Which tools and frameworks are covered?

Browse skills tagged for design & ui/ux to find options for popular stacks and libraries. The catalog is community-maintained and updated as new skills are published to GitHub.