skills.rest
JFEspanolito
JFEspanolitoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

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

Updated Nov 20, 2025
Search Tags:#design system#component library#design tokens#css variables#scss#ui generation
One-click install
npx skills add https://github.com/JFEspanolito/Template_FrontEnd_NextJS_JF --skill ui-design-system-jfespanolito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/JFEspanolito/Template_FrontEnd_NextJS_JF/tree/main/AI/skills/curated/ui-design-system
Command: npx skills add https://github.com/JFEspanolito/Template_FrontEnd_NextJS_JF --skill ui-design-system-jfespanolito

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill streamlines the creation and maintenance of design systems by automating the generation of design tokens and providing tools for consistent UI development.

Core Features & Use Cases

  • Design Token Generation: Automatically create comprehensive design tokens for colors, typography, spacing, shadows, and more, based on a brand color and chosen style.
  • Component System Architecture: Provides a structured approach to building scalable component libraries.
  • Developer Handoff: Facilitates seamless collaboration between designers and developers by providing standardized design specifications.
  • Use Case: A UI designer can use this skill to generate a complete set of design tokens for a new project, ensuring brand consistency across all UI elements and simplifying the handoff to the development team.

Quick Start

Use the ui-design-system skill to generate design tokens for the brand color '#FF5733' in the 'playful' 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 for a UI color palette and typography scale?▼

Generate design tokens by inputting a base brand color and selecting a visual style such as modern or playful to automatically produce comprehensive color palettes, typography scales, and spacing systems for consistent UI development.

Can I export design tokens as CSS variables and SCSS formats?▼

Yes, you can export design tokens as CSS variables and SCSS formats, alongside JSON, to facilitate seamless developer handoff and direct integration into your stylesheet architecture.

What is the best way to automate design system creation for developer handoff?▼

Automating design system creation for developer handoff is best achieved by generating standardized specifications for spacing, sizing, borders, shadows, and breakpoints into structured JSON, CSS, or SCSS files.

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

No specific framework is required to use generated design tokens and CSS variables because the skill outputs standard JSON, CSS, and SCSS formats that integrate directly into any web component architecture.

What design token categories are included for a complete UI component system?▼

Design token categories included for a complete UI component system cover color palettes, typography scales, spacing systems, sizing, borders, shadows, animations, and breakpoints to ensure full visual consistency.

Related Skills

Explore More Design & Creative Skills→
CHNISamCHNISam

brand-guidelines

Apply brand color codes, font styles, and design principles to corporate materials.

Community
Basic
hongmaple0820hongmaple0820
9

ui-design-system

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

Community
Advanced
gil-kapelgil-kapel
2

ui-design-system

Generates design tokens and documentation for scalable UI systems.

Community
Intermediate
Prathmesh2000Prathmesh2000
1

design-tokens

Standardize color, spacing, typography, and component tokens for multi-brand design systems.

Community
Advanced