Design System skills

T

Token Map

nexu-io

Automate Figma and code token mapping to design systems.

Design System Starter

davila7

Build scalable and accessible design systems efficiently.

C

Create Design System Rules

openai

Generate tailored design system rules for Figma workflows.

S

SLDS 1 to 2 Migration

forcedotcom

Streamline your Lightning Web Components migration process.

Vellum Presentation Deck

nexu-io

Create scholarly HTML presentations with ease.

Pricing Page

nexu-io

Create a structured pricing page effortlessly.

Tailwind Design System

calesthio

Create scalable design systems with Tailwind CSS v4.

Core Components Library

sickn33

Streamline your UI development with design system patterns.

Core Components

sickn33

A design system for consistent UI development.

Enhance Prompt

google-labs-code

Transform vague UI ideas into optimized prompts.

Manage Design System

google-labs-code

Streamline your design consistency across projects.

Mesh Gradient Dark Blue Clean

mengto

Create a premium dark-blue mesh gradient design system.

Generative UI

himself65

Create interactive visual content effortlessly.

Stitch Design Taste

leonxlnx

Generate high-quality DESIGN.md files for Google Stitch.

Q

Quill Code

posthog

Edit and test the PostHog Quill design system locally.

Split Layout Technical

mengto

Design a disciplined split-screen layout system.

The UI Design System is a comprehensive toolkit designed for Senior UI Designers, facilitating the creation and maintena

Design System

anthropics

Audit, document, and extend your design system efficiently.

Professional theme application toolkit for styling any artifact with curated color palettes and typography. Includes 10 pre-designed themes with complete specifications: Ocean Depths (calming maritime blues), Sunset Boulevard (warm vibrant sunset), Forest Canopy (natural earth tones), Modern Minimalist (clean contemporary grayscale), Golden Hour (rich autumnal), Arctic Frost (cool crisp winter), Desert Rose (soft sophisticated dusty tones), Tech Innovation (bold modern tech), Botanical Garden (fresh organic greens), and Midnight Galaxy (dramatic cosmic deep tones). Each theme provides cohesive color palette with hex codes, complementary font pairings for headers and body text, and distinct visual identity. Can also generate custom themes on-the-fly based on user requirements, automatically selecting appropriate colors and fonts. Ensures proper contrast, readability, and maintains consistent visual identity across slides, documents, and other artifacts.

Apply Anthropic's official brand colors and typography to any artifact with precision and consistency. Includes the complete Anthropic color system featuring main colors (dark #141413, light #faf9f5, mid gray, light gray) and signature accent colors (orange #d97757, blue #6a9bcc, green #788c5d). Uses professional font pairing with Poppins for headings and Lora for body text, with automatic fallbacks to Arial and Georgia. Smart application logic automatically selects appropriate colors based on background, applies fonts based on text size, and maintains visual hierarchy. Perfect for creating on-brand presentations, documents, and visual materials that align with Anthropic's design standards.

Design system UI patterns for Supabase Studio. Use when building or updating pages, forms, tables, charts, empty states, navigation, cards, alerts, or side panels (sheets). Covers layout selection, component choice, and placement conventions.

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 modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.

Turn vague taste, screenshots, URLs, product notes, or "make it feel like this" references into a grounded DESIGN.md plus an implementation handoff. Use it before prototypes, decks, redesigns, or image remix work when the user needs a reusable visual direction rather than a one-off prompt.