skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

uupm-design-system

Organize design tokens into primitive, semantic, and component layers with CSS variables.

Updated May 24, 2026
Search Tags:#design system#design tokens#slide generation#css variables#brand consistency#token-architecture
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill uupm-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uupm-design-system
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/uupm-design-system
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill uupm-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Fragmented design tokens, component specs, and slide content create inconsistency and inefficiency across brand assets. This Skill introduces a three-layer token model (primitive→semantic→component), CSS variable usage, and a guided slide-generation workflow to unify design at the token, component, and presentation levels.

Core Features & Use Cases

  • Three-Layer Token Architecture: primitive tokens provide raw values, semantic tokens offer meaningful aliases, and component tokens map visuals to reusable UI elements.
  • CSS Variables & Scales: standardized spacing and typography scales with theme-switching capabilities for brand-consistent experiences.
  • Slide & Token Pipeline: end-to-end generation of brand-aligned slides from token definitions and component specs to accelerate design-to-deck workflows.

Quick Start

Generate a token-driven design system and brand-aligned slides from your existing tokens.

Frequently Asked Questions about uupm-design-system

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

FAQPage Schema
How do I structure design tokens for brand consistency across UI components?▼

Design tokens for brand consistency are structured into a three-layer architecture: primitive tokens for raw values, semantic tokens for meaningful aliases, and component tokens mapping visuals to reusable UI elements.

What's the best way to generate brand-consistent slides from design tokens?▼

Brand-consistent slides are generated through a token-driven slide pipeline that processes component state definitions and CSS variable systems to align presentation visuals with existing token definitions.

How does a three-layer token architecture work for CSS variables?▼

A three-layer token architecture applies CSS variables by assigning raw values to primitive tokens, aliasing them into semantic tokens for context, and mapping them to component tokens for reusable UI element styling.

Do I need existing design tokens to start building a component state definition workflow?▼

Existing design tokens are required to build component state definitions, as the workflow processes your current token definitions to generate standardized spacing, typography scales, and component-level visual mappings.

Can I use CSS variables for theme switching in a design token system?▼

CSS variables enable theme switching within a design token system by standardizing spacing and typography scales, allowing brand-consistent experiences across different deck and interface themes.

Why does fragmented design token architecture cause inconsistent brand assets?▼

Fragmented design token architecture causes inconsistent brand assets because disconnected component specs and slide content lack unified semantic mappings and CSS variable systems to enforce visual consistency across outputs.

Related Skills

Explore More Design & Creative Skills→
edisonabeledisonabel

ckm:design-system

Manage design token architecture and generate CSS variables from JSON.

Community
Advanced
wpgauravwpgaurav
14

ckm:design-system

Generate design tokens and CSS variables via a Node/Python pipeline.

Community
Advanced
EIS-ITSEIS-ITS

Frontend CSS

Apply design tokens and CSS methodologies to style components and optimize production builds.

Official
Intermediate
Davie521Davie521
7

ckm:design-system

Map primitive, semantic, and component tokens to UI components and slide templates.

Community
Intermediate