Verified:GitHub

up-design-system

Select design systems and generate UI code from UP project artifacts.

3|Updated Mar 31, 2026

Search Tags:#ui #tokens #design-system #code-generation #mcp-tools #up-process

One-click install

npx skills add https://github.com/apolosan/unified_process_pi_extension --skill up-design-system

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: up-design-system
Source: https://github.com/apolosan/unified_process_pi_extension/tree/main/skills/up-design-system
Command: npx skills add https://github.com/apolosan/unified_process_pi_extension --skill up-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about up-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate a design system from UP interface design specs?▼

Yes, it defines color, typography, spacing, and motion tokens tailored to your domain, ensuring token-driven design and accessibility considerations are met within the UP framework.

Can I use this to map interface designs to shadcn and radix components?▼

It works best with UP artifacts like 08-interface-design.md, 11-tech-stack.md, and project requirements to ensure traceability and consistency during design system creation.

What is the best way to select a UI component library for a UP project?▼

It generates design tokens and production-ready UI code directly from UP artifacts, eliminating manual component styling and token mapping to accelerate development.

Does this skill require existing UP artifacts to generate tokens?▼

It covers landscape research, token definition, component mapping, and code generation, functioning as an end-to-end pipeline from spec analysis to production-ready UI.