ui-design-system

name	ui-design-system
description	Manage — UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for cre
executor	HYBRID
skill_id	business.product-team.ui-design-system
status	ADOPTED
security	{"level":"standard","pii":false,"approval_required":false}
anchors	["business","documentation","design"]
tier	2
input_schema	[{"name":"code_or_task","type":"string","description":"Code snippet, script, or task description to process","required":true}]
output_schema	[{"name":"result","type":"string","description":"Generated or refactored code output"},{"name":"explanation","type":"string","description":"Explanation of changes or implementation decisions"}]

UI Design System

Generate design tokens, create color palettes, calculate typography scales, build component systems, and prepare developer handoff documentation.

---

Table of Contents

• 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

---

Trigger Terms

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"

---

Workflows

Workflow 1: Generate Design Tokens

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

   python scripts/design_token_generator.py "#0066CC" modern json
   

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
   • Shadows: none through 2xl