Skills
.Work. You
Rest

up-design-system

Community

Generate design systems from UP specs.

Design & Creative#ui#tokens#design-system#code-generation#mcp-tools#up-process
Authorapolosan
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Design system creation for UP projects is complex and time-consuming; this skill automates landscape research, system selection, token definition, and code generation to deliver a cohesive visual system aligned with UP artifacts.

Core Features & Use Cases

  • MCP-driven research & selection: surveys design-system landscapes, evaluates candidates against UP requirements, and selects the best fit for the project stack.
  • Token definition & design tokens generation: defines color, typography, spacing, and motion tokens tailored to the domain.
  • Component mapping & code generation: maps interface design specs to real UI components and generates production-ready code using shadcn, radix, and flyonui MCP tools.
  • UP artifact integration: leverages 08-interface-design.md, 11-tech-stack.md, and requirements to ensure traceability and consistency.

Quick Start

Run the design-system generation workflow against the current UP artifacts to produce tokens, components, and production-ready UI code.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: up-design-system
Download link: https://github.com/apolosan/unified_process_pi_extension/archive/main.zip#up-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.