skills.rest
kleon6436
kleon6436COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-system

Define design system governance and token management across iOS, Android, and Web.

Updated Apr 13, 2026
Search Tags:#typography#accessibility#design-system#spacing#design-tokens#component-spec#color-system
One-click install
npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill design-system-kleon6436
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/kleon6436/GitHubCopilotSettings/tree/main/skills/design-system
Command: npx skills add https://github.com/kleon6436/GitHubCopilotSettings --skill design-system-kleon6436

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Defines practical guidelines for managing a design system and token governance to ensure brand consistency across platforms and languages.

Core Features & Use Cases

  • Token hierarchy: Foundation, Semantic, and Component levels to organize tokens for scalable design.
  • Color system & typography: Guidelines for color ramps, accessibility, and typography scales across platforms.
  • Spacing and component specs: Spacing rules and component documentation to unify layouts and interactions.

Quick Start

Apply these guidelines to establish tokens, color, typography, and spacing across platforms for consistent branding.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I manage design tokens for cross-platform branding consistency?▼

To manage design tokens for cross-platform branding, establish a clear token hierarchy with Foundation, Semantic, and Component levels to ensure consistent design across iOS, Android, and Web.

What is a design token hierarchy and how does it work?▼

A design token hierarchy organizes design tokens into Foundation, Semantic, and Component levels. This structure scales design systems by separating raw values from contextual meaning and specific component specifications.

How do I set up a color system and typography scale that meets accessibility guidelines?▼

Set up an accessible color system and typography scale by defining color ramps and typography rules that meet accessibility considerations, ensuring readable contrast and scalable text across iOS, Android, and Web.

Does this design system governance apply to multi-platform projects?▼

Yes, this design system governance is applicable to multi-platform projects, providing specific tooling guidance for platform-specific token transformations across iOS, Android, and Web environments.

How do I unify spacing rules and component specifications across different platforms?▼

Unify spacing rules and component specifications by defining consistent layout and interaction guidelines within your design system, ensuring uniform spacing and documented component behavior across all platforms.

What is the best way to transform design tokens for platform-specific implementations?▼

The best way to transform design tokens for platform-specific implementations is to apply tooling guidance that translates your semantic token hierarchy into platform-specific formats for iOS, Android, and Web.

Related Skills

Explore More Design & Creative Skills→
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate
pathtoresiliencebvpathtoresiliencebv

figma-implement-design

Converts Figma designs into code with visual fidelity and design-system mapping via MCP server access.

Community
Advanced
qodex-aiqodex-ai
39

component-interface-design

Design accessible UIs with component libraries and generate React code with Tailwind CSS.

Official
Intermediate