ckm:design-system

Overview

What is ckm:design-system?

ckm:design-system is a design-system skill that combines design token architecture, component specifications, and presentation slide generation into a single, reusable workflow.

It is built around a three-layer token model (primitive → semantic → component), with supporting references and scripts for:

• CSS variable systems
• Spacing and typography scales
• Component states and variants
• Tailwind theme configuration
• Systematic slide and pitch-deck layouts

The skill ships with opinionated data tables and templates for slide backgrounds, color logic, copy formulas, layouts, and narrative strategies, plus scripts to generate and validate tokens and slide structures.

Who is this skill for?

ckm:design-system is aimed at:

• Design-system leads and UI/UX designers who want a clear token architecture and component spec reference.
• Frontend and React/Tailwind developers who need a robust token pipeline (CSS variables, validators, Tailwind integration hints).
• Founders, PMs, and marketers who regularly create pitch decks and want repeatable, brand-consistent slide frameworks rather than starting from scratch.

If you are looking to bridge Figma-like design thinking with implementation-ready tokens and a reusable slide system, this skill is a strong fit.

What problems does it solve?

ckm:design-system helps you:

• Standardize design tokens with a documented primitive → semantic → component layering.
• Generate CSS tokens from JSON and validate their usage in your codebase.
• Plan Tailwind themes using the same token architecture.
• Define component specs including states and variants so UI stays consistent across screens.
• Design brand-consistent presentations using predefined slide layouts, chart recommendations, color and emotion logic, and copy formulas.

It gives you a structured way to think about both your UI and your slides as systems, not one-off artifacts.

When is ckm:design-system a good fit?

Use this skill when:

• You are introducing or refactoring a design system and want explicit token layers.
• You need CSS variable and Tailwind guidance connected to token architecture.
• You want to generate and validate design tokens instead of managing them by hand.
• You build pitch decks, sales presentations, or product demos regularly and want a repeatable slide structure.

It is less suitable if you only need a single static UI mock, or you are not using tokens or CSS variables at all.

How to Use

Installation and basic setup

1. Install the ckm:design-system skill

Install the skill into your Agent/skills environment:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill design-system

This pulls the design-system skill from the nextlevelbuilder/ui-ux-pro-max-skill repository into your local skills directory.

2. Explore the core files

After installation, open the skill folder and start with:

• SKILL.md – High-level overview, when to use the skill, token architecture, and quick-start commands.
• references/ – Conceptual documentation for tokens, components, variants, and Tailwind integration.
• data/ – CSV files that encode slide backgrounds, color logic, copy formulas, layouts, typography, and strategies.
• scripts/ – Utility scripts for generating, embedding, and validating tokens, plus slide-search helpers.
• templates/design-tokens-starter.json – A starter JSON template for defining your own token set.

This structure lets you quickly decide which parts to adopt: just tokens, just slides, or the full system.

Designing your token architecture

3. Understand the three-layer token model

SKILL.md and references/token-architecture.md describe a three-step structure:

Primitive (raw values)
       ↓
Semantic (purpose aliases)
       ↓
Component (component-specific)

Use the reference files to design each layer:

• references/primitive-tokens.md – Base colors, spacing, radii, typography primitives.
• references/semantic-tokens.md – Purpose-driven tokens like --color-primary, --surface-elevated, --text-muted.
• references/component-tokens.md – Component-level variables such as --button-bg, --card-border, --badge-pill-radius.

This separation makes it easier to:

• Swap themes without rewriting components.
• Keep implementation details (CSS variables, Tailwind config) aligned with the design language.

4. Create or adapt your token JSON

Use templates/design-tokens-starter.json as a base for your own token file.

Typical workflow:

1. Copy templates/design-tokens-starter.json into your project as tokens.json.
2. Fill in primitive values first (colors, spacing, font sizes).
3. Map primitives to semantic roles (primary, secondary, surface, border, etc.).
4. Map semantic tokens into component tokens for each key UI element.

Refer to:

• references/component-specs.md – For thinking about how components consume tokens.
• references/states-and-variants.md – For hover, focus, disabled, error states and variations.

Generating and validating tokens

5. Generate CSS variables from tokens

Use the token generation script described in SKILL.md:

node scripts/generate-tokens.cjs --config tokens.json -o tokens.css

• --config points to your token JSON (e.g., tokens.json).
• -o sets the output CSS file (e.g., tokens.css).

The result is a CSS file that defines your token set as --custom-properties, ready to be imported into your frontend.

6. Validate token usage in your codebase

To ensure your code only uses approved tokens, run the token validator:

node scripts/validate-tokens.cjs --dir src/

This checks the provided directory (for example src/) for token usage patterns and helps you:

• Catch hard-coded values that should be tokens.
• Identify deprecated or undefined tokens.

Additional validators in scripts/ include:

• html-token-validator.py – For scanning HTML for token usage patterns.
• slide-token-validator.py – For validating token usage in slide-related contexts.

Use these to keep your UI and slides aligned with your design system.

7. Embed tokens where needed

If your environment requires embedding tokens into documentation or HTML, you can use:

• scripts/embed-tokens.cjs – Embeds tokens into target files.

Check inline comments in the script and SKILL.md for usage guidance specific to your setup.

Tailwind and implementation considerations

8. Plan Tailwind integration

The skill includes a dedicated Tailwind reference:

• references/tailwind-integration.md – Guidance on mapping token names and scales into a Tailwind theme configuration.

Use it to:

• Map primitive/semantic tokens into Tailwind colors, spacing, and fontSize scales.
• Keep Tailwind utility classes aligned with your token design (e.g., a primary palette derived from primitives).

Even if you are not using Tailwind immediately, this reference is useful for thinking about how your token system will scale into utility-first CSS.

Building systemized slide decks

Although the primary category is design systems, ckm:design-system also supports structured presentation design.

9. Use slide data tables for layout and visuals

The data/ directory contains CSV files that encode best-practice slide patterns:

• data/slide-backgrounds.csv – Recommended background image types, overlays, and placement by slide type (hero, vision, team, testimonial, CTA, problem, solution, etc.).
• data/slide-color-logic.csv – How emotions (frustration, hope, fear, relief, trust, urgency, curiosity, etc.) map to background styles, text colors, and accent usage.
• data/slide-typography.csv – Typographic guidance per slide type (hierarchy, emphasis, etc.).
• data/slide-layout-logic.csv – Layout patterns driven by narrative goals and emotions (hook, problem, solution, proof, traction, CTA, timeline, features, etc.).
• data/slide-layouts.csv – Concrete layout patterns with CSS structure hints (e.g., grids, split layouts, hero structures, animation suggestions).

You can load these tables into your own pipeline (scripts, spreadsheets, or a deck generator) to create consistent slides driven by narrative and emotion rather than arbitrary design choices.

10. Structure slide copy with proven formulas

data/slide-copy.csv provides copywriting formulas tailored to different slide types, including:

• AIDA (Attention → Interest → Desire → Action)
• PAS (Problem → Agitate → Solution)
• 4Ps (Promise → Picture → Proof → Push)
• Before-After-Bridge
• QUEST
• Star-Story-Solution

Each row includes:

• formula_name and keywords
• Structured components
• use_case and example_template
• emotion_trigger and slide_type

Use these to:

• Prompt an agent to draft slide copy following a specific formula.
• Standardize copy across pitch decks and sales presentations.

11. Choose slide strategies for complete decks

data/slide-strategies.csv defines full deck patterns, for example:

• YC Seed Deck
• Guy Kawasaki 10/20/30
• Series A Deck

Each strategy includes:

• Recommended slide count
• Sequence (title, problem, solution, traction, market, etc.)
• Goal, audience, and tone
• Narrative and emotion arcs

This lets you:

• Generate a complete slide outline for a chosen strategy.
• Keep the design system and narrative structure in sync.

12. Work with slide scripts

The scripts/ directory includes utilities related to slide workflows:

• scripts/generate-slide.py – Core slide generation logic (you can adapt it into your own deck generator or pipeline).
• scripts/search-slides.py and scripts/slide_search_core.py – Search utilities that help you find relevant slide patterns or strategies based on keywords and context.
• scripts/fetch-background.py – Helps fetch background imagery (e.g., from Pexels/Unsplash) based on the guidelines in data/slide-backgrounds.csv.

These scripts are building blocks. You can run or adapt them depending on your environment and automation needs.

Working with references and documentation

13. Use references as implementation checklists

The references/ folder is not just documentation; it doubles as a checklist while you build out your design system:

• references/token-architecture.md – Confirm your primitive/semantic/component layering is sound.
• references/primitive-tokens.md – Ensure you have a complete set of base tokens.
• references/semantic-tokens.md – Check that each semantic token has a clear purpose.
• references/component-tokens.md – Map tokens into real components.
• references/component-specs.md – Capture states, variants, interactions, and accessibility considerations.
• references/states-and-variants.md – Avoid missing hover, focus, active, disabled, error, and success states.

Use these files during design reviews and handoff to keep designers and developers aligned.

Adapting the skill to your stack

14. Integrate gradually

You do not need to adopt the whole skill at once. Common incremental approaches:

• Token-only adoption – Start with templates/design-tokens-starter.json, generate-tokens.cjs, and validate-tokens.cjs to get a token pipeline running.
• Slide-only adoption – Use the data/ CSVs and scripts/generate-slide.py to standardize your presentations while keeping your existing design system.
• Full-system adoption – Combine tokens, components, and slide structures to build a unified brand system across product UI and pitch decks.

Focus first on the part that solves your most urgent problem, then expand.

FAQ

Is ckm:design-system a UI kit or a design token engine?

It is primarily a design-system and token architecture skill that also includes a structured slide system. It does not ship as a Figma UI kit, but it gives you:

• A three-layer token architecture
• Scripts to generate and validate tokens
• References for component specs and states

You can easily mirror the same tokens and components in Figma or any other design tool.

Can I use ckm:design-system without Tailwind or React?

Yes. Tailwind integration is documented in references/tailwind-integration.md, but it is optional. Tokens are generated as standard CSS variables, so you can use them in any stack:

• Vanilla CSS or CSS Modules
• Styled-components or other CSS-in-JS solutions
• Design tokens for Web Components or other frameworks

How does ckm:design-system help with presentations?

The skill treats slide decks as a design system problem:

• data/slide-layouts.csv and data/slide-layout-logic.csv define layout patterns and CSS structures.
• data/slide-backgrounds.csv and data/slide-color-logic.csv map slide types and emotions to visuals.
• data/slide-copy.csv and data/slide-strategies.csv provide copy formulas and deck structures.
• Scripts like generate-slide.py and search-slides.py help automate generation and retrieval.

This lets you build repeatable, brand-consistent decks instead of one-off slides.

Do I have to use the provided CSV data as-is?

No. The CSVs are opinionated defaults. You can:

• Use them as-is for quick pitch-deck generation.
• Fork and customize them to match your brand voice and visual style.
• Replace them entirely with your own data while keeping the same script patterns.

Where should I start if I only care about design tokens?

If your focus is strictly on tokens and UI implementation:

1. Read SKILL.md, especially "When to Use" and "Token Architecture".

2. Open references/token-architecture.md and the primitive/semantic/component token references.

3. Copy templates/design-tokens-starter.json and create your tokens.json.

4. Run:

   node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
   node scripts/validate-tokens.cjs --dir src/
   

This gives you a working token pipeline without needing to touch the slide system.

Is ckm:design-system suitable for small projects?

It can be, but its strength shows on projects where:

• Multiple people contribute to UI or decks
• Consistency and scalability matter
• You expect to iterate on brand or product over time

For a one-off landing page or a single internal presentation, the full system may be more structure than you need. You can still borrow the token architecture or slide formulas as lightweight guidance.

How do I see everything that’s included in the skill?

In your skills browser or file explorer, look at the full tree for the design-system skill, especially:

• SKILL.md
• data/
• references/
• scripts/
• templates/design-tokens-starter.json

This will show all nested references and helper scripts so you can decide which pieces to integrate into your own workflow.