ckm:design-system

Manage design token architecture and generate brand-compliant slides with Chart.js.

115k|12.3k|Updated Nov 30, 2025

Search Tags:#component library #design tokens #presentation #ui design #css variables #brand consistency

Ready to run

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm-design-system-nextlevelbuilder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ckm-design-system-nextlevelbuilder

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation and management of design systems, ensuring brand consistency and efficient slide generation through token-based architecture.

Core Features & Use Cases

Design Token Management: Define and manage primitive, semantic, and component tokens for a unified design language.
Systematic Design: Enforce brand compliance and consistency across UI elements and presentations.
Slide Generation: Create brand-compliant presentations using design tokens and a decision system.
Use Case: A design team needs to create a presentation for investors. They can use this Skill to generate slides that adhere strictly to the company's brand guidelines, including colors, typography, and layout, ensuring a professional and cohesive look.

Quick Start

Use the ckm:design-system skill to create a 10-slide investor pitch for ClaudeKit Marketing.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema

How do I manage design tokens for brand-consistent UI design and presentations?▼

Manage design tokens by defining a three-layer architecture of primitive, semantic, and component tokens to establish a unified design language. This ensures strict brand compliance and consistency across both UI elements and generated presentation slides.

What is a three-layer token structure and how does it work for CSS variables?▼

A three-layer token structure separates design tokens into primitive, semantic, and component levels using CSS variables. Primitive tokens hold raw values, semantic tokens assign meaning, and component tokens map directly to UI elements for systematic styling.

How do I generate brand-compliant presentation slides using a design token architecture?▼

Generate brand-compliant slides by applying your established design token architecture through a built-in decision system. This process automatically aligns colors, typography, and spacing scales with Chart.js integration to produce cohesive presentations.

Can I use Chart.js integration for strategic slide creation within a component library system?▼

Yes, you can use Chart.js integration for strategic slide creation. The system leverages your component library specifications and design tokens to generate data visualizations that strictly adhere to your defined brand guidelines and layout rules.

Does this design system approach support custom spacing and typography scales for UI components?▼

Yes, the design system approach fully supports custom spacing and typography scales. It manages these scales through CSS variable systems and component specifications, ensuring proportional consistency across all UI design elements and presentation outputs.