skills.rest
LRYuChi
LRYuChiCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-system

Generate design tokens, typography scales, and handoff documentation for design-dev collaboration.

Updated Aug 27, 2026
Search Tags:#typography#documentation#handoff#responsive#design-system#color-palette#design-token
One-click install
npx skills add https://github.com/LRYuChi/TAHZAN-ARCHIVE --skill ui-design-system-lryuchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/LRYuChi/TAHZAN-ARCHIVE/tree/main/.claude/skills/ui-design-system
Command: npx skills add https://github.com/LRYuChi/TAHZAN-ARCHIVE --skill ui-design-system-lryuchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Designers often spend excessive time creating and maintaining design tokens, documentation, and handoff artifacts for new projects; this Skill provides a token-driven system and ready-to-use docs to ensure consistency and speed up delivery.

Core Features & Use Cases

  • Design token generation (colors, typography, spacing)
  • Component documentation and developer handoff
  • Responsive design calculations and accessibility checks
  • Use Case: Bootstrap a project with a cohesive, scalable design system from tokens to components.

Quick Start

Generate a tokens-driven design system for a new project including color, typography, spacing, and a starter component docs page.

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 color, typography, and spacing in a scalable UI system?▼

A design token system uses a modular generator to output color palettes, typography scales, and spacing values, establishing a token-driven theming foundation for visual consistency across platforms.

What is the best way to structure component documentation for developer handoff?▼

Structuring component documentation for developer handoff involves generating a standard handoff package with validation and ready-to-use component docs, ensuring design-dev collaboration and delivery speed.

Can I use a token-driven design system for responsive design calculations and accessibility checks?▼

Yes, a token-driven design system can apply responsive design calculations and accessibility checks, ensuring scalable UI components meet accessibility standards while adapting to various screen sizes.

Do I need existing design files to bootstrap a project with design tokens and component docs?▼

No, you do not need existing design files to bootstrap a project; you can generate a cohesive design system from scratch, starting with tokens, typography, and spacing to output documentation and handoff-ready assets.

Why does my design system lack visual consistency across different platforms?▼

Your design system lacks visual consistency across platforms if it is not token-driven; implementing a modular design token generator for colors, typography, and spacing ensures cohesive theming and standardizes component guidelines.

When do I need a standard handoff package with validation for design-dev collaboration?▼

You need a standard handoff package with validation when transitioning from design to development, providing handoff-ready assets and component documentation that streamline delivery of a scalable UI design system.

Related Skills

Explore More Design & Creative Skills→
mkatoguimkatogui
3

brand-identity-generator

Generate brand identity systems with CSS-ready tokens and brand guidelines.

Community
Advanced
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
froide-kkfroide-kk
1

design-ui-patterns

Provide UI component design guidelines for accessible, responsive interfaces.

Official
Intermediate
sotono-046sotono-046
1

design-principles

Define design direction, color, typography, and spacing tokens for dashboards.

Community
Basic