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.
235 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…
301k1.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.
321k33MScore 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…
108k1.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…
301k1.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…
192k3.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…
148k932kScore 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…
148k932kScore 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…
192k3.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…
148k932kScore 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 235 design skills.
zubair-trabzadageo-brand-mentions
Brand mention and authority scanner for AI visibility. Analyzes brand presence across platforms that AI models rely on for entity recognition and citation decisions. Produces a Brand…
ReScienceLab
Opc Skills
ReScienceLablogo-creator
Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a…
Vincentwei1021video-shotcraft
Create cinematic product videos from frontend projects or webpages with Remotion, real page captures, shot cards, the Ink Press template, beat sync and sound design. Use for full product…
scenario-labsscenario-brand-kit
Use when building a visual identity or brand kit with Scenario: a logo, wordmark, or icon as editable SVG, a color palette and typography spec, logo variants (mono, reversed, favicon), and…
scenario-labsscenario-identity-library
Use when a named character or prop must become a reusable identity in Scenario: creating a character or prop from a brief or interview, building its approved image collection (character: or…
Stripe
AI
Stripestripe-apps
Build, modify, or review Stripe Apps and extensions using the relevant documentation and reference guides. Use for custom Stripe Dashboard UI, stripe-app.yaml, @stripe/ui-extension-sdk…
AgriciDanielblog-brand
Establish durable brand and voice context for cross-skill consumption. Generates BRAND.md (audience, positioning, do/don't editorial rules, taboo phrases, competitor differentiation) and…
Jakeschincariol
Replica Skill
Jakeschincariolreplica-brand
Names and rebrands an app clone so it is the user's own: name candidates with the trademark, domain, store and handle checks to run, a new palette checked for contrast, a logo brief, a…
Jakeschincariol
Replica Skill
Jakeschincariolreplica-design
Rebuilds an app's design system for a clone: colour roles, type scale, spacing, radius, shadows and every component with its states, as design tokens plus component specs, with original…
kostja94
Marketing Skills
kostja94visual-content
When the user wants to plan, create, or repurpose visual content (images, infographics, social post images) across channels. Also use when the user mentions "content images," "social media…
plugin87data-dashboard
Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation…
plugin87design-code
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native…
plugin87design-component
Design a UI component spec to the house quality bar (anatomy, variants, sizes, the 8 states, token mapping, and accessibility). Use when the user wants to design or document a component…
bitjaruss-learn
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts…
bitjarustyleseed
Build, improve, or inspect UI with StyleSeed. Preserves project design choices and routes setup, layout, tokens, review, rendered verification, and updates through one entry point.
juliobszawwwards
Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a quality standard. Covers…
zarazhangrui
Frontend Slides
zarazhangruifrontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create…
juliobszjury
Score any website the way an Awwwards jury would, from evidence alone. Screenshots every page type on desktop, a throttled phone and reduced motion, measures LCP, CLS, FPS, axe, keyboard…
GarethManning
Education Agent Skills
GarethManningai-feedback-design-principles
Audit and redesign AI-generated feedback for pedagogical quality, timing, and learning impact. Use when building or reviewing automated feedback in digital learning tools.
GarethManning
Education Agent Skills
GarethManningbackwards-design-unit-planner
Plan a unit using backwards design from desired outcomes through assessment evidence to learning activities. Use when starting a new unit or redesigning an existing one from standards.
nexscope-aibrand-monitoring
Brand monitoring tool for tracking mentions across social media platforms. Monitor Reddit, Google News, YouTube, and DuckDuckGo for brand mentions. Includes sentiment analysis, trend…
Paramchoudhary
ResumeSkills
Paramchoudharycreative-portfolio-resume
Balance visual design with ATS compatibility for creative roles
michaelshimeles
Rstack
michaelshimelesevidence-driven-testing
Records visual proof while testing UI behavior — the agent tests the app hands-on via computer use while a screen recording with structured test/assertion annotations captures the session —…
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"…
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…
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.
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…
kwakseongjaeclaude-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로…
kwakseongjaeego-browser
When you need a browser, read this Skill by default. Use it to open and operate websites, fill forms, click buttons, take screenshots, extract page data, sign in, and perform other browser…
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…
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…
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 —…
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…
Affitor
Affiliate Skills
Affitorbonus-stack-builder
Design exclusive bonus packages that make YOUR affiliate link the obvious choice. Triggers on: "create bonuses for", "bonus stack", "what bonuses should I offer", "bonus ideas for"…
Affitor
Affiliate Skills
Affitorgrand-slam-offer
Design irresistible affiliate offers using the Hormozi Grand Slam framework. Triggers on: "create an offer for", "design my offer", "grand slam offer", "make an irresistible offer", "why…
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…
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