skills.rest
TenBeltz
TenBeltzOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ckm:design-system

Generates CSS variables and brand-aligned slides from a three-layer design token architecture.

Updated Nov 21, 2024
Search Tags:#branding#slides#tokens#design-system#css-variables#design-tokens#token-architecture
One-click install
npx skills add https://github.com/TenBeltz/tenbeltz-frontend --skill ckm-design-system-tenbeltz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/TenBeltz/tenbeltz-frontend/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/TenBeltz/tenbeltz-frontend --skill ckm-design-system-tenbeltz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Token architecture and guidelines unify tokens, ensuring brand-consistent UI by centralizing primitive, semantic, and component tokens, plus slide generation workflows.

Core Features & Use Cases

  • Token architecture: primitive → semantic → component, CSS variables, and spacing/typography scales.
  • Slide design system: token-driven slide specs and brand-aligned templates for presentations.
  • Design-to-code handoff: component specs, token references, and tooling to generate consistent UI assets.

Quick Start

Run the design-token workflow to generate CSS variables and begin building brand-aligned slides.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
What is a three-layer design token architecture and how does it work?▼

A three-layer design token architecture organizes UI styles through primitive, semantic, and component tokens. This mechanism centralizes brand colors, spacing, and typography to ensure consistent UI across multiple projects.

How do I generate CSS variables for brand-aligned slide decks?▼

You can generate CSS variables for brand-aligned slide decks by running the design-token workflow. This process converts YAML frontmatter metadata and token scales into styles for tokenized presentations.

Can I use design tokens for design-to-code handoff and component specs?▼

Yes, design tokens support design-to-code handoff by providing component specs and token references. This workflow bridges design and development to generate consistent UI assets.

Do I need YAML frontmatter to manage design tokens for presentations?▼

Yes, YAML frontmatter is required to manage design tokens for presentations. It provides the metadata structure needed to drive token workflows and enforce semantic layering for your slide design system.

What is the best way to structure spacing and typography scales for a slide design system?▼

The best way to structure spacing and typography scales for a slide design system is using a primitive to semantic token hierarchy. This approach enforces brand alignment and enables consistent UI component generation.

Why use semantic layering instead of primitive tokens for brand deck templates?▼

Semantic layering maps primitive tokens to contextual meanings, preventing hardcoded values in brand deck templates. This architecture enables centralized updates across all tokenized slides without breaking component styles.

Related Skills

Explore More Design & Creative Skills→
civictechdccivictechdc
1

visual-design-foundations

Creates visual systems with typography, color, spacing, and iconography guidelines.

Official
Intermediate
AlejandroFiginiAlejandroFigini

ckm:design-system

Organize design tokens into primitive, semantic, and component layers with CSS variables.

Community
Advanced
JustinWangJPJustinWangJP
6

tailwind-design-system

Establish scalable Tailwind-based design systems with semantic tokens and CVA components.

Community
Advanced
davpatel605-beepdavpatel605-beep

design-md

Create and validate DESIGN.md design token specification files with YAML front matter.

Community
Intermediate