skills.rest
RussianLioN
RussianLioNCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/RussianLioN/moltinger --skill ui-design-system-russianlion
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Kirankumar2604Kirankumar2604

branding-generator

Generate brand identity kits with naming, color palettes, and typography.

Community
Advanced
hongmaple0820hongmaple0820
9

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

Community
Advanced
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
zli5460zli5460
2

design-md

Create, validate, and export design tokens from structured files.

Community
Intermediate