Design Systems and Tokens skills for Claude Code and Codex
Skills that define, extract, audit and govern design tokens and component systems, from a DESIGN.md pulled off a live site to token architecture and adoption plans.
Highest-scoring design system skills in the October 22, 2026 snapshot: auteur from agiwhitelist/auteur (89/100), anydesign from avelikiy/great_cto (84/100) and firecrawl-website-design-clone from firecrawl/skills (80/100). Scores come from the Suede Skill Check.
- 20 listed skills
- 11 repositories
- 5 with full pages
7 from official publishers. 6 bundle scripts. 2 connect to an outside service. Listed in Frontend and Design (17), Documents and Office Files (2), Video, Image, Audio and Creative (1).
All 20 design system skills
No matching skills. Try fewer words or clear your search.
| Skill | Repository | What it does |
|---|---|---|
| anydesign 84/100 · B | avelikiy/great_cto | Analyzes images, websites, and Figma files to extract their design and generate a design.md with a token system, component inventory, and reconstruction notes. |
| auteur 89/100 · B | agiwhitelist/auteur | Designs and builds complete web experiences, including landing pages, cinematic scroll-directed sites, and multi-screen products, as one consistent design system with generated assets. |
| design-style-skill 70/100 · C | MiniMax-AI/skills | Selects a consistent visual design system for PPT slides using Sharp, Soft, Rounded, or Pill radius and spacing style recipes. |
| expo-design-system 79/100 · C | expo/skills | Builds and maintains a design system in an Expo app, covering design tokens, components with variant, size, and state props, and shared component extraction. |
| firecrawl-website-design-clone 80/100 · B | firecrawl/skills | Extracts a website's design system into an agent-ready DESIGN.md covering colors, fonts, spacing, components, and layout patterns, using Firecrawl scrape evidence. |
| design 73/100 · C | nextlevelbuilder/ui-ux-pro-max-skill | Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate… |
| design-md 65/100 · D | google-labs-code/stitch-skills | Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files |
| design-system 83/100 · B | nextlevelbuilder/ui-ux-pro-max-skill | Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables… |
| design-system-adoption 59/100 · D | infrasity-labs/dev-gtm-claude-skills | Create adoption strategies and materials to drive design system usage across teams. |
| design-system-governance 64/100 · D | infrasity-labs/dev-gtm-claude-skills | Define how a design system evolves — contribution models, versioning, change management, and deprecation. |
| design-system-importer 72/100 · C | Orkas-AI/Orkas-VideoStudio | Reference-media and design-system input layer for OrkasVideoStudio. Treat reference images, videos, screenshots, brand guides, and design notes… |
| design-token 58/100 · D | infrasity-labs/dev-gtm-claude-skills | Define and organize design tokens (color, spacing, typography, elevation) with naming conventions and usage guidance. |
| design-token-audit 59/100 · D | infrasity-labs/dev-gtm-claude-skills | Audit design token usage across a product for consistency and coverage. |
| documentation-template 58/100 · D | infrasity-labs/dev-gtm-claude-skills | Generate structured documentation templates for components, patterns, or guidelines within a design system. |
| feedback-patterns 59/100 · D | infrasity-labs/dev-gtm-claude-skills | Design system feedback for user actions including confirmations, status updates, and notifications. |
| figma-create-design-system-rules 74/100 · C | openai/skills | Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set… |
| figma-generate-library 79/100 · C | openai/skills | Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component… |
| slides 65/100 · D | nextlevelbuilder/ui-ux-pro-max-skill | Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. |
| Suede AI Design Skills 91/100 · A | JasonColapietro/suede-creator-skills | Use when asked "review this UI diff" or "audit this flow"; to design interface hierarchy, tokens, color, type, accessibility or a design system; run… |
| taste-design 69/100 · D | google-labs-code/stitch-skills | Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict… |
How to choose design system skills
Extraction skills read a website, Figma file or Stitch project and write the system down. Authoring skills define tokens and components from scratch. Governance skills handle versioning and adoption.
Some extraction skills need Firecrawl or Figma access; check the Before you install panel.
Pick one token format and keep every skill writing to it, so code, slides and video share the same values.
Ranked design system shortlists
Related topics
Figma and Design Tools 14Color and Typography 14Icons and Illustrations 8Logos and Brand Identity 5
Find your next useful skill
Explore Rising Skills with quality scores and source reports, or search from inside your agent.
Get Rising Skills by email · Read Rising Skills · Install the finder · State of Agent Skills