skills.rest
mewomewoliu
mewomewoliuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system-director

Coordinate design system governance with three-tier token architecture and component specs.

1|Updated Mar 16, 2026
Search Tags:#consistency#scalability#tokens#design-system#ui-patterns#component-spec
One-click install
npx skills add https://github.com/mewomewoliu/ici-design-studio --skill design-system-director
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system-director
Source: https://github.com/mewomewoliu/ici-design-studio/tree/main/design-studio/design-system-director
Command: npx skills add https://github.com/mewomewoliu/ici-design-studio --skill design-system-director

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Orchestrates the governance of design systems by defining tokens, components, and guidelines that ensure consistency across products and brands. It reduces decision fatigue, speeds up product design, and aligns teams around a single source of truth.

Core Features & Use Cases

  • Token architecture and governance: primitives, semantic tokens, and component tokens to encode decisions, not values.
  • Component specifications: API-first component contracts and states to enable reliable implementation.
  • System governance and scaling: define patterns, UI guidelines, and multi-surface strategies for web and mobile.
  • Use Case: when auditing an existing product, generate token maps and component specs to align with the system.

Quick Start

Ask clarifying questions about product type, surfaces, and brand direction to begin drafting your first token architecture.

Frequently Asked Questions about design-system-director

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a scalable design system token architecture?▼

Build a scalable design system using a three-tier token architecture: primitive tokens for raw values, semantic tokens to encode decisions, and component tokens for specific UI elements, ensuring consistency across products.

What is the best way to audit existing UI components for design system compliance?▼

Auditing existing UI components involves generating token maps and component specifications to align with the system, creating API-first contracts and defining states to ensure reliable implementation and cross-surface consistency.

Can I use semantic design tokens to maintain cross-surface consistency on web and mobile?▼

Semantic design tokens encode decisions rather than raw values, enabling cross-surface consistency across web and mobile platforms by providing a single source of truth for UI guidelines and multi-surface strategies.

How do component specifications work in a scalable design system?▼

Component specifications in a scalable design system provide API-first component contracts and define UI states, enabling reliable implementation and pattern governance across product teams.

Do I need a specific framework to govern design system patterns and UI guidelines?▼

No specific framework is required to govern design system patterns and UI guidelines. The system coordinates governance of tokens, components, and guidelines to align teams around a single source of truth.

When should I not use a three-tier token architecture for my design system?▼

A three-tier token architecture may be unnecessary for small projects lacking multiple surfaces or brands, as it is designed to reduce decision fatigue and speed up product design at scale across web and mobile.

Related Skills

Explore More Design & Creative Skills→
Daiwik-ChilukuriDaiwik-Chilukuri

colorize

Introduce color to monochromatic UI with OKLCH values and WCAG contrast.

Community
Intermediate
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced
josemartinrodriguezmortalonijosemartinrodriguezmortaloni

ui-skills

Enforce opinionated UI constraints for frontend development with AI agents.

Community
Intermediate
fragments-sdkfragments-sdk
1

fragments/mcp

Discover components, generate UI structures, and validate governance via Fragments MCP server tools.

Official
Intermediate