skills.rest
Lutimi
LutimiCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Organize design tokens into primitive, semantic, and component layers.

Updated Apr 17, 2026
Search Tags:#branding#slides#tokens#design-system#css-variables#token-architecture#component-tokens
One-click install
npx skills add https://github.com/Lutimi/claude2figma --skill ckm-design-system-lutimi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/Lutimi/claude2figma/tree/main/ui-ux-pro-max-skill/.claude/skills/design-system
Command: npx skills add https://github.com/Lutimi/claude2figma --skill ckm-design-system-lutimi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This design-system skill provides a scalable framework of tokens and templates to create brand-consistent UI and presentation assets, reducing design drift and enabling rapid iteration.

Core Features & Use Cases

  • Three-layer token architecture (primitive → semantic → component) for consistent theming and easy brand swapping.
  • Token-driven slide templates and design tokens integration for brand-compliant decks and UI components.
  • Scripted tooling for token generation, validation, and slide rendering, plus token references and starter templates.

Quick Start

Run the included tooling to generate a tokens.css from design-tokens.json and render a sample deck using the starter templates.

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 CSS variables from a design tokens JSON file?▼

To generate CSS variables from design tokens, run the included scripting tooling that processes your design-tokens.json file and outputs a ready-to-use tokens.css file for styling UI components.

What is a three-layer design token architecture for brand slides?▼

A three-layer design token architecture organizes tokens into primitive, semantic, and component layers to enable consistent UI theming, brand swapping, and brand-compliant slide generation.

How do I create brand-compliant presentation decks using design tokens?▼

You can create brand-compliant presentation decks by applying token-driven styling across CSS variables and rendering slide templates using the provided scripted tooling and starter templates.

Can I validate token usage and embed tokens for standalone HTML?▼

Yes, the token tooling validates token usage to prevent design drift and embeds tokens directly into standalone HTML files, ensuring brand-aligned styling without external CSS dependencies.

Why use a design token system for scalable UI handoff?▼

Using a design token system reduces design drift and enables rapid iteration by providing a scalable framework of tokens and templates, ensuring consistent brand-aligned assets for UI handoff.

Related Skills

Explore More Design & Creative Skills→
TumeloRamaphosaTumeloRamaphosa

ckm:design-system

Generate token-compliant design tokens and brand-styled slide HTML.

Community
Advanced
frankxaifrankxai
6

arcanea-design-system

Define Arcanea design tokens, CSS variables, and UI component standards.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
aaltaayaaltaay

ckm:design-system

Converts a three-layer token system into CSS variables for brand-consistent design.

Community
Advanced