skills.rest
AlejandroFigini
AlejandroFiginiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ckm:design-system

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

Updated Mar 27, 2026
Search Tags:#slides#brand#design-system#css-variables#design-tokens#component-tokens#tokens-architecture
One-click install
npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill ckm-design-system-alejandrofigini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/AlejandroFigini/artist-portfolio/tree/main/.agent/skills/design-system
Command: npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill ckm-design-system-alejandrofigini

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Brand consistency and scalable design in large projects are hard with ad-hoc tokens. This Skill defines a three-layer token architecture (primitive → semantic → component), CSS variables, spacing/typography scales, and a framework for slide generation to maintain brand identity across products and presentations.

Core Features & Use Cases

  • Three-layer token architecture (Primitive → Semantic → Component)
  • CSS variables and semantic tokens for theming
  • Slide templates and design-to-code handoff
  • References, scripts, and assets organization to support token work

Quick Start

Run the designated scripts to generate tokens and slide templates from the provided assets for immediate brand-consistent outputs.

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 organize brand assets?▼

A three-layer design token architecture organizes brand assets by mapping primitive tokens to semantic tokens, which then define component tokens. This hierarchy ensures scalable, brand-consistent design workflows across products and presentations.

How do I generate brand-consistent slide templates using CSS variables and design tokens?▼

You generate brand-consistent slide templates by running the provided scripts to apply CSS variables and design-token references. This templated slide generation streamlines the design-to-code handoff and maintains cohesive branding.

Can I use semantic design tokens to manage theming for multiple product components?▼

Yes, semantic design tokens manage theming by mapping foundational primitive values to context-aware component tokens. This approach enforces CSS variables to support cohesive branding and scalable theming across multiple products.

What is the best way to structure design tokens for design-to-code handoff in large projects?▼

The best way to structure design tokens for design-to-code handoff is implementing a primitive, semantic, and component layer architecture. This framework enforces CSS variables and references to maintain brand consistency in large projects.

Do I need predefined assets and scripts to start generating token-driven brand slides?▼

Yes, you need predefined assets and scripts to start generating token-driven brand slides. Running the designated scripts processes the provided assets to output immediate, brand-consistent slide templates and component specifications.

Related Skills

Explore More Design & Creative Skills→
frankxaifrankxai
6

design-system-architecture

Implement token hierarchies with semantic, alias tokens for scalable design systems.

Community
Advanced
hiimtrunghiimtrung
4

ckm:design-system

Implement a three-layer token architecture with semantic tokens and CSS variables.

Community
Advanced
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced