Design System Skills for Claude Code, Codex & AI Agents

Extract Design System from Frontend Code

Google Stitch

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, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

• design systems
• documentation

Algorithmic Colour Palette

Dembrandt

Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.

• color systems
• design systems

Create DESIGN.md

Julien Thibeaut

Create an evidence-based DESIGN.md from a product repository or a rendered public website.

• design systems
• documentation

Modular Scale Typography

Dembrandt

Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.

• typography
• design systems

UI Skills by Julien Thibeaut

Julien Thibeaut

UI engineering workflows for recording and applying evidence-based design guidance.

• design systems

UI UX Kit

Muhammad Arham Athar

Route UI work by product surface, define a visual concept, implement reusable tokens and states, and document the result in DESIGN_SYSTEM.md.

• ui-design
• ux-design
• design-systems

Extract Design System

Arvind Ram Singh Kishore

Extract a public website’s colors, typography and other design primitives into starter JSON and CSS tokens.

• design systems
• design tokens

Expo Design Systems

Expo

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 variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.

• expo
• design systems

Tailwind Theme Builder

Jezweb

Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

• tailwind
• design systems

Vercel Composition Patterns

vercel-labs

React composition patterns that scale.

• react
• components