skills.rest
akobryan1
akobryan1COMMUNITY
Explore all skills by this author →
GitHub

design-system

Create and validate design tokens and component styles using YAML, Python, and CSS.

1|Updated May 2, 2026
Search Tags:#design tokens#slide generation#UI components#brand consistency#automated styling
One-click install
npx skills add https://github.com/akobryan1/Telemetry-Tracking-and-Command-TT-C- --skill design-system-akobryan1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/akobryan1/Telemetry-Tracking-and-Command-TT-C-/tree/main/.github/skills/skills/ui-ux-pro-max-skill-main/.claude/skills/design-system
Command: npx skills add https://github.com/akobryan1/Telemetry-Tracking-and-Command-TT-C- --skill design-system-akobryan1

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the development of systematic, brand-compliant design tokens and UI components, ensuring visual consistency across products.

Core Features & Use Cases

  • Token Architecture: Establishes multi-layered tokens (primitive, semantic, component) for flexible theming.
  • Component Specifications: Defines detailed design specs for buttons, inputs, cards, and more.
  • Slide Generation: Automates creation of brand-aligned presentation slides with animations and CSS variables.
  • Use Case: A design team can quickly implement a cohesive visual language and generate slides for marketing pitches.

Quick Start

Use the design-system skill to generate a complete style guide and slide deck from existing design tokens and templates.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I create multi-layered design tokens for scalable UI components?▼

Multi-layered design tokens are created using YAML and Python to define primitive, semantic, and component levels. This architecture ensures flexible theming and consistent visual styling across UI components.

Can I generate brand-aligned presentation slides automatically using design tokens?▼

Automated slide generation produces brand-aligned presentation slides using CSS variables and animations. It leverages existing design tokens and templates to output marketing-ready decks without manual styling.

Do I need Python scripting knowledge to manage systematic design token architecture?▼

Python scripting is required for efficient implementation of design token architecture and automated styling. Familiarity with YAML, CSS variables, and Python allows systematic creation and validation of component styles.

What is the best way to maintain brand consistency across UI components and marketing slides?▼

Brand consistency is maintained by establishing a unified token architecture that defines component specifications and slide templates. This ensures visual alignment across both product interfaces and marketing presentations.

How do I validate component specifications against a design system?▼

Component specifications for buttons, inputs, and cards are validated using Python scripts that check styling against defined design tokens. This systematic validation ensures UI components match the established visual language.

Related Skills

Explore More Design & Creative Skills→
RamonsDkaRamonsDka
1

ckm:design-system

Build token-driven design systems with three-layer token architecture and CSS variables.

Community
Advanced
dmedina-devdmedina-dev
1

ckm:design-system

Generate brand-compliant token systems, Tailwind-ready CSS variables, component specs, and HTML slides from JSON/CSS inputs.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
moshi-azzmoshi-azz
2

ckm:design-system

Manage design tokens and generate slides from component specifications.

Community
Advanced