skills.rest
drgaciw
drgaciwCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generate design tokens and documentation from brand colors and typography scales.

1|Updated Nov 9, 2025
Search Tags:#typography#design#handoff#responsive#design-system#design-token#token-generation
One-click install
npx skills add https://github.com/drgaciw/academic-athletics-saas --skill ui-design-system-drgaciw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/drgaciw/academic-athletics-saas/tree/main/.claude/skills/ui-design-system
Command: npx skills add https://github.com/drgaciw/academic-athletics-saas --skill ui-design-system-drgaciw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Designers and teams struggle to maintain visual consistency across products, transforming branding into a scalable, accessible UI system.

Core Features & Use Cases

  • Design token generation from brand colors and typography scales for consistent theming.
  • Component system documentation that accelerates design-dev handoff and collaboration.
  • Responsive design calculations to ensure layouts adapt across breakpoints and devices.
  • Use case: When elevating a product, generate a cohesive set of tokens, typography, and spacing ready for designer and frontend code.

Quick Start

Run the design token generator on your brand color to produce a ready-to-use design system for 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 a design system from a brand color and typography scale?▼

Generate a design system by inputting a brand color and typography scale to produce cohesive tokens for colors, spacing, borders, shadows, and breakpoints. This ensures consistent UI across products and accelerates design-dev handoff.

What are design tokens and how do they maintain visual consistency across products?▼

Design tokens are centralized variables for colors, typography, spacing, borders, shadows, and breakpoints. They maintain visual consistency across products by translating brand identity into a scalable, accessible UI system for frontend developers and designers.

How do I calculate responsive breakpoints and spacing grids for scalable UI?▼

Responsive breakpoints and spacing grids are calculated by generating a comprehensive token set from your brand inputs. This ensures layouts adapt consistently across devices and breakpoints for scalable frontend development.

Can I use this design token generator for frontend developer handoff documentation?▼

Yes, the design token generator produces component system documentation that accelerates design-dev handoff. It outputs developer documentation alongside tokens for typography, spacing, and colors, ready for frontend code integration.

What is the best way to build a scalable design system for multiple products?▼

The best way to build a scalable design system is generating comprehensive tokens for colors, typography, spacing, borders, shadows, and breakpoints from core brand elements. This creates a cohesive UI system ready for consistent product implementation.

Related Skills

Explore More Design & Creative Skills→
Kirankumar2604Kirankumar2604

branding-generator

Generate brand identity kits with naming, color palettes, and typography.

Community
Advanced
haxlyshaxlys

design-system-patterns

Standardize design tokens, theming, and component patterns for web and mobile apps.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
johnlindquistjohnlindquist
24

design

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

Community
Advanced