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.
tech-leads-clubfrontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications…
tech-leads-clubmodular-design-principles
Technology-agnostic guidance for modular systems: bounded contexts, clear boundaries, composability, state isolation, explicit contracts, failure containment, scaffolding workflows…
heydamirunslop
Turns vibecoded, AI-looking UI into a designed interface with its own character. Finds a direction from the product itself, then fixes spacing, color, icons, copy, type, layout, details…
daymadefrontend-visual-qa
Audits rendered UI and specific task/object-link handoffs; excludes ordinary source citations alone. Audits already-rendered UI and Markdown/Obsidian image layout — web app, deck/slide…
himself65
Finance Skills
himself65generative-ui
Design system and templates for interactive HTML/SVG visuals in Claude and Codex, using an available inline renderer or a standalone HTML file. Use this skill whenever the user wants visual…
zubair-trabzadageo
GEO-first SEO analysis tool. Optimizes websites for AI-powered search engines (ChatGPT, Claude, Perplexity, Gemini, Google AI Overviews) while maintaining traditional SEO foundations…
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…
aaron-he-zhu
Aaron Marketing Skills
aaron-he-zhuplacement-exclusion-manager
Use when the user asks to "build my brand-safety exclusion lists", "set placement / topic / content exclusions before launch", "add network and audience exclusions", or "prep the A1…
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…
benjitaylorstageshow
Build faux product UI that looks like a real product, as a still illustration or an animated demo with a cursor. Browser and app windows, dashboards, phones, notifications, terminals, bento…
browserbase
Skills
browserbaseui-test
AI-powered adversarial UI testing via the browse CLI. Analyzes git diffs to test only what changed, or explores the full app to find bugs. Tests functional correctness, accessibility…
jeremylongshoreabridge-reference-architecture
Define an Abridge reference architecture that separates vendor, EHR, identity, device, customer, and clinical authority boundaries. Use when reviewing an enterprise Abridge design. Trigger…
kaankiziltuglogo-design
Professional logo and brand-mark design, from brief to production files. Guides discovery and the design brief, concept generation, choosing a mark type (wordmark, monogram, letterform…
appeekypaywall-optimization
When the user wants to design, test, or optimize their app's paywall — layout, copy, pricing display, trial offers, plan structure, hard vs soft paywall, paywall placement, or paywall A/B…
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…
borghei
Claude Skills
borgheicapacity-planner
Headcount and delivery-capacity planning — effective capacity from raw headcount, hire/contract/defer scenarios, and capacity-vs-commitment gap reports. Use when planning a quarter, sizing…
borghei
Claude Skills
borgheiceo-advisor
Executive leadership guidance for strategic decisions, org development, and stakeholder management. Use when planning strategy, preparing board presentations, managing investors, or making…
borghei
Claude Skills
borgheichannel-economics
Channel economics: design and analyze the financial structure of go-to-market channels. Use when picking a channel mix, modeling partner margin or TCO, designing partner tiers and rebates…
OpenSenseNovasn-infographic
Generates professional infographics with various layout types and visual styles. Analyzes content, recommends layout and style, and generates publication-ready infographics. Use when user…
majidmanzarpour
Threejs Game Skills
majidmanzarpourthreejs-audio-generator
Generate, convert, clean, and integrate audio for Three.js browser games with ElevenLabs: sound effects, looping ambience, music tracks and loops (menu, gameplay, boss, victory/defeat…
majidmanzarpour
Threejs Game Skills
majidmanzarpourthreejs-game-director
Entrypoint for building, upgrading, and finishing Three.js browser games. Routes work across the sibling threejs-* skills for gameplay, graphics, UI, 3D/image/audio asset generation…
BuilderIOturn-into-app
Turns a thread, skill, spreadsheet, or Claude/ChatGPT project into a polished, visual Agent-Native app: populated domain screens with the in-app agent working behind contextual controls…
BuilderIOvisual-plan
Turn ordinary text plans into rich interactive visual plans with diagrams, file maps, annotated code, open questions, and UI/prototype review when useful.
BuilderIOvisual-recap
Turn a PR, branch, commit, or git diff into an interactive visual recap with diagrams, file maps, API/schema summaries, annotated diffs, and focused review notes.
jezweb
Claude Skills
jezwebai-image-generator
Generate AI images using Gemini or GPT APIs directly. Covers model selection (Gemini for scenes; GPT Image 2 for text rendering, batch variations, multi-reference compositing; GPT Image 1.5…
rorkai
App Store Connect CLI Skills
rorkaiasc-app-create-ui
Create a new App Store Connect app record via browser automation. Use when there is no public API for app creation and you need an agent to drive the New App form.
jezweb
Claude Skills
jezwebcolor-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks…
anbeimegpt-image-2-prompt-engine
面向电商设计师、海报美工、品牌视觉、UI设计师、信息图编辑、商业摄影师、内容创作者等需要高质量可控出图的角色，在需要用 GPT-Image-2 生成电商主图、电影海报、信息图、品牌视觉、UI截图、古籍国风、角色IP等场景时，通过「Prompt as Code」原子化Schema+20+工业JSON模板+四步工作流，产出结构化、可复用、可批量的生图提示词，再调用…
jezweb
Claude Skills
jezwebicon-set-generator
Generate cohesive, project-specific SVG icon sets for websites and applications. Use this skill whenever the user needs custom icons, an icon set for a website or app, icons for a client…
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…
majidmanzarpour
Threejs Game Skills
majidmanzarpourthreejs-gameplay-systems
Build and iterate playable Three.js game systems: starter scaffold, architecture, design briefs, core loops, level and encounter design, entities, input, camera, collision and physics…
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…
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