skills.rest
hongmaple0820
hongmaple0820COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Generate design-system tokens and handoff documentation for React, Tailwind, and CSS.

9|2|Updated Mar 12, 2026
Search Tags:#design#documentation#handoff#responsive#tokens#design-system#component-library
One-click install
npx skills add https://github.com/hongmaple0820/agent-academy --skill ui-design-system-hongmaple0820
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/pm-product/product-team/ui-design-system
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill ui-design-system-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Designing scalable UI requires consistent tokens, coherent typography, and smooth developer handoff; this Skill unifies token generation, design-system documentation, and integration guidance to reduce manual setup time.

Core Features & Use Cases

  • Token generation for colors, typography, spacing, and breakpoints
  • Documentation of component APIs and design constraints
  • Developer handoff notes and integration examples for React, Tailwind, and CSS tooling
  • Use Case: A design team wants to bootstrap a new design system with shared tokens and scalable components.

Quick Start

Run the token generator to bootstrap your design system and generate initial tokens.

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 system tokens for colors, typography, and spacing?▼

Design system tokens are generated by running the token generator, which bootstraps your system and automates values for colors, typography, spacing, and breakpoints. It outputs structured data for React, Tailwind, and CSS.

Can I export design tokens to JSON, CSS, and SCSS formats?▼

Yes, you can export design tokens to JSON, CSS, and SCSS formats. The Skill supports these specific export types to ensure seamless integration with your preferred frontend frameworks and styling approaches.

What is the best way to document component APIs and design constraints for developer handoff?▼

The best way to document component APIs and design constraints is using automated handoff documentation. This Skill generates developer handoff notes and integration examples for React, Tailwind, and CSS tooling to reduce manual setup.

Does this design system toolkit support responsive typography and breakpoints?▼

Yes, the design system toolkit supports responsive typography and breakpoints. It handles token-to-code mappings for these features, allowing teams to build scalable UI libraries with coherent, responsive design properties.

How do I map design tokens to code for React and Tailwind integration?▼

You map design tokens to code by utilizing the token-to-code mappings provided by the toolkit. It generates integration examples and documentation specifically tailored for React, Tailwind, and CSS framework workflows.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
michalstanieckomichalstaniecko

frontend-design

Standardize SCSS, Tailwind, and Bootstrap styling for WordPress themes.

Community
Intermediate
mgd34msumgd34msu
4

storybook

Develop, document, and test UI components in isolation with Storybook.

Community
Intermediate
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced