skills.rest
ZiadNagar
ZiadNagarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Generate design tokens for colors, typography, and spacing with JSON, CSS, or SCSS exports.

Updated Mar 8, 2026
Search Tags:#accessibility#frontend#css#design-system#design-tokens#token-generation
One-click install
npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill ui-design-system-ziadnagar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/ZiadNagar/zeVillage-AI-Toolkit/tree/main/skills/ui-design-system
Command: npx skills add https://github.com/ZiadNagar/zeVillage-AI-Toolkit --skill ui-design-system-ziadnagar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI design teams struggle with inconsistencies across interfaces and manual token management. This Skill provides a scalable design system toolkit that generates design tokens, documents components, and streamlines design-dev handoff to maintain visual coherence.

Core Features & Use Cases

  • Design token generation for colors, typography, spacing
  • Component documentation and developer handoff
  • Responsive design calculations and accessibility considerations
  • Multi-format exports (JSON, CSS, SCSS) and token-driven workflows
  • Real-world use: produce a brand-aligned token set and export to CSS variables for a design system

Quick Start

Run the design_token_generator.py script with your brand color and style to generate tokens and export CSS variables for your app.

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 colors and typography?▼

Export design tokens to CSS variables by running the token generator script with your brand parameters. The script handles multi-format exports, outputting JSON, CSS, or SCSS formats for direct integration into frontend workflows.

What is a token-driven UI design system and when do I need it?▼

Yes, the generated design system includes accessibility considerations and responsive design calculations. The token generator outputs scalable spacing and typography tokens that adapt to responsive layouts while maintaining accessibility standards.

How do I export design tokens to CSS variables for frontend development?▼

Export design tokens to CSS variables by running the token generator script with your brand parameters. The script handles multi-format exports, outputting JSON, CSS, or SCSS formats for direct integration into frontend workflows.

What is a token-driven UI design system and when do I need it?▼

A token-driven UI design system uses generated variables for spacing, borders, and shadows to maintain visual coherence. You need it when scaling interfaces and standardizing design-dev handoff to eliminate manual token management inconsistencies.

Does the design token generator support accessibility and responsive calculations?▼

Yes, the generated design system includes accessibility considerations and responsive design calculations. The token generator outputs scalable spacing and typography tokens that adapt to responsive layouts while maintaining accessibility standards.

Can I use this design system tooling for developer handoff and component documentation?▼

Yes, you can use this tooling for developer handoff and component documentation. It streamlines the design-dev workflow by generating standardized tokens and exporting them in developer-friendly formats like JSON and SCSS.

Related Skills

Explore More Design & Creative Skills→
gitdukgitduk

ui-design-system

Generate design system tokens from brand colors and style variants.

Community
Advanced
SwokingSwoking

symfony-sk:css-component

Standardize CSS/SCSS component styling with BEM naming and CSS variables.

Community
Intermediate
JustinWangJPJustinWangJP
6

tailwind-design-system

Establish scalable Tailwind-based design systems with semantic tokens and CVA components.

Community
Advanced
DVNghiemDVNghiem
20

design-tokens

Standardize color, typography, spacing, and border tokens across platforms.

Community
Intermediate