ckm:design-system
CommunityBuild consistent, branded UIs with tokens.
Design & Creative#design system#design tokens#ui components#css variables#brand consistency#presentation generation
AuthorSTAR03-byte
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses the challenge of maintaining design consistency and brand integrity across digital products by providing a structured system for design tokens and component specifications.
Core Features & Use Cases
- Design Token Architecture: Implements a three-layer token system (primitive, semantic, component) for scalable and themeable design.
- Component Specifications: Defines detailed states, variants, and anatomy for UI components.
- Slide Generation: Enables the creation of brand-compliant presentations using design tokens and a contextual decision system.
- Use Case: A frontend team can use this Skill to generate CSS variables from a
tokens.jsonfile, ensuring all UI elements adhere to the defined spacing, color, and typography scales, and can quickly generate presentation slides for design reviews.
Quick Start
Use the design-system skill to generate CSS variables from the tokens.json configuration file.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferencestemplates
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ckm:design-system Download link: https://github.com/STAR03-byte/SmartMeeting/archive/main.zip#ckm-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.