skills.rest
SJTU-IPADS
SJTU-IPADSOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-design-system

Generate design tokens and document components for developer handoff.

7|2|Updated Apr 13, 2026
Search Tags:#documentation#accessibility#handoff#responsive#design-system#design-tokens#component-library
One-click install
npx skills add https://github.com/SJTU-IPADS/SkVM-data --skill ui-design-system-sjtu-ipads
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design-system
Source: https://github.com/SJTU-IPADS/SkVM-data/tree/main/skills/ui-design-system
Command: npx skills add https://github.com/SJTU-IPADS/SkVM-data --skill ui-design-system-sjtu-ipads

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI design system skill provides a centralized toolkit to generate design tokens, document components, and coordinate design-to-code handoff, ensuring consistency across teams.

Core Features & Use Cases

  • Token generation for colors, typography, and spacing
  • Central component documentation and pattern libraries
  • Responsive design calculations and developer handoff guidance

Quick Start

Create a design system foundation with tokens and a simple component catalog to start.

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

To generate design tokens, the Skill applies a centralized toolkit that curates foundational variables for colors, typography, and spacing, ensuring consistency across teams. It executes deterministically through curated templates to produce these token sets.

What's the best way to document component libraries for developer handoff?▼

The best way to document component libraries is through the Skill's central cataloging feature, which generates pattern libraries and handoff guidance. It creates structured SKILL.md frontmatter and references to enable seamless design-to-code interoperability.

How does responsive design calculation work within a design system?▼

Responsive design calculation works by applying curated tokens and templates to adapt component dimensions across different viewport sizes. The Skill processes these calculations deterministically to provide precise guidance for frontend developers.

Can I use this design system approach with modern frontend frameworks?▼

Yes, you can use this approach with modern frameworks as it explicitly supports interoperability for developer handoff. The generated tokens and component documentation are structured to integrate directly into modern frontend development workflows.

Do I need any specific dependencies to maintain a cohesive design system?▼

No specific dependencies are required to maintain a cohesive design system, as the Skill operates entirely standalone. It only requires a SKILL.md frontmatter with a name and description, while optionally supporting scripts, references, and assets.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

editorial

Provide editorial design guidelines with typography scales and color tokens.

Community
Intermediate
jasonmichaelbell78-creatorjasonmichaelbell78-creator

ui-design-system

Generate design tokens and document components for scalable UI systems.

Community
Advanced
fefogarciafefogarcia
1

design-consistency-auditor

Audits frontend applications for design system consistency and accessibility.

Community
Advanced
duc01226duc01226

design-system

Generate design tokens and slide templates from a three-layer token architecture.

Community
Advanced