skills.rest
istinataFTS
istinataFTSCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate slides from three-layer design tokens using Node.js scripts.

2|1|Updated Sep 25, 2025
Search Tags:#design tokens#slide generation#brand compliance#component specifications#systematic design
One-click install
npx skills add https://github.com/istinataFTS/LiftLeagueLegends --skill ckm-design-system-istinatafts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/istinataFTS/LiftLeagueLegends/tree/main/fitness_tracker/.claude/skills/design-system
Command: npx skills add https://github.com/istinataFTS/LiftLeagueLegends --skill ckm-design-system-istinatafts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, python, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating and managing design tokens, generating component specifications, and creating slides using those tokens.

Core Features & Use Cases

  • Token Architecture: Manages token architecture with three-layer tokens (primitive→semantic→component).
  • Component Specifications: Provides component specifications for systematic design.
  • Slide Generation: Generates slides using design tokens and CSS variables.
  • Use Case: For a UI/UX designer or frontend developer, use this Skill to generate a brand-compliant presentation using design tokens.

Quick Start

Generate a design token set with the generate-tokens.cjs script.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I generate design tokens for a brand-compliant UI presentation?▼

You can generate a structured design token set by running the provided Node.js generate-tokens.cjs script. This script creates a three-layer token architecture spanning primitive, semantic, and component levels for brand-compliant designs.

What is a three-layer design token architecture and why use it?▼

A three-layer design token architecture organizes variables from primitive base values to semantic meanings and component specifications. It ensures systematic design consistency and brand compliance across UI/UX and frontend workflows.

Can I use Python and Node.js scripts to create slides from design tokens?▼

Yes, you can use Python and Node.js scripts to create slides from design tokens. The Skill leverages both environments to process component specifications and generate presentations using CSS variables.

Do I need Node.js and Python installed to manage component specifications and generate slides?▼

Yes, you need both Node.js and Python installed. The Skill requires Node.js for token generation scripts and Python for slide creation, ensuring proper execution of the token architecture and presentation generation.

How do frontend developers apply design tokens to component specifications?▼

Frontend developers apply design tokens to component specifications by mapping semantic tokens to specific UI elements. This approach generates consistent, brand-compliant designs using CSS variables derived from the token architecture.

Best way to maintain brand compliance across UI/UX design workflows?▼

The best way to maintain brand compliance across UI/UX workflows is to implement a systematic design token architecture. By generating slides and component specifications from primitive and semantic tokens, visual consistency is enforced automatically.

Related Skills

Explore More Design & Creative Skills→
antony-jipantony-jip

ckm:design-system

Generate CSS variables from JSON design tokens and create brand-compliant slides.

Community
Advanced
qqrusqqrus

ckm:design-system

Generate and validate design tokens and component specifications from JSON configuration.

Community
Advanced
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
fisto-techfisto-tech

design-system

Manage design tokens and generate presentations from configuration files.

Official
Advanced