skills.rest
nimeshgurung
nimeshgurungCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generates design system tokens for colors, typography, spacing, and breakpoints.

1|Updated Nov 17, 2025
Search Tags:#ui#design system#component library#design tokens#tokens#design tokens generator
One-click install
npx skills add https://github.com/nimeshgurung/artifact-hub-collections --skill ui-design-system-nimeshgurung
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/nimeshgurung/artifact-hub-collections/tree/main/skills/raw/alirezarezvani/claude-skills/product-team/ui-design-system
Command: npx skills add https://github.com/nimeshgurung/artifact-hub-collections --skill ui-design-system-nimeshgurung

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 and improving collaboration between designers and developers.

Core Features & Use Cases

  • Design Token Generation: Automatically creates tokens for colors, typography, spacing, etc.
  • Component System Architecture: Provides a foundation for building reusable UI components.
  • Responsive Design: Includes tools for calculating responsive breakpoints.
  • Developer Handoff: Facilitates clear documentation for developers.
  • Use Case: Generate a complete design token set for a new product based on a primary brand color and a modern style.

Quick Start

Generate a complete design token system using the brand color '#0066CC' 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 for a UI component library?▼

Generate design tokens by providing a primary brand color and selecting a style such as modern, classic, or playful. The system outputs comprehensive tokens for colors, typography, spacing, sizing, borders, shadows, animations, and breakpoints for your UI component library.

What design token formats can I export for frontend development?▼

You can export design tokens in JSON, CSS, and SCSS formats. These export options ensure consistent UI development by providing format-specific files that integrate directly into your frontend workflow.

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

Yes, you can create a responsive design system that includes tools for calculating responsive breakpoints. The generated token set incorporates these breakpoints to help maintain consistent responsive behavior across your application.

What is the best way to maintain visual consistency across a scalable design system?▼

Maintain visual consistency by using a centralized design token generation system that automatically produces standardized color palettes, typography scales, and spacing units. This approach streamlines creation and ensures consistent UI development across teams.

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

No specific framework is required because the design tokens are exported in universal formats like JSON, CSS, and SCSS. This allows you to integrate the generated component system architecture into any frontend environment without dependencies.

Related Skills

Explore More Design & Creative Skills→
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate
johnlindquistjohnlindquist
24

design

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

Community
Advanced
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate