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

Ready to run

npx skills add https://github.com/JFEspanolito/Template_FrontEnd_NextJS_JF --skill ui-design-system-jfespanolito

💬 Prompt for ChatGPT / Claude Chat▼

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.