design-system-patternsFoundational design system architecture — token hierarchies, theming infrastructure, token pipelines, and governance. Use when creating design tokens, implementing theme switching, setting up Style Dictionary, or establishing multi-brand theming. Triggers on design tokens, theme provider, Style Dictionary, token pipeline, multi-brand theming, CSS custom properties architecture.
Install via ClawdBot CLI:
clawdbot install wpank/design-system-patternsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/design-systems/design-system-patterAudited Apr 18, 2026 · audit v1.0
Generated Mar 21, 2026
A SaaS company needs a consistent design system across its web and mobile apps to ensure brand cohesion and developer efficiency. This skill helps define token hierarchies, implement theme switching for light/dark modes, and set up token pipelines using Style Dictionary to generate CSS, iOS, and Android assets from a single source, reducing maintenance overhead.
A software agency creates a customizable product for clients across different industries, requiring multi-brand theming. This skill enables the setup of brand-specific tokens (e.g., colors, fonts) that map to semantic tokens, allowing quick rebranding without code changes, ideal for B2B solutions or franchise systems.
A healthcare application must support user preferences for light/dark themes to improve accessibility and reduce eye strain. This skill provides React-based theme switching with system preference detection and localStorage persistence, preventing flash of unstyled content (FOUC) in server-side rendered environments like Next.js for a seamless user experience.
An e-commerce platform with multiple teams needs standardized design tokens to maintain consistency across components and pages. This skill helps define token naming conventions, hierarchical layers (primitive to component), and governance patterns to streamline collaboration between designers and developers, reducing design debt.
A financial services company aims to modernize its legacy CSS codebase by adopting design tokens for better maintainability and theming. This skill guides the creation of token pipelines with Style Dictionary, enabling incremental migration and support for future features like dynamic theming without breaking existing styles.
Offer this skill as part of a design system platform or toolkit subscription, where clients pay monthly for access to token management, theme switching components, and pipeline tools. Revenue is generated through tiered pricing based on usage, number of brands, or team size, appealing to startups and enterprises scaling their design operations.
Provide consulting and implementation services to clients needing custom design systems, multi-brand theming, or token pipeline setup. Revenue comes from project-based fees or retainer agreements, targeting industries like tech, healthcare, and retail that require tailored solutions for brand consistency and development efficiency.
Release core patterns (e.g., token hierarchies, theme switching) as open-source libraries to build community adoption, then monetize through premium support, advanced features, or enterprise licenses. Revenue streams include paid support contracts, training workshops, and custom integrations for large organizations with complex needs.
💬 Integration Tip
Integrate this skill early in the design system lifecycle by setting up token pipelines with Style Dictionary to automate asset generation, and use the theme provider pattern in React apps to ensure consistent theming across components with minimal performance impact.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.
Build design systems with tokens, components, and documentation that scale across teams and products.