designwith claude Library · free · open source
45 Claude Code design skills, curated. Free markdown-based slash commands for Claude Code — accessibility, design systems, motion, typography, copy, and more. Install one at a time; no runtime, no dependencies.dwic — the subscription auditor that flags WCAG failures, mandated-accent drift, and structural gaps across sessions? That lives here →
45 design skills8 categoriesfree open source
How to install a skill Step 1
Copy the install command
Click any skill card below to expand and copy
Step 2
Run in your project
Paste into your terminal inside any Claude Code project
Step 3
Use in Claude Code
Skill appears in .claude/commands/ and Claude picks it up automatically
New to Claude Code? A free guide to using Claude Code for design work, from setup to shipping.
Start learning ↗ All Core Design Visual Design Interaction Product Content & IA Industry Specialized Technical Setup
45 skills design-brief
Master command — takes a brief, identifies relevant design domains, routes to the right specialists
Core Design
visual-hierarchy-specialist
Visual hierarchy, layout, spacing, focal points, content grouping
Core Design
interaction-designer
User flows, states, gestures, feedback, keyboard patterns
Core Design
design-system-architect
Tokens, component APIs, variants, theming, governance
Core Design
accessibility-specialist
WCAG compliance, ARIA, keyboard nav, screen readers
Core Design
typography-specialist
Type scales, font pairing, line height, vertical rhythm, responsive typography
Visual Design
color-specialist
Color palettes, contrast, dark mode mapping, semantic colors, accessibility
Visual Design
spacing-layout-specialist
Grid systems, spacing scales, density modes, padding/margin conventions
Visual Design
motion-designer
Transitions, easing, timing, micro-interactions, reduced motion, animation performance
Interaction
form-designer
Form layout, validation timing, input types, multi-step forms, accessibility
Interaction
navigation-specialist
Sidebar, top bar, bottom tabs, breadcrumbs, mega menus, command palettes
Interaction
dashboard-designer
KPI cards, data density, drill-down, filters, real-time updates, dashboard layout
Product
mobile-specialist
Touch targets, thumb zones, bottom nav, gestures, offline states, safe areas
Product
responsive-design-specialist
Breakpoints, fluid typography, container queries, responsive images, mobile-first CSS
Product
landing-page-specialist
Hero sections, CTAs, value propositions, social proof, pricing tables, conversion
Product
content-strategist
Microcopy, error messages, empty states, tone of voice, content hierarchy
Content & IA
information-architect
Navigation structure, taxonomy, labeling, content organization, wayfinding
Content & IA
conversational-ui-designer
Chat interfaces, bot personality, message design, rich messages, voice UI
Content & IA
healthcare-ux-specialist
Clinical workflows, HIPAA UI considerations, patient data display, medical terminology
Industry
b2b-saas-specialist
Enterprise patterns, RBAC UI, multi-tenant, complex onboarding, admin dashboards
Industry
ecommerce-specialist
Product pages, filtering, image galleries, reviews, product comparison
Industry
checkout-specialist
Cart UX, payment forms, guest checkout, trust signals, order confirmation
Industry
dark-mode-specialist
Dark surfaces, color remapping, elevation hierarchy, FOUC prevention, mode switching
Specialized
error-handling-specialist
Error messages, validation, recovery flows, HTTP error pages, retry patterns
Specialized
onboarding-specialist
First-run experience, tooltip tours, empty states, checklists, feature discovery
Specialized
performance-specialist
Skeleton screens, optimistic updates, loading states, lazy loading, perceived speed
Specialized
data-visualization-specialist
Chart selection, axis design, color encoding, tooltips, responsive charts, accessibility
Specialized
table-designer
Data tables, sorting, pagination, row selection, inline editing, responsive tables
Specialized
search-specialist
Search UX, autocomplete, faceted filtering, search results, zero-results states
Specialized
brand-designer
Visual identity, logo usage, brand colors, typography as brand expression
Specialized
notification-designer
Push notifications, in-app alerts, badges, toasts, notification center, priority levels
Interaction
empty-loading-states-specialist
Skeleton screens, empty states, first-use experience, loading patterns, progressive content
Specialized
settings-designer
Settings pages, preference architecture, toggle patterns, defaults strategy, account management
Product
icon-illustration-specialist
Icon grids, sizing systems, icon meaning, illustration style, SVG accessibility
Visual Design
i18n-designer
RTL layouts, string expansion, locale-aware UI, date/number formats, cultural adaptation
Specialized
auth-security-ux-specialist
Login flows, password UX, 2FA/passkey, session management, permission prompts, trust signals
Product
drag-drop-specialist
Drag affordances, drop zones, reordering, canvas interactions, multi-select, direct manipulation
Interaction
print-export-designer
PDF generation, print stylesheets, export formatting, receipt design, download UX
Specialized
setup-guide
Install Node, Claude Code, and create your first project — terminal walkthrough for designers
Technical Setup
code-explainer
Paste any file or error — get a plain language explanation with no developer jargon
Technical Setup
database-setup
Set up Supabase for your project — tables, queries, and connecting to your frontend
Technical Setup
environment-setup
What .env files are, how to set them up, and what never to commit to GitHub
Technical Setup
auth-implementation
Implement working login and signup using Clerk or Supabase Auth — actual code, not just design guidance
Technical Setup
deploy-to-vercel
Deploy your project to Vercel, fix build errors, and set up a custom domain
Technical Setup
debug-helper
Paste any error message — get a plain language explanation and exact fix
Technical Setup
Stay in the loop Get notified when we add new design skills. You'll also receive a daily AI UX newsletter from aiuxdesign.guide . Patterns, news, and product teardowns.
gist.design: Make your product readable to AI AI tools can only read your product's content layer. gist.design creates the file that tells them what they're missing.
gist.design ↗