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.
plugin87scaffold-project
Scaffold a new design-product project that matches the recommended Claude Code layout (the reference structure). Use when starting a fresh product/app that will be built with this design…
Owl-Listener
Designer Skills
Owl-Listeneraccessibility-audit
Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions…
bergsidebasic
Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
bergsidebento
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
bergsidebold
Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
bergsidebrutalism
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
bergsidecafe
Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
bergsideclaude
A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the…
bergsideclaymorphism
Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
bergsideclean
Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
bergsidecodex
A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the…
bergsidecolorful
Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.
Owl-Listener
Designer Skills
Owl-Listenercomponent-spec
Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a…
bergsidecontemporary
Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
bergsidecorporate
Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
bergsidecosmic
Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
bergsidecreative
Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
Owl-Listener
Designer Skills
Owl-Listenerdesign-token
Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit`…
bergsidedithered
Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
Owl-Listener
Designer Skills
Owl-Listenerdocumentation-template
Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use…
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.
bergsidefantasy
Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
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.
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.
bergsideglassmorphism
Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
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-harness
사용자와 단계별로 검토하는 guided design harness. Discovery→Wireframe→Components→Microcopy→Validation을 omd-master가 실행하고 journey/system/validation의 필수 체크포인트에서 멈춘다. '/omd-harness', '체크포인트마다 검토', '나와 단계별로…
kwakseongjaeomd-humanize
제품 문서·UX 카피·랜딩 카피를 KO/EN/JA/ZH-CN/ZH-TW 각 언어의 자연스러운 문장으로 다듬되 사실·수치·명령어·링크·브랜드 voice를 보존한다. 영어·일본어·중국어 문장이나 여러 locale을 함께 다듬는 'AI 티 없애줘', '번역투 고쳐줘', '문장이 기계적이야', '현지 사용자처럼 다듬어줘', 'humanize…
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