skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

ckm:design-system

Generates three-layer design tokens, component specifications, and brand-compliant HTML slide decks.

Updated Mar 26, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#chart.js#component specs
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-design-system-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/ui-ux-pro-max/.claude/skills/design-system
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill ckm-design-system-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Maintaining visual consistency across components and presentations is hard when colors, spacing, and typography are hardcoded everywhere. This Skill establishes a single source of truth with a three-layer token architecture (primitive, semantic, component) and enforces it through generation and validation scripts. ## Core Features & Use Cases - Token Architecture & Generation: Define tokens in JSON and generate CSS variables or Tailwind config with generate-tokens.cjs, covering colors, spacing, typography, radius, shadows, and dark mode. - Component Specifications: Reference detailed specs for Button, Input, Card, Badge, Alert, Dialog, and Table with variants, sizes, and state definitions. - Slide Generation: Create brand-compliant HTML pitch decks using design tokens, Chart.js, BM25-based slide search, and a contextual decision system driven by strategy, layout, typography, and color CSVs. - Token Validation: Detect hardcoded hex colors and fonts in HTML/CSS with html-token-validator.py to enforce token compliance. - Use Case: Build a 10-slide investor pitch deck that imports design-tokens.css, uses only var(--token) references, includes Chart.js revenue charts, and passes automated token validation. ## Quick Start Ask the AI to generate a brand-compliant pitch deck or generate CSS design tokens from the starter JSON template using the included scripts.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I generate CSS variables from a design tokens JSON file?▼

Run generate-tokens.cjs with your token config: node generate-tokens.cjs --config tokens.json -o tokens.css. It resolves token references across primitive, semantic, and component layers and outputs CSS custom properties, with an optional Tailwind format mode.

What is a three-layer design token architecture?▼

It separates tokens into primitive (raw values like hex colors), semantic (purpose aliases like --color-primary), and component layers (like --button-bg). Each layer references the one below, enabling theme switching and per-component customization without changing raw values.

How do I create a pitch deck that follows my brand design tokens?▼

Use the slide generation workflow: search slide strategies with search-slides.py, generate HTML slides that import design-tokens.css, use Chart.js for data visualization, then validate with html-token-validator.py to confirm no hardcoded colors or fonts remain.

Does the token generator support Tailwind CSS configuration?▼

Yes, generate-tokens.cjs supports a --format tailwind option that outputs a Tailwind color config mapping semantic token names to CSS var() references, which you add to tailwind.config.ts under theme.extend.colors.

Why does HTML token validation flag hardcoded colors in my slides?▼

The validator forbids hex, rgb, and hsl values in style blocks and inline styles because slides must use var(--token) references from design-tokens.css. Exceptions exist for Chart.js script blocks, external image URLs, and brand-color rgba transparency values.

Can I switch between light and dark themes with these tokens?▼

Yes, the starter token JSON includes a dark section that overrides semantic color values. The generator outputs these under a .dark class, so toggling that class switches themes without touching component code.

Related Skills

Explore More Design & Creative Skills→
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
andersoncollabandersoncollab

design-to-code

Transform design briefs into frontend code scaffolds with design tokens.

Community
Advanced
MrJmpl3MrJmpl3

0178-visual-design-foundations

Standardizes typography, spacing, color, theming, and iconography into cohesive design tokens.

Community
Intermediate
Marcus-BoniMarcus-Boni
1

shadcn

Manage shadcn components and project configurations via CLI.

Community
Advanced