How does the Design System Lead skill handle design tokens?

It implements a three-tier architecture that maps primitive values to semantic aliases and component-scoped tokens, ensuring a flexible and maintainable styling system across different platforms.

How do I measure the success of my design system with this tool?

It includes an adoption analyzer that tracks component coverage percentage, token compliance rates, and manual overrides across multiple repositories to provide a health dashboard.

Can this skill help with cross-platform development?

Yes, it includes built-in configurations for generating platform-specific styles for CSS, SCSS, iOS (Swift), and Android (XML) from a single JSON source of truth.

What design system maturity levels does it support?

The skill guides you through four stages of maturity: Emerging (establishing foundations), Defined (guidelines), Managed (library adoption), and Optimized (automated measurement and improvement).

Does it provide component implementation examples?

The skill generates comprehensive component scaffolds including React/CVA implementations, accessibility guidelines, usage documentation, and detailed prop tables.

Design System Lead

Name: Design System Lead
Author: borghei

byborghei

•

デザインツール

Architect and manage scalable design systems including multi-tier token structures, component libraries, and cross-platform style generation.

The Design System Lead skill empowers developers and designers to build, maintain, and scale robust design systems using a structured, industry-standard approach. It provides comprehensive tools for creating three-tier token architectures—primitive, semantic, and component—while scaffolding accessible UI components with detailed specifications and implementation patterns. Whether you are auditing an existing system for maturity or generating cross-platform tokens for web, iOS, and Android via Style Dictionary, this skill streamlines the bridge between design and engineering to ensure consistency, accessibility, and speed across the entire product organization.

主な機能

01Automated component scaffolding with accessibility requirements and prop specifications

02Cross-platform style dictionary support for CSS, SCSS, iOS, and Android

03Adoption analytics tracking to measure component coverage and token compliance

04Three-tier token architecture generation for primitive, semantic, and component levels

0550 GitHub stars

06Design system maturity assessment and audit workflows for legacy projects

ユースケース

01Modernizing a legacy UI by migrating hardcoded values to a scalable semantic design token system

02Implementing a contribution and governance model for multi-team design system collaboration

03Building a production-ready component library with standardized documentation and accessibility hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add borghei/claude-skills design-system-lead

For use in Claude.ai and ChatGPT

Download Skill