ui-design-system

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

1|Updated Feb 13, 2026

Search Tags:#design system #design tokens #ui components #css variables #brand consistency #developer handoff

Ready to run

npx skills add https://github.com/RussianLioN/moltinger --skill ui-design-system-russianlion

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/RussianLioN/moltinger/tree/main/.claude/skills/ui-design-system
Command: npx skills add https://github.com/RussianLioN/moltinger --skill ui-design-system-russianlion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill streamlines the creation and maintenance of design systems, ensuring visual consistency across all products and facilitating smoother collaboration between designers and developers.

Core Features & Use Cases

Design Token Generation: Automatically creates comprehensive design tokens for colors, typography, spacing, and more, based on a primary brand color and chosen style.
Component System Architecture: Provides a foundation for building a robust component library.
Responsive Design Tools: Includes predefined breakpoints and sizing for various screen sizes.
Developer Handoff: Generates tokens in multiple formats (JSON, CSS, SCSS) for easy integration into development workflows.

Quick Start

Use the ui-design-system skill to generate design tokens using the brand color blue and the 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 primary brand color?▼

Design tokens define visual style variables as code values for colors, typography, and spacing. They act as a centralized source of truth, ensuring brand consistency across products and enabling automated CSS variable generation for UI components.

What is the best way to export design tokens for developer handoff?▼

Export design tokens in JSON, CSS, or SCSS formats to bridge the designer-developer handoff gap. These outputs provide ready-to-use CSS variables and SCSS maps for direct integration into component library architecture and frontend workflows.

Can I generate a responsive design system with predefined breakpoints?▼

Yes, you can generate a responsive design system with predefined breakpoints. The token output includes specific sizing scales and breakpoints for various screen sizes to support responsive UI component development.

Do I need a specific framework to use generated design tokens?▼

No specific framework is required because tokens export as framework-agnostic JSON, CSS variables, and SCSS files. You can integrate these formats directly into any web frontend architecture or component system.

What design token categories are included for UI component architecture?▼

The design token categories included for UI component architecture cover colors, typography, spacing, sizing, borders, shadows, animation, breakpoints, and z-index scales. These tokens provide a complete foundation for building a robust component library.