Best Claude skills for design
Design skills give your agent taste: spacing scales, type hierarchy, color systems and the judgement to say no to generic layouts. The best ones ship a vocabulary ("polish", "bolder", "critique") and reference files your agent reads only when it needs them, so they stay cheap on context.
600 design skills · ranked live · November 2026
The top 10. Ranked by the Alyn Score.
- 1#1
Leonxlnx
Design Taste Frontend
tasteskill 2.5.1, the anti-slop frontend skill. Builds professional company websites at the level of figma.com and x.ai: plain copy in a voice of its own, one system, one section per…
113k5.6MScore 92 - 2#2
affaan-m
Brand Discovery
Run a structured, resumable multi-session brand identity interview across 8 modules (purpose, positioning, audience, personality, voice, narrative, founder tension) using laddering, 5 Whys…
Pack301k1.7MScore 91 - 3#3
Matt Pocock
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.
Pack321k33MScore 91 - 4#4
Paul Bakaus
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, dashboards…
Pack108k1.9MScore 90 - 5#5
Accessibility
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast…
Pack301k1.7MScore 89 - 6#6
Anthropic
Skills
Anthropic
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 static piece…
Pack192k3.8MScore 89 - 7#7
nextlevelbuilder
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, CIP…
Pack148k932kScore 89 - 8#8
Design System
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic…
Pack148k932kScore 89 - 9#9
Anthropic
Skills
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…
Pack192k3.8MScore 89 - 10#10
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…
Pack148k932kScore 89
What makes a great design skill.
Reference material (palettes, type scales, component rules) bundled with the skill.
A review or critique mode, not only a generate mode.
Clear guidance on what not to do. Taste is mostly subtraction.
All 600 design skills.
petrkindlmannobservability-driven-testing
Use production telemetry as INPUT to design new tests. Covers OpenTelemetry integration with tests, trace-based assertions, log-informed test creation, production-error analysis for…
TheQtCompanyRnD
Agent Skills
TheQtCompanyRnDqt-figma-component-generation
Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether…
TheQtCompanyRnD
Agent Skills
TheQtCompanyRnDqt-figma-token-extraction
Extract design tokens, text styles, and variables from a Figma design system and produce a design-tokens.json plus ready-to-use QML singletons. Use this skill whenever someone wants to pull…
LeoYeAI
Agent Master Skills
LeoYeAIab-test-setup
When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy,"…
LeoYeAI
Agent Master Skills
LeoYeAIactivity-campaign-from-ui
Turn campaign UI references into a new H5/Web campaign proposal, page architecture, and HTML/CSS/JavaScript high-fidelity front-end draft. Supports mode-based responses: analysis, proposal…
bergsideagentic
Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
bergsideant
Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
bergsideartistic
High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
michaelshimeles
Rstack
michaelshimelesbefore-and-after
Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots"…
OneWave-AI
Claude Skills
OneWave-AIbrand-voice-analyzer
Analyzes a company's content to extract and codify their brand voice into a comprehensive style guide. Reads website copy, blog posts, emails, and social media to identify tone, vocabulary…
rshankras
Claude Code Apple Skills
rshankrasdesign
Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, typography, and design-system rules that…
jsmastery-pro
Skills
jsmastery-prodevelop
Run /develop to build a feature, UI or backend, from an approved design, a page, component, API, service, or data slice. If something load bearing is undecided and no spec records it, it…
managedcodemaui
Build, review, or migrate .NET MAUI applications across Android, iOS, macOS, and Windows with correct cross-platform UI, platform integration, and native packaging assumptions. USE FOR…
quodsoler
Unreal Engine Skills
quodsolerue-ui-umg-slate
Use when writing or fixing Unreal Engine UI in C++ — UMG user widgets, Slate widgets, Common UI screens, or MVVM view models. Also use when the user mentions 'UUserWidget'…
boraoztunc
Skills
boraoztuncapple-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 interactions…
lawve-ai
Awesome Legal Skills
lawve-aiarbitration-clause-design-and-review-hafez-virjee
The architecture guidance for complex multi-party scenarios should include, where relevant: - institution selection: apply the general institution-selection criteria, with the additional…
boraoztunc
Skills
boraoztuncbeam-glow-states
Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or…
boraoztunc
Skills
boraoztuncbetter-accessibility
Accessibility engineering for product interfaces, from focus states and keyboard support to ARIA, forms, and screen readers. Use when building or reviewing UI components, modals, menus…
datadrivenconstructionbim-visual-programming-automation
Automate BIM workflows using visual programming and Python. Create parametric schedules, export data, batch modify elements, and integrate with external data sources.
charlie947
Motion Graphics Skills
charlie947brand-intake
The setup step every other skill in this pack reads. A short interview plus 3 to 5 reference frames becomes two files in your project, brand.md (who you are, what you sell, your assets) and…
nexscope-aiecommerce-branding
Build and strengthen your e-commerce brand identity. Brand positioning, messaging, visual identity guidelines, and brand consistency across sales channels and marketing touchpoints.
Jakeschincariol
Founder Skill
Jakeschincariolfounder-brand
Your brand designer. Names the business (with the trademark, domain and handle checks to run before falling in love with a name), writes the voice, a one-line promise and a tagline, and…
gooseworks-aigoose-product-photos
Make product photos (studio, lifestyle or on a model) of a brand's real products with GooseWorks in this chat. Start brand work with brand_knowledge_browse and follow the next_step in every…
aipoch
Medical Research Skills
aipochposter-storyline-builder
Reorganizes a paper into a storyline suitable for scientific posters. Use when planning the section structure, title hierarchy, figure selection, and live-explanation flow for an academic…
TheQtCompanyRnD
Agent Skills
TheQtCompanyRnDqt-ui-design
Design or audit UI for Qt/QML, Qt projects, web, or embedded MPU or MCU targets. Use when creating screens, layouts, navigation, or auditing UX.
freshtechbro
Claudedesignskills
freshtechbroanimated-component-libraries
Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill…
OneWave-AI
Claude Skills
OneWave-AIbrowser-test-loop
Use to actually verify a web change in a real browser instead of assuming it works — click through a flow, catch console errors, check a form submits, confirm a fix on the page. Trigger…
aiskillstore
Marketplace
aiskillstorecanvas-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 static piece…
kwakseongjaeclaude-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로…
OneWave-AI
Claude Skills
OneWave-AIclaude-design-critic
Audit a website or UI and de-AI it — find the patterns that make it look template-generated (in both design and copy) and return specific, prioritized fixes that push it toward editorial…
rrezartprebreza
Spring Boot Skills
rrezartprebrezadomain-driven-design
Use when evolving aggregate invariants, value objects or domain events in an existing DDD-style Spring Boot 3 application, or when DDD is explicitly requested. Preserve existing API…
iflytekfrontend-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…
aiskillstore
Marketplace
aiskillstorefrontend-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…
Prisma-Labs-Dev
Apple Skills
Prisma-Labs-Devguide-swiftui-ui-patterns
Best practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids…
kwakseongjaehangul
Fixes the Korean (Hangul) that coding agents get wrong, in web UI and in documents of any length. Typography for web UI: line breaking (break-all, keep-all, overflow-wrap), letter-spacing…
Prisma-Labs-Dev
Apple Skills
Prisma-Labs-Devios-design-consultant
UX and visual design consultant for iOS apps using Apple's Liquid Glass design system (iOS 26+). Use when asking about element positioning, layout decisions, visual hierarchy, or whether a…
Design skills, explained.
Also searched as: claude design skills, ui ux skills, design system skill, figma skill.
What are the best Claude skills for design?
Right now the top-ranked design skills on Alyn are Design Taste Frontend (Leonxlnx), Brand Discovery (affaan-m), Prototype (Matt Pocock). Rankings combine GitHub stars, installs, freshness and depth, and update live.
What is the best Claude skill for UI design?
Taste Skill, Impeccable, UI UX Pro Max and Anthropic's frontend-design are the most installed design skills on Alyn. Rankings update live from GitHub stars and skills.sh installs.
Can a skill replace a designer?
No. A good design skill raises the floor of what your agent produces and gives it a shared vocabulary with you. Direction still comes from you.
How do I install a design skill?
Run npx skills add owner/repo in your project, or copy the folder with SKILL.md into ~/.claude/skills. Every skill on this page has a ready-to-copy command.
More in Design & content
Design skills for your agent