ui-design-system
Use when building a design system: tokens, component docs, responsive scales or developer handoff. Generates tokens with design_token_generator.py.
Target: Design & content creation. Automatically collected · unverified.
Excerpt from the author’s documentation
Extracted from a fixed version of SKILL.md in its original language. This is the author’s documentation; installation, compatibility and runtime results have not been verified by this site.
Read the original English text
Topics in the source
- UI Design System
- Table of Contents
- Trigger Terms
- Workflows
- Workflow 1: Generate Design Tokens
- Workflow 2: Create Component System
- Workflow 3: Responsive Design
- Workflow 4: Developer Handoff
Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation. -- Trigger Terms Workflows Workflow 1: Generate Design Tokens Workflow 2: Create Component System Workflow 3: Responsive Design Workflow 4: Developer Handoff Tool Reference Quick Reference Tables Knowledge Base -- Use this skill when you need to: "generate design tokens" "create color palette" "build typography scale" "calculate spacing system" "create design system" "generate CSS variables" "export SCSS tokens" "set up component architecture" "document component library" "calculate responsive breakpoints" "prepare developer handoff" "convert brand color to palette" "check WCAG contrast" "build 8pt grid system" -- Situation: You have a brand color and need a complete design token system. Steps: 1. Identify brand color and style Brand primary color (hex format) Style preference: modern | classic | playful 2. Generate tokens using script 3. Review generated categories Colors: primary, secondary, neutral, semantic, surface Typography: fontFamily, fontSize, fontWeight, lineHeight Spacing: 8pt grid-based scale (0-64) Borders: radius, width Sha
This is an excerpt. Refer to the complete source and its current requirements.
- Source repository
- alirezarezvani/claude-skills
- Source file
- product-team/skills/ui-design-system/SKILL.md
- Fixed revision
- 8f082544116fc0d014188e521ca40304cdfc86b0
Requirements
- Only the author’s Skill metadata is included. Read the full instructions to check dependencies, licensing and conditions of use.
A small first task
先阅读原作者说明，再决定是否在自己的 AI 工具中使用。
Instructions for your AI tool
- Claude Desktop: resource-specific guide not available yet
- Claude Code: resource-specific guide not available yet
- Cursor: resource-specific guide not available yet
- Codex: resource-specific guide not available yet
Author documentation is not live verification by this site. Without evidence, we do not mark a resource as compatible, safe or free.
Sources and evidence
This record was collected automatically. Its documentation, suitability and runtime behavior have not been manually verified.
Author: alirezarezvani/claude-skills · original repository metadata. Documentation review: Not reviewed. Last source check: 2026-11-09T14:01:47.339Z.
Categories are inferred from names, descriptions and paths. They do not establish compatibility.
License and attribution
MIT. Third-party content and copyright remain with their authors. Refer to the original license and terms.
Original license ↗Synchronization, copying and user-reported success do not mark a resource as runtime-tested.
Limitations and notes
- Collecting metadata does not mean this site has installed, adapted, runtime-tested or security-reviewed the resource.