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.
bergsidecosmic
Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
bergsidedithered
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
bergsidedoodle
Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.
bergsidedramatic
High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
bergsideeditorial
Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
bergsideenterprise
Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
bergsideexpressive
Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
bergsidefiction
A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks…
bergsideflat
Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
bergsidefriendly
Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.
bergsideglassmorphism
Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
jamditis
Claude Skills Journalism
jamditisweb-ui-best-practices
Signs of taste in web UI. Use when building or reviewing web interfaces, dashboards, SaaS apps, or internal tools.
boraoztunc
Skills
boraoztuncbetter-colors
Color systems for digital products, from building and naming a palette to applying it with meaning and verifying contrast. Use when creating or extending a color palette, naming color…
boraoztunc
Skills
boraoztuncbetter-typography
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale…
boraoztunc
Skills
boraoztuncbetter-ui
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders…
boraoztunc
Skills
boraoztuncbetter-writing
UX writing and interface copy, from voice and button labels to error messages and empty states. Use when writing or reviewing any user-facing text: button and link labels, form errors…
OpenClaudia
Openclaudia Skills
OpenClaudiabrand-dev
Fetch brand info (name, description, logos, industry) from brand.dev API and save logos locally. Use when the user asks to look up a brand, fetch a logo, get brand info, or add a company…
bergsidecreative
Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
boraoztunc
Skills
boraoztuncemil-design-eng
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
bergsidefantasy
Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
bergsidefuturistic
Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.
bergsidegeometric
Geometric, structured design with clean typography, neutral colors, precise shapes, and intuitive layouts that stay out of the way.
boraoztunc
Skills
boraoztuncbetter-layout
Layout structure for web interfaces, from grouping and alignment to reading order, progressive disclosure, and adaptive breakpoints. Use when structuring a page or component, spacing or…
OneWave-AI
Claude Skills
OneWave-AIclaude-design-system-architect
Generate a complete, premium design system from a brand brief or an existing site — color tokens, type scale, spacing/radius/elevation, motion language, and component specs — exported as…
OneWave-AI
Claude Skills
OneWave-AIclaude-landing-composer
Compose a premium, animated landing page section by section in Next.js + Tailwind + Motion (Framer Motion) — built on a real design system, with editorial copy and motion that feels…
boraoztunc
Skills
boraoztunccorner-diagonals
Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner…
kwakseongjaeomd-brand-look
Repaint one screen with the measured tokens of verified real-company references (verified_v2 only), render it at 1440·1024·768·390 in a real browser, and report rule-by-rule PASS/FAIL with…
kwakseongjaeomd-cjk-type-shader
One effect, done well: 먹 번짐 — a large Korean, Japanese or Chinese display headline that reads as sumi ink printed on hanji. The heading stays real, selectable DOM text in ink color from the…
kwakseongjaeomd-restraint
절제미를 측정 가능한 규칙으로 — 덜어내기(subtraction)·여백·위계를 AUDIT(렌더된 페이지를 데스크톱·모바일에서 재서 규칙별 PASS/FAIL+수치)하거나 APPLY(인벤토리 → 필요 없는 것 삭제 → 중복 병합 → 비운 자리를 초점 요소에 준다 → 재측정)한다. 초점 1개(1등 ≥ 2× 2등), 첫 화면 조각 ≤ 5, 서체…
kwakseongjaeomd-shader-hero
One full-bleed launch hero in two inks from the project's DESIGN.md: the base color and exactly one brand color, as a slowly folding (or, with data-shape="ripple", rippling) ordered-dither…
freshtechbro
Claudedesignskills
freshtechbrospline-interactive
Browser-based 3D design tool with visual editor, animation, and web export. Use this skill when creating 3D scenes without code, designing interactive web experiences, prototyping 3D UI…
boraoztunc
Skills
boraoztunceditorial-portfolio-chapters
Create or redesign creative-studio, agency, photographer, artist, and portfolio websites where project work leads the story. Use for dark editorial shells, full-bleed campaign media…
boraoztunc
Skills
boraoztuncframed-grid-layout
Create minimal framed grid layouts with thin visible boundary lines, L-shaped corner brackets, subtle diagonal line texture, and strict section alignment. Use when asked for clean, neutral…
boraoztunc
Skills
boraoztuncfrontend-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…
rshankras
Claude Code Apple Skills
rshankrasvisionos
visionOS skills — spatial design (layout ergonomics, eyes-and-hands input, motion comfort, immersion, environments) and widget patterns (mounting styles, glass/paper textures…
aiskillstore
Marketplace
aiskillstoreweb-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring…
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