skills.rest
junchenghuo
junchenghuoCOMMUNITY
Explore all skills by this author →
GitHub

ui-design-token-system

Generate UI design tokens for colors, spacing, typography, and border-radius.

3|Updated Mar 11, 2026
Search Tags:#typography#style guide#design tokens#frontend development#ui design#color system
One-click install
npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill ui-design-token-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-token-system
Source: https://github.com/junchenghuo/openclaw-biz-agent/tree/main/ui/.agents/skills/ui-design-token-system
Command: npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill ui-design-token-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between UI design and front-end development by standardizing design elements like colors, spacing, and typography through design tokens, reducing rework and ensuring consistency.

Core Features & Use Cases

  • Tokenization: Defines and manages design tokens for colors, spacing, typography, and border-radius.
  • Semantic Mapping: Establishes semantic tokens (e.g., primary, success) based on foundational tokens.
  • Component Integration: Outlines strategies for mapping component-specific styles to design tokens.
  • Use Case: Ensure all buttons across the application use the same primary color and consistent padding by defining and applying these as design tokens.

Quick Start

Use the ui-design-token-system skill to define color and spacing tokens for the new design system.

Frequently Asked Questions about ui-design-token-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate UI design tokens for colors and spacing?▼

You generate UI design tokens for colors and spacing by defining foundational values and establishing semantic mappings, which ensures consistent component styling across your application.

How do design tokens bridge UI design and frontend development?▼

Design tokens bridge UI design and frontend development by standardizing visual elements like typography and color systems into a single source of truth, reducing rework and ensuring consistency.

Can I map component-specific styles to semantic design tokens?▼

Yes, you can map component-specific styles to semantic design tokens by establishing semantic tokens like primary or success based on foundational tokens, ensuring consistent component integration.

Do I need an offline local file-based workflow to manage design tokens?▼

Yes, managing these design tokens requires adherence to local file-based workflows and offline processing to handle foundational and semantic token definitions effectively.

What is the best way to ensure consistent UI color systems and typography?▼

The best way to ensure consistent UI color systems and typography is by tokenizing these design elements into foundational and semantic design tokens, standardizing them for development.

Related Skills

Explore More Design & Creative Skills→
DevXojeDevXoje

ui-design-system

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

Community
Basic
Dzakiamriz22Dzakiamriz22
1

ai-slop-detector

Detect and rewrite generic AI-generated UI patterns in frontend code.

Community
Advanced
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced
Prathviraj-jadhavPrathviraj-jadhav

visual-design-foundations

Apply typography, color, spacing, and iconography to create design tokens and style guides.

Community
Intermediate