Best Claude skills for Design systems
Design system skills hand your agent a complete visual language instead of loose taste rules: color tokens for light and dark, a type scale, spacing, radii, components and the rules for when to use each. Pick one when you want every page and every dashboard your agent builds to look like the same product.
89 design systems skills · ranked nightly · November 2026
The top 10 Claude skills for design systems. Ranked by Alyn.
- 1#1
OpenAI
Skills
OpenAI
Figma Create Design System Rules
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design…
Pack29k226kScore 77 - 2#2
OpenAI
Skills
Figma Generate Design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code'…
Pack29k226kScore 77 - 3#3
OpenAI
Skills
Figma Generate Library
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark…
Pack29k226kScore 77 - 4#4
Expo
Skills
Expo
Expo Design System
Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with…
Pack4.1k1.1MScore 74 - 5#5
Google Labs
Stitch Skills
Google Labs
Stitch::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…
Pack8.7k471kScore 72 - 6#6
rampstackco
Brand Style Guide
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts. Use this…
Pack1.1k31kScore 69 - 7#7
plugin87
Apply 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…
Pack3.2k11kScore 68 - 8#8
Design Tokens
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale…
Pack3.2k11kScore 68 - 9#9
Governance
Govern how the design system evolves (SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication). Use when the user wants to a…
Pack3.2k11kScore 68 - 10#10
dominikmartn
Nothing Design
This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger…
2.9k639Score 68
What makes a great design systems skill.
Tokens your agent can read (a DESIGN.md front matter or a tokens.json), not only prose.
Rules for both marketing pages and product UI, with exact sizes.
A preview or demo you can check the output against.
All 89 design systems skills.
OpenAI
Skills
OpenAIfigma-create-design-system-rules
Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design…
OpenAI
Skills
OpenAIfigma-generate-design
Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code'…
OpenAI
Skills
OpenAIfigma-generate-library
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark…
Expo
Skills
Expoexpo-design-system
Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with…
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…
rampstackcobrand-style-guide
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts. Use this…
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…
plugin87design-tokens
Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale…
plugin87governance
Govern how the design system evolves (SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication). Use when the user wants to a…
dominikmartnnothing-design
This skill should be used when the user explicitly says "Nothing style", "Nothing design", "/nothing-design", or directly asks to use/apply the Nothing design system. NEVER trigger…
Google Labs
Stitch Skills
Google Labsdesign-md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
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.
hashicorp
Agent Skills
hashicorpterraform-style-guide
Generate Terraform HCL code following HashiCorp's official style conventions and best practices. Use when writing, reviewing, or generating Terraform configurations.
jamditis
Claude Skills Journalism
jamditisnewsroom-style
Enforces AP Style and newsroom conventions. Use when writing news, editing drafts, creating headlines, or tightening copy.
jamditis
Claude Skills Journalism
jamditispdf-design
Designs PDF reports and proposals from HTML with previews and branding. Use to create, export, or securely upload a PDF.
Owl-Listener
Designer Skills
Owl-Listenerdesign-system-governance
Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption`…
Owl-Listener
Designer Skills
Owl-Listenerlocalization-design
Design for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves…
Owl-Listener
Designer Skills
Owl-Listenerversion-control-strategy
Define version control for design files, components, and libraries — branching, naming, and release. Use when file history is chaotic. For design system contribution rules, use…
arnabbagxd
Brand Building Skills
arnabbagxdbrand-identity
Create a visual identity brief for a brand — logo direction, color palette, typography, imagery style, and design system foundations. Use when the user says "visual identity", "brand…
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…
TheQtCompanyRnD
Agent Skills
TheQtCompanyRnDqt-figma-component-generation
Extract component metadata from a Figma design system and generate production-ready QML controls. Use this skill whenever someone wants to turn Figma components into QML files — whether…
TheQtCompanyRnD
Agent Skills
TheQtCompanyRnDqt-figma-token-extraction
Extract design tokens, text styles, and variables from a Figma design system and produce a design-tokens.json plus ready-to-use QML singletons. Use this skill whenever someone wants to pull…
Tammoui-design-minimal
Minimalistic website design system
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…
Prisma-Labs-Dev
Apple Skills
Prisma-Labs-Devios-design-consultant
UX and visual design consultant for iOS apps using Apple's Liquid Glass design system (iOS 26+). Use when asking about element positioning, layout decisions, visual hierarchy, or whether a…
bergsideagentic
Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
bergsideant
Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
bergsideartistic
High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
jezweb
Claude Skills
jezwebdesign-system
Extract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser…
kwakseongjaeclaude-design
현재 코드베이스(또는 폴더)를 분석해 "디자인 컨텍스트 브리프"(스택/디자인 토큰/컴포넌트/ 라우트/실제 UI 카피/큐레이션된 에셋/레포 링크)를 합성하고, 그걸 Claude Design (claude.ai/design)에 자동으로 전달해 디자인을 생성한 뒤 결과 링크를 터미널에 클릭 가능한 형태로 돌려주는 스킬. 터미널 한 번의 호출로…
kwakseongjaeomd-3d-hero
A rendered 3D hero from the project's DESIGN.md: a soft-lit studio (cyclorama, contact shadows, ambient occlusion) with a floating pile of brand-colored objects shaped by the radius tokens…
Prisma-Labs-Dev
Apple Skills
Prisma-Labs-Devios-ui-craft
Production-grade SwiftUI with Apple Design Award-quality aesthetics. Use when building visually striking iOS interfaces — screens, components, redesigns. Screenshot-driven visual iteration…
Prisma-Labs-Dev
Apple Skills
Prisma-Labs-Devios-liquid-glass
API reference: Liquid Glass (iOS 26+). Query for glass effects, navigation patterns, GlassEffect modifiers, design principles.
aj-geddes
Claude Code Bmad Skills
aj-geddesbmad-ux
Solutioning-phase UX planning skill (optional; activate when the project has a UI). Produces TWO planning documents: DESIGN.md (the visual system — design tokens, color palette, typography…
plugin87image-to-code
Turn a reference image, screenshot, or mockup into token-driven, accessible code. Infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it…
plugin87migrate-design-system
Map this token system to or from any external design system (Material Design 3, Apple HIG, Fluent, Carbon, Ant, shadcn/ui, Radix, Chakra, Mantine, Bootstrap…). Adopt their look, build on…
Design systems skills, explained.
Also searched as: design system skill, DESIGN.md skill, claude design system, design tokens skill, liquid glass design system.
What are the best Claude skills for design systems?
Right now the top-ranked design systems skills on Alyn are Figma Create Design System Rules (OpenAI), Figma Generate Design (OpenAI), Figma Generate Library (OpenAI). Rankings combine popularity, quality checks, momentum and freshness, and update every night.
What is a design system skill?
A skill that ships a full design system: tokens, components and usage rules your agent follows on every screen. UI Design Minimal by Tammo Elsner is one, built for Apple-like landing pages and dashboards.
Design system skill or design skill?
Design skills give your agent taste and critique. A design system skill gives it one exact look. Many builders use both: the system for consistency, a taste skill for review.
How do I install a design systems 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 systems skills for your agent