Skip to content
alyn

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
    Details
  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
    Details
  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
    Details
  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
    Details
  5. #5
    affaan-m

    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
    Details
  6. Anthropic

    Skills

    #6
    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
    Details
  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
    Details
  8. #8
    nextlevelbuilder

    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
    Details
  9. Anthropic

    Skills

    #9
    Anthropic

    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
    Details
  10. #10
    nextlevelbuilder

    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
    Details

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.

64
rampstackco

cost-optimization

Audit and reduce infrastructure and tooling costs without sacrificing reliability or velocity. Use this skill when reviewing monthly cloud or SaaS spend, finding unused resources…

Pack1.1k31kDevOps
64
rampstackco

creative-brief-selector

Produce a creative brief grounded in live reference sites and deliberately distinct from existing demos, for any new brand build. Composes with brand-archetype-system and…

Pack1.1k31kDesign
64
plugin87

design-doctrine

The house rules for ANY design or UI work - the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states…

Pack3.2k11kDesign
64
plugin87

design-screen

Design or build a page, screen, landing page, website, app or UI from a request - the whole job, end to end. Use this for "design a landing page", "build a settings screen", "make me a…

Pack3.2k11kDesign

borghei

Claude Skills

64
borghei

form-cro

Form optimization for lead capture, contact, demo request, application, and checkout forms. Covers field-cost analysis, multi-step form design, validation UX, mobile optimization, and A/B…

Pack1.1k42kMarketing

borghei

Claude Skills

64
borghei

free-tool-strategy

Free tool marketing strategy covering idea evaluation, tool design, lead capture architecture, SEO landing pages, launch playbook, and ROI measurement for calculators, generators, checkers…

Pack1.1k42kMarketing

borghei

Claude Skills

64
borghei

onboarding-cro

Post-signup user onboarding optimization covering activation metrics, time-to-value reduction, onboarding flow design, empty state optimization, multi-channel coordination, and stalled user…

Pack1.1k42kMarketing

borghei

Claude Skills

64
borghei

page-cro

Landing page and marketing page conversion rate optimization covering value proposition clarity, headline effectiveness, CTA hierarchy, visual flow, social proof placement, objection…

Pack1.1k42kMarketing

borghei

Claude Skills

64
borghei

paywall-upgrade-cro

In-app paywall and upgrade screen optimization covering feature gate design, usage limit UX, trial expiration flows, upgrade trigger timing, save offer strategy, and ethical monetization…

Pack1.1k42kMarketing

borghei

Claude Skills

64
borghei

popup-cro

Popup and modal optimization for conversion. Covers exit-intent, slide-ins, banners, timing optimization, frequency capping, audience targeting, compliance, and A/B testing frameworks for…

Pack1.1k42kMarketing

Owl-Listener

Designer Skills

64
Owl-Listener

research-repository

Build a repository that makes findings findable, reusable, and cumulative across teams. Use when the same research keeps getting redone. For synthesising one study, use `affinity-diagram`.

Pack3.3k237kResearch

jezweb

Claude Skills

64
jezweb

shadcn-ui

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI…

Pack1.1k143kDesign

borghei

Claude Skills

64
borghei

signup-flow-cro

Signup and registration flow optimization covering SSO strategy, progressive profiling, field reduction, multi-step flow design, authentication UX, post-submit experience, and mobile…

Pack1.1k42kMarketing

Owl-Listener

Designer Skills

64
Owl-Listener

survey-design

Design unbiased survey instruments — question wording, scales, and sampling — to measure attitudes at scale. Use when you need quantitative breadth. For behavioural experiments, use…

Pack3.3k237kDesign
64
BuilderIO

visual-edit

Open and collaboratively edit a running local app in Design, with shared fallback previews and source handoff. Use when the user asks to inspect, share, or edit a real local app in Design.

Pack4.7k6.5kDesign

Owl-Listener

Designer Skills

63
Owl-Listener

behavioural-analytics

Read funnels, retention curves, and event data as a designer — separating a design problem from a tracking artefact. Use when handed product data you did not design and asked why people…

Pack3.3k237kData analysis

Owl-Listener

Designer Skills

63
Owl-Listener

design-debt-audit

Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit`…

Pack3.3k237kDesign

jezweb

Claude Skills

63
jezweb

design-loop

Autonomous multi-page site builder using a baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site…

Pack1.1k143kDesign

jezweb

Claude Skills

63
jezweb

design-review

Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks…

Pack1.1k143kDesign

jezweb

Claude Skills

63
jezweb

design-system

Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser…

Pack1.1k143kDesign
63
plugin87

grill-me

Interrogate the brief before a line is built. Ask only the questions whose answers change the work, and put every unasked decision on the record as a stated assumption.

Pack3.2k11kDesign

jezweb

Claude Skills

63
jezweb

image-processing

Process images for web development — resize, crop, trim whitespace, convert formats (PNG/WebP/JPG), optimise file size, generate thumbnails, create OG card images. Uses Pillow (Python) — no…

Pack1.1k143kImages & art

jezweb

Claude Skills

63
jezweb

onboarding-ux

Audit and generate in-app user guidance — onboarding flows, empty states, tooltips, feature tours, contextual help, defaults, and inline hints. Browses the app to find where new users would…

Pack1.1k143kDesign

jezweb

Claude Skills

63
jezweb

react-native

React Native and Expo patterns for building performant mobile apps. Covers list performance, animations with Reanimated, navigation, UI patterns, state management, platform-specific code…

Pack1.1k143kFrontend

arnabbagxd

Brand Building Skills

62
arnabbagxd

brand-measurement

Define KPIs, metrics, and tracking systems to measure brand health, awareness, perception, and equity over time. Use when the user says "brand measurement", "brand metrics", "how do we…

Pack86056kDesign

arnabbagxd

Brand Building Skills

62
arnabbagxd

brand-naming

Full brand naming workflow for founders, agencies, and businesses. Use this skill whenever the user says "help me name this brand", "brand naming", "I need a name for", "name ideas for"…

Pack86056kDesign

arnabbagxd

Brand Building Skills

62
arnabbagxd

brand-packaging

Create a packaging design brief — structure, visual direction, hierarchy, materials, and unboxing experience. Use when the user says "packaging design", "packaging brief", "product…

Pack86056kDesign

arnabbagxd

Brand Building Skills

62
arnabbagxd

brand-partnerships

Build brand partnership strategy — co-branding campaigns, brand collaborations, licensing deals, partner brand alignment, and joint marketing. Use when the user says "brand partnership"…

Pack86056kDesign

arnabbagxd

Brand Building Skills

62
arnabbagxd

brand-strategy

Full brand strategy workflow for agencies and brand consultants. Acts as a senior brand strategist — collects client information through a structured questionnaire, then generates a…

Pack86056kDesign
62
plugin87

critique

Adversarial design critique of the current work. Render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.

Pack3.2k11kDesign

arnabbagxd

Brand Building Skills

62
arnabbagxd

d2c-marketing

Build and execute marketing strategy for Direct-to-Consumer (DTC) brands — customer acquisition, retention, email flows, social proof, subscription models, and repeat purchase mechanics…

Pack86056kMarketing

arnabbagxd

Brand Building Skills

62
arnabbagxd

email-marketing

Build and run a full email marketing channel — list building, deliverability, segmentation, newsletter strategy, campaign types, A/B testing, and email design. Use when the user says "email…

Pack86056kMarketing

jezweb

Claude Skills

62
jezweb

favicon-gen

Generate custom favicons from logos, text, or brand colours. Produces favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, and web manifest. Use whenever the user wants a…

Pack1.1k143kDesign

arnabbagxd

Brand Building Skills

62
arnabbagxd

influencer-marketing

Build an influencer marketing strategy — finding influencers, briefing, contracts, deliverables, performance tracking, micro vs macro strategy, outreach, and FTC compliance. Use when the…

Pack86056kMarketing

Owl-Listener

Designer Skills

62
Owl-Listener

interview-script

Write a structured interview guide — warm-up, core exploration, and wrap-up. Use before running interviews. For analysing what comes back, use `summarize-interview`.

Pack3.3k237kCareer

arnabbagxd

Brand Building Skills

62
arnabbagxd

personal-brand

Build a personal brand strategy for founders, executives, creators, and consultants. Use when the user says "personal brand", "personal branding", "build my brand", "founder brand"…

Pack86056kDesign

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.

Built a design skill? Get it ranked.

Submit a skill