skills.rest
DevXoje
DevXojeCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generate color, typography, spacing, and breakpoint tokens from brand inputs.

Updated Dec 28, 2025
Search Tags:#typography#design-system#spacing-grid#design-tokens#color-palette#tokens.css#developer-hand-off
One-click install
npx skills add https://github.com/DevXoje/gerocare --skill ui-design-system-devxoje
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/DevXoje/gerocare/tree/main/.cursor/skills/ui-design-system
Command: npx skills add https://github.com/DevXoje/gerocare --skill ui-design-system-devxoje

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill provides a scalable approach to standardizing UI design through a token-driven design system, easing handoff between designers and developers.

Core Features & Use Cases

  • Generate color token scales from a brand color to establish a cohesive palette.
  • Create typography and spacing tokens aligned to an 8-point grid for consistent UI.
  • Produce developer handoff documentation and design-system guidelines to accelerate implementation.
  • Maintain a single source of truth for visual language across products.

Quick Start

Generate tokens for your brand color using the included Python script and integrate the resulting token set into your project.

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

You generate design tokens by running the included Python-based generator script to process brand colors, typography scales, and spacing rules, outputting structured JSON or CSS tokens for your UI.

What is the best way to maintain consistent spacing and color scales across a UI design system?▼

The best way to maintain consistency is by establishing a single source of truth using design tokens mapped from base values to semantic usage, aligning typography and spacing to an 8-point grid.

How does a design token generator map base tokens to semantic usage for developer handoff?▼

A design token generator maps base tokens to semantic usage by translating raw brand colors and spacing rules into contextual UI variables, producing developer handoff documentation to accelerate implementation.

Do I need Python to create CSS tokens for an 8-point grid design system?▼

Yes, you need Python to execute the included generator script, which processes your 8-point grid spacing rules and brand inputs to automatically output the corresponding CSS or JSON tokens.

Can I export JSON and CSS design tokens for developer handoff without external dependencies?▼

Yes, you can export JSON and CSS design tokens without external dependencies because the generator script runs standalone, taking your base inputs and directly producing the required token files for handoff.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced
librefanglibrefang
10

figma-expert

Create scalable Figma design systems with tokens and handoff-ready specs.

Official
Advanced
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced