skills.rest
billydeeii136
billydeeii136COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ckm:design-system

Manage token architecture, component specifications, and slide generation for UI/UX design.

Updated Jul 7, 2026
Search Tags:#design system#slide generation#brand compliance#component specification#token architecture
One-click install
npx skills add https://github.com/billydeeii136/black-opps-claude-skill --skill ckm-design-system-billydeeii136
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/billydeeii136/black-opps-claude-skill/tree/main/agent-skills/ui-ux-pro-max-skill/.claude/skills/design-system
Command: npx skills add https://github.com/billydeeii136/black-opps-claude-skill --skill ckm-design-system-billydeeii136

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive design system for token architecture, component specifications, and slide generation, ensuring consistent UI/UX across projects.

Core Features & Use Cases

  • Token Architecture: Define three-layer tokens (primitive→semantic→component) for systematic design.
  • Component Specifications: Detailed specifications for UI components with states and variants.
  • Slide Generation: Generate brand-compliant presentations using design tokens.
  • Use Case: Imagine you're creating a new design system for your product. Use this Skill to define your tokens, create component specifications, and generate slides that adhere to your design standards.

Quick Start

Use the ckm:design-system skill to generate design tokens for your project.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I create a design system with token architecture for consistent UI?▼

To create a design system with token architecture, define three-layer tokens (primitive, semantic, component) and component specifications. This ensures consistent UI/UX branding and theming across projects using JSON tokens and CSS variables.

What is the best way to generate brand-compliant slides using design tokens?▼

The best way to generate brand-compliant slides is by using a design system that processes JSON tokens and CSS variables. This allows you to automatically produce presentations that strictly adhere to your defined UI/UX standards.

Do I need Node.js to manage component specifications and design tokens?▼

Yes, you need Node.js installed as a dependency to manage component specifications and design tokens. The environment uses scripts to process JSON tokens and CSS variables for front-end development and UI design.

How do component specifications handle different UI states and variants?▼

Component specifications handle UI states and variants by defining detailed parameters within the token architecture. This systematic approach ensures that every component variant maintains brand compliance across different application views.

Can I use JSON tokens and CSS variables for marketing presentation slide generation?▼

Yes, you can use JSON tokens and CSS variables for marketing presentation slide generation. The design system facilitates brand-compliant presentations by directly applying these defined tokens to your slides.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

figma-sync

Synchronize design tokens between Figma and local DTCG JSON files.

Community
Intermediate
moshi-azzmoshi-azz
2

ckm:design-system

Manage design tokens and generate slides from component specifications.

Community
Advanced
PeterHddPeterHdd
27

cleanui

Improve AI-generated user interfaces with design best practices and layout intelligence.

Community
Advanced
AincFhAincFh

ckm:design-system

Generate design tokens and slide templates from a unified token system.

Community
Advanced