ui-design-system

Name: ui-design-system
Availability: InStock
Author: gitduk

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

Ready to run

npx skills add https://github.com/gitduk/agents --skill ui-design-system-gitduk

💬 Prompt for ChatGPT / Claude Chat▼

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.