skills.rest
zhangzhang-111-i
zhangzhang-111-iCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

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

2|Updated Mar 13, 2026
Search Tags:#frontend#responsive design#design system#component library#design tokens#ui development#css variables
One-click install
npx skills add https://github.com/zhangzhang-111-i/claude-skills111 --skill ui-design-system-zhangzhang-111-i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/zhangzhang-111-i/claude-skills111/tree/main/product-team/ui-design-system
Command: npx skills add https://github.com/zhangzhang-111-i/claude-skills111 --skill ui-design-system-zhangzhang-111-i

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and maintenance of design systems by automating the generation of design tokens, component structures, and developer handoff assets, ensuring visual consistency and efficient collaboration.

Core Features & Use Cases

  • Design Token Generation: Create comprehensive design tokens for colors, typography, spacing, and more from a single brand color.
  • Component System Structure: Define and document component hierarchies, variants, and token mappings.
  • Responsive Design Tools: Calculate responsive breakpoints, fluid typography, and spacing scales.
  • Developer Handoff: Export tokens in various formats (JSON, CSS, SCSS) and provide integration examples for popular frameworks.
  • Use Case: A UI designer needs to establish a new design system for a web application. They can use this Skill to generate a complete set of design tokens based on the brand's primary color, define the structure for buttons and input fields, and prepare the necessary files for the development team.

Quick Start

Use the ui-design-system skill to generate design tokens for the color #FF5733 in modern style and export them as CSS.

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 single brand color for frontend development?▼

To generate design tokens from a brand color, you input the hex value and select a style preset like modern or classic. The system then outputs a comprehensive token set including color palettes, typography scales, and spacing units for frontend development.

What design token output formats are supported for developer handoff?▼

Supported design token output formats for developer handoff include JSON, CSS, and SCSS. These formats ensure visual consistency and provide integration examples for popular frontend frameworks.

Can I generate responsive breakpoints and fluid typography scales using CSS variables?▼

Yes, you can generate responsive breakpoints and fluid typography scales using CSS variables. The system calculates responsive units and provides reference documentation for component architecture and responsive calculations.

Do I need Python to build a component library with this design system generator?▼

Yes, Python is a required dependency to build a component library with this design system generator. The system utilizes a Python script for token generation, component structure definition, and asset preparation.

What is the best way to establish a scalable UI design system for a web application?▼

The best way to establish a scalable UI design system is to automate design token generation, define component hierarchies and variants, and export developer handoff assets. This ensures visual consistency and facilitates efficient collaboration.

What style presets are available for generating UI component structures and design tokens?▼

Available style presets for generating UI component structures and design tokens include modern, classic, and playful. These presets ensure visual consistency while allowing you to match the desired aesthetic for your web application.

Related Skills

Explore More Design & Creative Skills→
erichowenserichowens
181

web-design-expert

Generate distinctive web designs and brand identities with WCAG accessibility.

Community
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced
mwathibenmwathiben

tailwind-design-system

Standardize UI design with design tokens and CVA component patterns for Tailwind projects.

Community
Advanced
Impertio-StudioImpertio-Studio

tailwind-core-design-system

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

Official
Advanced