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.
freshtechbro
Claudedesignskills
freshtechbromodern-web-design
Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems…
freshtechbro
Claudedesignskills
freshtechbromotion-framer
Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresence…
kwakseongjaeomd-3d-hero
A rendered 3D hero from the project's DESIGN.md: a soft-lit studio (cyclorama, contact shadows, ambient occlusion) with a floating pile of brand-colored objects shaped by the radius tokens…
managedcodeplan-ui-change
Plan complex Blazor UI features by decomposing them into focused components. USE FOR: building a complex Blazor page with multiple sections, planning component decomposition, designing a…
minhnv0807product-marketing-context-global
Use when starting work on a new product, client, or market — this skill creates the file `.agents/product-marketing-context-global.md` that 60+ other global skills read before they write…
referodesignrefero-design
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components…
superdesigndevsuperdesign
Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models. Use whenever the user wants to design a page, feature, flow, slide…
rshankras
Claude Code Apple Skills
rshankrasswiftui
SwiftUI framework skills — data flow (identity, Observation, state ownership), layout & containers (Layout protocol, lazy-stack performance), AlarmKit, 3D charts, rich text editing…
lixiaolin94
Skills
lixiaolin94android-background-test
在 ADB 连接的 Android 真机上测试或操作 App：启动、截图、读控件树、按元素或坐标点击、滑动、按键、输入中文、 按步骤跑用例（Journeys）。全程在用户看不到的后台屏进行，用户可以照常用手机。用户提到“用手机/真机测一下” “adb 截图/点击”“dump UI 树/找到某个按钮点一下”“Android UI 自动化”“真机复现 bug”“看看 App…
Cold-IQ
ColdIQ S GTM Skills
Cold-IQdesign-stack
Use when the user wants a polished UI component, animation, chart, or design pattern for a web app and it could come from an existing design gallery instead of being written from scratch —…
LottieFilesmotion-design
Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted…
runkidsskillshare-ui-website-style
Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/…
nexscope-aiamazon-brand-registry
Brand Registry enrollment guide — eligibility, application, benefits, A+ Content access, brand protection tools
onvoyage-ai
GTM Engineer Skills
onvoyage-aibuild-backlinks
Finds free backlink and brand mention opportunities across Hacker News, Quora, GitHub, directories, and niche communities. Outputs a prioritized action plan with draft responses ready to…
growthenginenowoslawski
Coldoutboundskills
growthenginenowoslawskiexperiment-design
Framework for running single-variable cold email experiments. Defines experiment types (list-only, copy-only, combined), confidence weighting, minimum sample sizes, and success criteria…
OSideMedia
Higgsfield AI Prompt Skill
OSideMediahiggsfield-character-design
Pre-production story-and-character development for Higgsfield projects — the upstream layer that decides WHAT to prompt before any model runs. Use when the user wants to build a character…
OSideMedia
Higgsfield AI Prompt Skill
OSideMediahiggsfield-motion-design
End-to-end motion-design / animated-ad creation flow on Higgsfield via the MCP connector. Use when the user wants to create motion design, animate a logo, make a video from an image, build…
sanjay3290
AI Skills
sanjay3290imagen
Generate images using Google Gemini's image generation capabilities. Use this skill when the user needs to create, generate, or produce images for any purpose including UI mockups, icons…
Prisma-Labs-Dev
Apple Skills
Prisma-Labs-Devios-ui-craft
Production-grade SwiftUI with Apple Design Award-quality aesthetics. Use when building visually striking iOS interfaces — screens, components, redesigns. Screenshot-driven visual iteration…
flowful-aiparametric-3d-printing
Use this skill when the user wants to design a 3D-printable physical object they intend to manufacture. Triggers: any mention of '3D print', 'STL', 'parametric model', 'Gridfinity'…
onvoyage-ai
GTM Engineer Skills
onvoyage-aireddit-opportunity-research
Researches Reddit using a brand's Brand DNA to find promotable pain-point discussions, target subreddits, and real user search language. Produces a prioritized Reddit opportunity list for…
haidrrrryremotion-motion-graphics
Create and edit professional motion graphics videos with Remotion (React-based video). Use this skill EVERY time the user wants to create a video, edit a video, animate something, build an…
rjs
Shaping Skills
rjsbreadboarding
Transform a workflow description into affordance tables showing UI and Code affordances with their wiring. Use to map existing systems or design new ones from shaped parts.
AlpacaLabsLLCcolor-palette-generator
Create an HTML color palette from a mood, description, or image, with swatches, color codes, pairings, and contrast checks. Use for color schemes or brand colors.
datadrivenconstructiongenerative-ai-design
Generative design for construction: text-to-BIM concepts, option generation, and AI-assisted design iteration with cost and carbon feedback. Use when exploring early design options with AI.
Affitor
Affiliate Skills
Affitorinfographic-generator
Generate branded infographic specifications from any content or data. Outputs structured layout, copy, data visualization, and color scheme — ready to render as HTML/CSS, Satori, Canva, or…
hamenmaterial-3
Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web…
onvoyage-ai
GTM Engineer Skills
onvoyage-airesearch-brand
Researches a company from its URL and produces a Brand DNA file covering positioning, audience, competitors, voice, and messaging. Use when starting work with a new brand or customer.
fatihaydostbrand-identity
Brand identity sets from one brief - logo, typography and colour palette built together, measured (contrast, colour blindness, glyph coverage, font licences, small-size logo renders) and…
feichanggegeecommerce-visual-copywriting
将商品资料、包装与资质、目标平台、目标人群和视觉参考转成可执行的电商视觉方案，包括转化策略、Campaign Style Lock、主图/详情页/Listing/A+ Storyboard、图内文案、设计说明、生图 Prompt、证据与合规审查。适用于淘宝、天猫、京东、拼多多、抖音小店、小红书、视频号/微信小店，以及 Amazon、Shopify、TikTok…
likakumck-ppt-design
Create professional, consultant-grade PowerPoint presentations from scratch using MckEngine (python-pptx wrapper) with McKinsey-style design. Use when user asks to create slides, pitch…
mxyhiprototype
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.
aj-geddes
Claude Code Bmad Skills
aj-geddesbmad-ux
Solutioning-phase UX planning skill (optional; activate when the project has a UI). Produces TWO planning documents: DESIGN.md (the visual system — design tokens, color palette, typography…
Cold-IQ
ColdIQ S GTM Skills
Cold-IQdesign-director
Use when designing anything OUTSIDE the ColdIQ brand — client demos, lead magnets, side projects, experiments, post visuals — and the work involves visual/UI decisions. Routes between…
zsygggpaper-deck
将论文、技术文章或知识内容制作成高真实感的 AIGC 幻灯片。先做叙事结构和逐页视觉导演，再调用生图模型生成每一页 16:9 slide image，最后合成为 PPTX/PDF。适合论文汇报、组会、公开课、技术分享、商业化研究展示；当用户提到“论文PPT”“AI生成PPT”“不像AI的PPT”“高质感幻灯片”“逐页生图PPT”时使用。
lingxling
Awesome Skills Cn
lingxlingslack-gif-creator
Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or…
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