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.
kwakseongjaeomd-init
프로젝트 루트에 DESIGN.md를 부트스트랩 — 실제 기업 레퍼런스 중 컨텍스트 매칭으로 추천하고 선택된 레퍼런스의 톤&매너를 보존한 variation을 생성. DESIGN.md 부재 상태에서의 UI 작업 또는 '디자인 시스템 세팅', 'set up our design system', 「デザインシステムを作って」, 「建立設計系統」류의…
kwakseongjaeomd-lab-02-design-harness
OmD Lab #02 — 디자인 하네스 정교화 실험. 동일 task를 v1, v2, v3... 버전별 하네스 설정으로 돌려서 산출물 품질·토큰 비용·iteration 수·persona ABANDON 율을 비교. 트리거 — '/omd-lab-02', '하네스 lab 시작', '디자인 하네스 v2 돌려서 비교', 'lab #02 자동 비교'.
kwakseongjaeomd-orchestrator
멀티 에이전트 디자인 워크플로우 supervisor. writer, locale adaptation, humanize, UI slop audit, designer review, final QA, image materialization을 routing한다. 2-round revision cap을 유지하며 다국어 문서·UI 개선·출간…
kwakseongjaeomd-reference-capture
선택된 reference brand의 라이브 사이트에서 디자인 컨텍스트(토큰·구조·visual reference)를 캡쳐. brand homepage 패칭, 컴퓨티드 스타일 inspect, 로고/스크린샷을 assets/_reference// 로 가져와 attribution.md + LICENSE-NOTE.md와 함께 저장. '뱅크샐러드…
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…
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-designer-review
시각 + 브랜드 일관성 리뷰. HTML/MD/JSX artifact를 받아 brand DESIGN.md 대비 typo hierarchy, 색 budget, radius scale, 컴포넌트 state, 모바일 반응형 검수. severity BLOCK/WARN/FYI + line ref 출력. 'UI 리뷰', '디자인 검토'…
kwakseongjaeomd-final-qa
출간 ready 직전 read-only critic. 8-item rubric 강제. 'looks good' rubber-stamp 금지. 라인 ref 필수. 2-round revision hard cap. '최종 QA', '출간 검수', 'rubric으로 평가' 류 트리거.
kwakseongjaeomd-issue
oh-my-design 사용 중 불만·결함·아쉬운 점을 구조화된 GitHub 이슈로 접수하고, 쌓인 이슈를 배치로 처리한다. 사용자 모드('이슈 등록해줘', '이거 불편한데 신고할래', '버그 리포트', 'file an issue', '기능 요청')와 내부 도그푸딩 모드(스킬을 돌리다 미흡한 부분을 발견한 오케스트레이터·서브에이전트가…
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-locale-adapter
한국어 canonical 문서·UX copy를 EN/JA/ZH-CN/ZH-TW로 번역이 아니라 locale adaptation한다. thesis·사실·명령어는 보존하되 문장 순서, 주어, register, 제품 용어와 호흡은 각 언어에서 다시 쓴다. '다국어 적용', '영문/일문/간체/대만어 버전', 'locale 문서 만들어줘' 요청에…
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에…
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…
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