skills.rest
gitduk
gitdukCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generate design system tokens from brand colors and style variants.

Updated Feb 3, 2026
Search Tags:#typography#handoff#ui-design#design-system#responsive-design#color-palette#design-token
One-click install
npx skills add https://github.com/gitduk/agents --skill ui-design-system-gitduk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/gitduk/agents/tree/main/skills/ui-design-system
Command: npx skills add https://github.com/gitduk/agents --skill ui-design-system-gitduk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Senior UI teams struggle to maintain visual consistency across products and hand off tokens to developers. This Skill provides a centralized design system toolkit to generate tokens, document components, and standardize responsive calculations.

Core Features & Use Cases

  • Design token generation for colors, typography, spacing.
  • Component system architecture and developer handoff documentation.
  • Responsive design calculations and accessibility compliance to support scalable UI across devices.

Quick Start

Run the design_token_generator.py script with a brand color and style to generate the tokens for your design system.

Frequently Asked Questions about ui-design-system

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

FAQPage Schema
How do I generate design tokens from a brand color?▼

To generate design tokens, run the token generator script with a brand color and style variant. It outputs a complete JSON token set covering color palettes, typography scales, spacing, sizing, borders, shadows, and breakpoints.

Can I export design tokens to CSS or SCSS for developer handoff?▼

Yes, design tokens can be exported to CSS or SCSS. The system defaults to JSON output to standardize design-to-development handoff workflows and streamline frontend component integration.

What is included in a complete UI design system token set?▼

A complete UI design system token set includes color palettes, typography scales, spacing, sizing, borders, shadows, breakpoints, and accessibility considerations to ensure visual consistency across responsive UI components.

How do I ensure responsive design and accessibility in my UI components?▼

You ensure responsive design and accessibility by generating tokens with standardized breakpoint calculations and built-in accessibility considerations, allowing scalable UI across multiple devices and compliant component architectures.

Does this token generator work without external dependencies?▼

Yes, the token generator works without external dependencies. It operates as a standalone script, requiring only a brand color and style variant as inputs to produce a complete design system token set.

Why do I need a design system for UI component architecture?▼

You need a design system to maintain visual consistency across products and standardize responsive calculations. It centralizes tokens and documents components to solve handoff struggles between senior UI teams and developers.

Related Skills

Explore More Design & Creative Skills→
HarshodaiHarshodai

brand

Validate brand assets against color palettes and naming conventions.

Community
Advanced
JFEspanolitoJFEspanolito

ui-design-system

Generate design system tokens for colors, typography, spacing, and more.

Community
Intermediate
tapanshahtapanshah

ui-design-system

Generate design tokens, component documentation, and responsive calculations for UI development.

Community
Advanced
Impertio-StudioImpertio-Studio

tailwind-core-design-system

Guide Tailwind CSS design tokens, configuration, and responsive patterns.

Official
Advanced