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.
nexscope-aiamazon-brand-tailored-promotions
Brand Tailored Promotions — audience targeting, discount tiers, customer segmentation, repeat purchase incentives
nexscope-aiamazon-enhanced-brand-content
Premium A+ and Brand Story — module design, lifestyle imagery, comparison charts, mobile optimization
OneWave-AI
Claude Skills
OneWave-AIathlete-social-media-manager
Create brand-safe content for athletes. Personal branding strategy, engagement optimization, crisis communication, sponsor integration.
OneWave-AI
Claude Skills
OneWave-AIbrand-consistency-checker
Scan documents and slides for off-brand colors, fonts, and logos. Validate against brand guidelines and suggest corrections.
boraoztunc
Skills
boraoztunccontainer-lines
Add vertical container-size guide lines with mini corner squares for precise, structured web layouts. Use when asked for container lines, measured layout guides, vertical boundary lines…
boraoztunc
Skills
boraoztuncdocumentary-brutalist-agency
Create or redesign creative agency, production studio, architecture, culture, and portfolio websites with billboard typography, hard black-and-white chapters, exposed grids, documentary…
boraoztunc
Skills
boraoztuncglass-dark-ui
Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero…
kwakseongjaeomd-apply
프로젝트 DESIGN.md를 UI/시각 작업의 brand context로 적용. 컴포넌트·색상·폰트·레이아웃 수정 같은 구체적 요청과 톤·분위기 표현 — KR '좀 더 따뜻하게', EN 'make it warmer/cooler', 日本語「もう少し暖かく」, 繁體中文「更溫暖一點」 — 모두에 트리거. DESIGN.md 부재 시 omd:init…
kwakseongjaeomd-autopilot
One-prompt autonomous product design and implementation. Use automatically for broad greenfield UI requests such as 'from scratch', '새 제품/화면을 알아서 만들어줘', or requests that delegate DESIGN.md…
kwakseongjaeomd-harness
사용자와 단계별로 검토하는 guided design harness. Discovery→Wireframe→Components→Microcopy→Validation을 omd-master가 실행하고 journey/system/validation의 필수 체크포인트에서 멈춘다. '/omd-harness', '체크포인트마다 검토', '나와 단계별로…
kwakseongjaeomd-init
프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의…
kwakseongjaeomd-reference-capture
선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference// 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드…
boraoztunc
Skills
boraoztuncbeautiful-shadows
Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation. Use when compact cards, controls, panels, popovers, hero media, feature callouts, or modal-like…
aiskillstore
Marketplace
aiskillstorebrand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual…
kwakseongjaeomd-aphrodite
Maximum-craft one-page landing — the wow bar. omd:landing 의 구조 위에 마감(서체 조달·그레인·깊이·색보정·스크롤 타임라인)과 최고급 에셋을 얹고, 랜딩 검사 전 항목 통과를 합격선으로 삼는다. Trigger: '와우', '압도적인', '최고급', '쇼케이스용', 'aphrodite'…
kwakseongjaeomd-asset-fetch
사용자 product UI 생성 시 placeholder 자리를 generic SVG가 아닌 **실제 free-license CDN 자산**으로 채운다. 로고·일러스트·아이콘·사진·폰트·패턴 카탈로그를 verified URL만으로 운영. '에셋 가져와줘', '플레이스홀더 진짜 이미지로', '로고 자리 채워줘', 'unsplash에서 사진…
kwakseongjaeomd-codex-image
이미지 placeholder를 동적으로 materialize. Codex 채널에서는 내장 image-generation primitive 호출, Claude Code 채널에서는 omd-asset-curator로 fall back, OpenCode에서는 spec dump. HTML/MD의 `` 블록을 단일 source of truth로…
kwakseongjaeomd-designer-review
시각 + 브랜드 일관성 리뷰. HTML/MD/JSX artifact를 받아 brand DESIGN.md 대비 typo hierarchy, 색 budget, radius scale, 컴포넌트 state, 모바일 반응형 검수. severity BLOCK/WARN/FYI + line ref 출력. 'UI 리뷰', '디자인 검토'…
kwakseongjaeomd-experiment-gallery
N개 brand experiment를 한 화면에서 비교하는 gallery index.html을 생성. 각 카드는 brand name, wow rating, multi-turn refinement deltas, iframe scaled preview, standalone link 포함. '결과물 한 번에 보여줘', '갤러리 만들어'…
kwakseongjaeomd-feel
디자인·프론트 업계가 '감'으로 쓰던 인터페이스 디테일을 수치화한 규칙으로 적용(APPLY)하거나 감사(AUDIT)한다. Jakub Krehel의 make-interfaces-feel-better 철학을 계승 + HIG/Material/WCAG/DS 토큰/실무자 리서치로 확장한 17축·113규칙(provenance 등급별). 모션…
kwakseongjaeomd-final-qa
출간 ready 직전 read-only critic. 8-item rubric 강제. 'looks good' rubber-stamp 금지. 라인 ref 필수. 2-round revision hard cap. '최종 QA', '출간 검수', 'rubric으로 평가' 류 트리거.
kwakseongjaeomd-humanize
제품 문서·UX 카피·랜딩 카피를 KO/EN/JA/ZH-CN/ZH-TW 각 언어의 자연스러운 문장으로 다듬되 사실·수치·명령어·링크·브랜드 voice를 보존한다. 영어·일본어·중국어 문장이나 여러 locale을 함께 다듬는 'AI 티 없애줘', '번역투 고쳐줘', '문장이 기계적이야', '현지 사용자처럼 다듬어줘', 'humanize…
kwakseongjaeomd-kr-writer
oh-my-design 블로그 글을 12개 voice preset으로 작성하거나 다듬는다. 한국어 표기·띄어쓰기·번역투·높임과 상황별 문체는 hangul 스킬을 따르고, 보고서·피치덱·공지·이메일·보도자료 같은 문서 자체는 hangul이 맡는다 — toss-tech-design (default), karrot-neighborly…
kwakseongjaeomd-lab-02-design-harness
OmD Lab #02 — 디자인 하네스 정교화 실험. 동일 task를 v1, v2, v3... 버전별 하네스 설정으로 돌려서 산출물 품질·토큰 비용·iteration 수·persona ABANDON 율을 비교. 트리거 — '/omd-lab-02', '하네스 lab 시작', '디자인 하네스 v2 돌려서 비교', 'lab #02 자동 비교'.
kwakseongjaeomd-landing
Scroll-native one-page landing that overwhelms — concept, composition, asset placement, and scroll choreography derived from DESIGN.md and the measured landing-craft codex. Trigger: '랜딩…
kwakseongjaeomd-learn
.omd/preferences.md의 status:pending 항목을 Core v2 System Graph에 합쳐 DESIGN.md를 재생성하고 status를 applied로 플립. '프리퍼런스 정리해줘', 'fold preferences', 'apply all corrections', 「好みをDESIGN.mdに反映」, 「套用偏好」류의…
kwakseongjaeomd-orchestrator
멀티 에이전트 디자인 워크플로우 supervisor. writer, locale adaptation, humanize, UI slop audit, designer review, final QA, image materialization을 routing한다. 2-round revision cap을 유지하며 다국어 문서·UI 개선·출간…
kwakseongjaeomd-issue
oh-my-design 사용 중 불만·결함·아쉬운 점을 구조화된 GitHub 이슈로 접수하고, 쌓인 이슈를 배치로 처리한다. 사용자 모드('이슈 등록해줘', '이거 불편한데 신고할래', '버그 리포트', 'file an issue', '기능 요청')와 내부 도그푸딩 모드(스킬을 돌리다 미흡한 부분을 발견한 오케스트레이터·서브에이전트가…
kwakseongjaeomd-media
Brand-consistent asset sets from DESIGN.md — hero, section illustrations, icon sets, OG image — generated through whichever channel the user actually has (grok build image_gen, Codex…
kwakseongjaeomd-remember
사용자의 디자인 선호·교정을 .omd/preferences.md에 기록. '이거 기억해줘', '앞으로는 이렇게', 'remember this', 'going forward never X', 「覚えておいて」, 「記住這個」류의 발화 또는 omd:apply가 교정을 감지했을 때 트리거. 기록된 내용은 omd:learn으로 DESIGN.md에…
Cold-IQ
ColdIQ S GTM Skills
Cold-IQdesign-packages
Use when choosing an art direction, visual style, or complete design system for a new page, landing, or site — or when the user asks to browse, compare, or apply one of the 44 local design…
kwakseongjaeomd-locale-adapter
한국어 canonical 문서·UX copy를 EN/JA/ZH-CN/ZH-TW로 번역이 아니라 locale adaptation한다. thesis·사실·명령어는 보존하되 문장 순서, 주어, register, 제품 용어와 호흡은 각 언어에서 다시 쓴다. '다국어 적용', '영문/일문/간체/대만어 버전', 'locale 문서 만들어줘' 요청에…
kwakseongjaeomd-setup
Guided setup of the tools the design harness can use — image/video generation channels, browser, encoders. Detects what the user already has, explains pros/cons/costs, asks instead of…
mhattingpetetimeline-creator
Create HTML timelines and project roadmaps with Gantt charts, milestones, phase groupings, and progress indicators. Use when users request timelines, roadmaps, Gantt charts, project…
lingxling
Awesome Skills Cn
lingxlingacademy-guide
Stop and check this skill before finishing any reply to a question about how to use Claude or a Claude product — it recommends matching courses, tutorials, and use cases from Claude Academy…
lingxling
Awesome Skills Cn
lingxlingcanvas-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…
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