Does this skill support mobile development?

Yes, it includes patterns for Style Dictionary, which allows you to transform design tokens for use in iOS (Swift) and Android (XML) environments.

How does this skill assist with Figma workflows?

It provides guidance on setting up token pipelines to synchronize design decisions made in tools like Figma directly into your code repository via CI/CD.

What are design tokens and why are they important?

Design tokens are platform-agnostic variables that represent visual atoms like color, spacing, and typography, ensuring consistency across different platforms and tools.

Can I implement automatic dark mode with this skill?

Absolutely. It provides specific patterns for detecting system preferences (prefers-color-scheme) and managing theme state within React applications.

Design System Patterns

Name: Design System Patterns
Author: duanbiao2000

byduanbiao2000

0•

Herramientas de Diseño

Architects scalable design systems using design tokens, multi-theme infrastructure, and robust component patterns.

This skill provides comprehensive architectural guidance for creating professional-grade design systems. It enables developers to implement structured design token hierarchies—spanning primitive, semantic, and component levels—and establish dynamic light and dark theme switching using CSS custom properties or React context. By offering best practices for building flexible component libraries with polymorphic patterns and variant systems, it ensures consistency and scalability across web and mobile platforms. It is particularly useful for teams looking to automate their design-to-code workflows or manage complex, multi-brand theming requirements.

Características Principales

010 GitHub stars

02Hierarchical design token management (Primitive, Semantic, Component)

03Dynamic theme switching with system preference detection

04Polymorphic and compound component architecture patterns

05Automated token pipelines for Figma-to-code synchronization

06Multi-platform token generation for Web, iOS, and Android

Casos de Uso

01Building a new enterprise-grade component library with theme support

02Migrating hardcoded CSS values to a scalable, token-based system

03Implementing a multi-brand theming strategy for complex applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add duanbiao2000/obsidiandoc26 design-system-patterns

For use in Claude.ai and ChatGPT

Download Skill