skills.rest
mcauduro0
mcauduro0COMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

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

1|Updated Feb 19, 2026
Search Tags:#responsive design#design system#style guide#design tokens#ui components#developer handoff
One-click install
npx skills add https://github.com/mcauduro0/Macro_Trading --skill ui-design-system-mcauduro0
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/mcauduro0/Macro_Trading/tree/main/.claude/skills/alireza-ui-design-system
Command: npx skills add https://github.com/mcauduro0/Macro_Trading --skill ui-design-system-mcauduro0

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (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 documentation.

Core Features & Use Cases

  • Design Token Generation: Create comprehensive color palettes, typography scales, spacing systems, and more from a single brand color.
  • Component Architecture: Provides guidance and patterns for structuring UI component libraries.
  • Responsive Design Tools: Offers calculations and strategies for fluid typography and responsive layouts.
  • Developer Handoff: Facilitates seamless integration of design tokens into development workflows across various frameworks.
  • Use Case: A UI designer needs to establish a new design system for a web application. They can use this Skill to generate all foundational design tokens (colors, typography, spacing) and get a clear structure for their component library, ensuring consistency and efficient developer collaboration.

Quick Start

Use the ui-design-system skill to generate design tokens for the color '#FF5733' in a modern style.

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?▼

Generate design tokens by inputting a single brand color to automatically produce comprehensive color palettes, typography scales, spacing systems, sizing, borders, shadows, and breakpoints for your design system.

What output formats are supported for design system tokens?▼

Design system tokens are supported in JSON, CSS, and SCSS output formats, facilitating seamless integration into various development workflows and frameworks for efficient developer handoff.

Can I generate UI components for different visual styles like modern or playful?▼

Yes, you can generate UI components and design tokens supporting modern, classic, and playful visual styles, allowing you to adapt the design system architecture to your specific brand requirements.

How do I structure a UI component library for developer handoff?▼

Structure a UI component library by using provided component architecture patterns and guidance, ensuring consistency across the design system and enabling seamless developer handoff across various frameworks.

Does this tool provide calculations for responsive design layouts?▼

Yes, the tool provides responsive design tools that offer calculations and strategies for fluid typography and responsive layouts, ensuring your UI design system adapts correctly across different breakpoints.

Related Skills

Explore More Design & Creative Skills→
tenzirtenzir
3

tenzir-design-system

Provide design tokens, component specifications, and brand assets for Tenzir UI development.

Official
Basic
michalstanieckomichalstaniecko

frontend-design

Standardize SCSS, Tailwind, and Bootstrap styling for WordPress themes.

Community
Intermediate
ArieGoldkinArieGoldkin
10

design-system-starter

Generate design tokens, React component templates, and WCAG 2.1 accessibility documentation.

Community
Advanced
RightNow-AIRightNow-AI
18.1k

figma-expert

Guide Figma design systems with component architecture, auto-layout, and design tokens.

Official
Intermediate