design-system-patternsby Seth Hobson

Design System Patterns Skill.

A Claude Code and Codex skill for brand and design-system work: scalable design systems: tokens, theming infrastructure, component architecture.

Brand & Design Systems
Design system

Download OpenDesign View usage guide

wshobson/agents · plugins/ui-design/skills/design-system-patterns/SKILL.mdSKILL.md

--- name: design-system-patterns description: Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations. --- ## When to Use This Skill ## Core Capabilities ## Quick Start ## Detailed patterns and worked examples ## Best Practices

Front matter and section headings read from the upstream file on 2026-09-14 · 4,003 characters in full

01 What it does

What the design-system-patterns Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill builds scalable design systems with design tokens, theming infrastructure, and component architecture patterns. It creates three-tier token hierarchies—primitive tokens for raw values, semantic tokens for contextual meaning, and component tokens for specific usage—then implements theme switching with CSS custom properties and React context providers.

The skill handles multi-platform token generation for CSS, iOS, and Android, establishes Figma-to-code workflows with Style Dictionary, and architects component libraries using compound components, polymorphic components, variants, slots, and headless UI patterns. It detects system preferences like prefers-color-scheme and reduced motion modes.

What it produces

Multi-platform token files generated for CSS, iOS, and Android
Component libraries with variant and size systems
Design system documentation and guidelines

See the example prompt ↗

How It Works

01
Define Primitive Tokens
Create raw value tokens for colors, sizes, and fonts that serve as the foundation layer. These are literal values like hex codes and pixel measurements.
02
Build Semantic Token Layer
Reference primitive tokens to create contextual tokens like text-primary, surface-elevated, and border-default that carry meaning rather than visual description.
03
Create component-specific Tokens
Define tokens for specific component usage such as button-bg and card-border that reference semantic tokens.

02 Find your fit

When to Use the design-system-patterns Skill

Use the design-system-patterns skill in Claude Code or Codex when the job is brand and design-system work of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Creating design tokens for colors, typography, spacing, and shadows
Implementing light/dark theme switching with CSS custom properties
Building multi-brand theming systems
Architecting component libraries with consistent APIs
Establishing design-to-code workflows with Figma tokens

Know the Boundaries

This is architecture guidance and example code, not a prebuilt token pipeline. Platform generation, Figma synchronization and theme behavior must be implemented and checked in your project.

What to Provide

Tokens, Components and Target PlatformsShare the existing theme or token files and identify the components, brands and platforms to support. State whether you need token structure, theme switching or a design-to-code pipeline.

03 Inside the skill

Rules the design-system-patterns Skill Gives Claude Code and Codex

The source treats token changes as versioned contracts between the design system and its consumers.

Version Tokens with Semver
Treat token changes as API changes and use semantic versioning. Token modifications impact consuming applications the same way API changes do.

04 Put it to work

Install design-system-patterns in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add design-system-patterns to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

npx skills add https://github.com/wshobson/agents --skill design-system-patterns

Generic skills CLI form for plugins/ui-design/skills/design-system-patterns/SKILL.md; the repository may document its own path.

Give the Skill a First Brand and design-system Work Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Build a design token system for [our SaaS dashboard] with light and dark themes. Create the three-tier token hierarchy (primitive, semantic, component) for colors, typography, and spacing. Implement CSS custom properties and a React theme context provider with system preference detection and persistent storage. Generate tokens for both web and React Native using Style Dictionary, and set up the compound component pattern for our Button and Card components with size and variant props.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

Before accepting the output, look for these in the transcript and the files:

Check that component tokens reference semantic roles rather than repeating raw values.
Test each supported theme against the components that consume it.
Check for circular references and missing platform exports.
Document token changes and migration alternatives before removing an existing token.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: Seth Hobson
Repository: github.com/wshobson/agents Branch main
Skill file: plugins/ui-design/skills/design-system-patterns/SKILL.md Content checksum recorded at verification; commit 4236bb9
License: MIT From LICENSE.
Repository stars: 39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for design-system-patterns.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

When to Use This SkillLists scenarios for design tokens, theming, multi-brand systems, component libraries, and Figma workflows
Core CapabilitiesDetails design tokens, theming infrastructure, component architecture, and token pipeline capabilities
Design TokensDefines primitive, semantic, and component token layers with naming conventions and multi-platform generation
Theming InfrastructureCovers CSS custom properties, React context, dynamic switching, system preferences, and accessibility modes
Component ArchitectureDescribes compound components, polymorphic patterns, variants, slots, headless UI, and style props
Token PipelineExplains Figma synchronization, Style Dictionary configuration, transformations, and CI/CD integration
Quick StartProvides TypeScript example of primitive and semantic token structure with CSS custom properties
Best PracticesLists seven rules: semantic naming, hierarchy, documentation, versioning, testing, automation, migration
Common IssuesWarns against token sprawl, naming inconsistency, missing dark mode, hardcoded values, circular references, platform gaps

The Skill's Own Description

“Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.”

Front-matter description from SKILL.md. The full file is about 4,003 characters. Read the full file on GitHub.

Design System Patterns

Run design-system-patterns on a Real Brand and design-system Work Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesign Browse all skills