skills.rest
AutomatedMarketer
AutomatedMarketerCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Standardize three-layer design tokens and generate brand-compliant slide decks.

Updated Mar 17, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#brand compliance#component specs
One-click install
npx skills add https://github.com/AutomatedMarketer/claude-skills --skill ckm-design-system-automatedmarketer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/AutomatedMarketer/claude-skills/tree/main/skills/design-system
Command: npx skills add https://github.com/AutomatedMarketer/claude-skills --skill ckm-design-system-automatedmarketer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It removes the friction of keeping design tokens, component behavior, and presentation assets aligned across a brand system, so teams can design and ship with consistent visual rules instead of manual one-off decisions.

Core Features & Use Cases

  • Three-layer token architecture: Organize primitive, semantic, and component tokens for scalable theming and clean design-to-code handoff.
  • Component specifications: Define reusable behavior for buttons, inputs, cards, badges, alerts, dialogs, and tables with clear variants and states.
  • Slide generation workflow: Create persuasive, brand-compliant decks with token-driven styling, charts, navigation, and content patterns.
  • Validation and automation: Use scripts to generate tokens, validate token usage, search slide strategies, and enforce CSS variable compliance.
  • Use case: A designer or frontend team can turn a brand palette and component requirements into a consistent system and a polished investor presentation without hardcoded styling.

Quick Start

Use the design-system skill to define a three-layer token system, review the component specifications, and generate a brand-compliant slide deck from the provided tokens.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I structure design tokens for scalable theming and clean design-to-code handoff?▼

Structure design tokens using a three-layer architecture of primitive, semantic, and component tokens. This organizes your base palette into meaningful UI variables, ensuring scalable theming and a clean handoff to frontend code without manual decisions.

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

Generate brand-compliant slides by mapping component tokens directly to presentation styles, charts, and navigation. This token-driven workflow ensures your decks maintain strict visual consistency without relying on hardcoded styling values.

How does CSS variable validation work for component specifications?▼

CSS variable validation works by running automated scripts that enforce compliance across your component specifications. It checks buttons, inputs, and cards to ensure all styling strictly references your token architecture rather than hardcoded values.

Can I map a primitive design token architecture directly to a Tailwind theme?▼

Yes, you can map your three-layer token architecture to a Tailwind theme using CSS variables. This translates primitive and semantic tokens into Tailwind's configuration, allowing seamless component styling while maintaining brand compliance.

Do I need hardcoded styles for component states like buttons and inputs?▼

No, you do not need hardcoded styles for component states. You define reusable behavior and variants for buttons, inputs, and cards using semantic and component tokens, ensuring all states remain brand-compliant through CSS variables.

Why does my design system require a primitive-to-semantic-to-component token structure?▼

Your design system requires a primitive-to-semantic-to-component token structure to separate raw values from UI meaning. This three-layer approach prevents redundant styling, enables scalable theming, and allows validator-backed HTML output to enforce compliance.

Related Skills

Explore More Design & Creative Skills→
AbsolutelySkilledAbsolutelySkilled
207

color-theory

Define OKLCH-based color tokens with semantic mappings and dark-mode overrides.

Official
Advanced
frankxaifrankxai
6

arcanea-design-system

Define Arcanea design tokens, CSS variables, and UI component standards.

Community
Advanced
DebuggingInTearsDebuggingInTears

tailwind-theme-builder

Configures Tailwind v4 and shadcn/ui theming for React/Vite projects with dark mode and CSS variables.

Official
Intermediate
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced