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.
wondelai
Skills
wondelaidesign-everyday-things
Apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error…
Google Labs
Stitch Skills
Google Labsdesign-md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
wondelai
Skills
wondelaidesign-sprint
Run a structured 5-day process to prototype, test, and validate product ideas with real users. Use when the user mentions "design sprint", "validate before we build", "rapid prototype"…
wondelai
Skills
wondelaidomain-driven-design
Model software around the business domain using bounded contexts, aggregates, and ubiquitous language. Use when the user mentions "domain modeling", "bounded context", "aggregate root"…
wondelai
Skills
wondelaidrive-motivation
Design motivation systems using Autonomy, Mastery, and Purpose (AMP) for products and teams. Use when the user mentions "intrinsic motivation", "gamification isnt working", "rewards arent…
Google Labs
Stitch Skills
Google Labsenhance-prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation…
wondelai
Skills
wondelaigrow-app
Guided journey from an app people sign up for and then quietly abandon to a sealed retention engine with a habit loop, an activated first run, and one metric the whole team trusts…
wondelai
Skills
wondelaihigh-perf-browser
Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "my site is slow", "Core Web Vitals", "HTTP/2 or HTTP/3"…
wondelai
Skills
wondelaihooked-ux
Design habit-forming product loops using the Hook Model (Trigger, Action, Variable Reward, Investment). Use when the user mentions "users arent coming back", "habit formation", "engagement…
wondelai
Skills
wondelaiimprove-app
Guided journey from a shipped app that works but feels rough to a product that fits the job, flows without friction, reads clearly, and persuades honestly. Orchestrates nine skills phase by…
wondelai
Skills
wondelaiimprove-retention
Diagnose and fix retention problems using behavior design (B=MAP). Use when the user mentions "users sign up but dont stick around", "activation rate", "onboarding friction", "retention…
wondelai
Skills
wondelaiimprove-website
Guided journey from a live website that underperforms to a prioritized, evidence-backed backlog of conversion, usability, message, and speed fixes - each shipped as a testable experiment…
wondelai
Skills
wondelaiinfluence-psychology
Apply the seven principles of ethical persuasion (reciprocity, commitment, social proof, authority, liking, scarcity, unity) to product design, copy, and sales. Use when the user mentions…
wondelai
Skills
wondelaiios-hig-design
Design native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", "HIG…
wondelai
Skills
wondelaijobs-to-be-done
Discover what customers truly need by analyzing the "job" they hire your product to do. Use when the user mentions "customer discovery", "why customers churn", "what job does this solve"…
wondelai
Skills
wondelailean-startup
Design MVPs, validated learning experiments, and pivot-or-persevere decisions using Build-Measure-Learn. Use when the user mentions "MVP scope", "validated learning", "pivot or persevere"…
wondelai
Skills
wondelailean-ux
Apply lean thinking to UX: hypothesis-driven design, collaborative sketching, and rapid experiments instead of heavy deliverables. Use when the user mentions "Lean UX", "design hypothesis"…
wondelai
Skills
wondelaimade-to-stick
Craft messages that are understood, remembered, and drive action using the SUCCESs checklist (Simple, Unexpected, Concrete, Credible, Emotional, Stories). Use when the user mentions "make…
Google Labs
Stitch Skills
Google Labsstitch-loop
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
Google Labs
Stitch Skills
Google Labsstitch::extract-design-md
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files…
Google Labs
Stitch Skills
Google Labsstitch::extract-static-html
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a…
Google Labs
Stitch Skills
Google Labsstitch::generate-design
Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement…
Google Labs
Stitch Skills
Google Labsstitch::manage-design-system
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Google Labs
Stitch Skills
Google Labstaste-design
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric…
scenario-labsscenario-mai-image
Use when generating or editing images with Microsoft MAI Image models on Scenario via MCP: photoreal or stylized text-to-image with legible in-image typography, posters, packaging, magazine…
Google Labs
Stitch Skills
Google Labsstitch::upload-to-stitch
Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to…
Google Labs
Stitch Skills
Google Labsreact-vite-dashboard
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
Google Labs
Stitch Skills
Google Labsstitch::code-to-design
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the…
Google Labs
Stitch Skills
Google Labssite-md
Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop
plugin87design-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…
plugin87design-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…
plugin87grill-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.
plugin87critique
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.
plugin87scaffold-project
Scaffold a new design-product project that matches the recommended Claude Code layout (the reference structure). Use when starting a fresh product/app that will be built with this design…
plugin87apply-aesthetic
Apply a visual direction, an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 2,144 named design systems (apple, linear-app, stripe, vercel, notion…
plugin87brandkit
Generate a complete, accessible brand design system from a brief, as primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single…
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