VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Marketing Kit

/ak:design-system

Token architecture and slide system

Builds three-layer design tokens, CSS variables, component specs, Tailwind handoff, and brand-compliant slide presentations with token validation.

01

Identify surface

02

Load token architecture

03

Generate CSS

04

Specify components

Rule 01

Primitive → semantic → component tokens keep design flexible and themeable.

Rule 02

Generated CSS variables are the single source of truth for implementation and slides.

Rule 03

Slides are persuasion systems: strategy, emotion, copy, layout, charting, animation, and navigation must work together.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Identify surface Decide whether the request is tokens, component specs, Tailwind handoff, or slide generation.
  2. 2 Load token architecture Use the three-layer structure: primitive raw values, semantic purpose aliases, then component-specific tokens.
02

Work

Agent / skill execution

  1. 3 Generate CSS Generate CSS variables from token JSON so components and slides share one source of truth.
  2. 4 Specify components Document default, hover, active, disabled, border, shadow, text, and background behavior.
03

Verify

Gate, review, validation

  1. 5 Plan slides For decks, search slide strategies to pick structure, emotion beats, and Duarte-style pattern breaks.
  2. 6 Resolve each slide For each slide, query layout logic, typography, color emotion, background need, copy formula, chart type, and animation.
04

Close

Report, handoff, artifact

  1. 7 Build HTML Generate brand-compliant HTML that imports token CSS, uses var() values, includes Chart.js when charting, and supports navigation.
  2. 8 Validate tokens Run the slide token validator or token validator to catch hardcoded values and non-compliant slides.

Don't skip the required step

Each item contrasts a tempting shortcut with the required approach.

Tempting shortcut

A hardcoded hex is fine for one slide.

Do this instead

Token compliance requires CSS variables as the single source of truth.

Tempting shortcut

CSS-only bars are simpler than a chart library.

Do this instead

The slide requirements explicitly require Chart.js for charts.

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Token system Recommended 
/ak:design-system button tokens for SaaS dashboard
Use when:
Use when component styling needs reusable token layers.
Expected:
Primitive, semantic, and component token guidance with state specs.
CSS variables 
/ak:design-system CSS variables for brand colors and typography
Use when:
Use when a design system needs implementation-ready variables.
Expected:
Token-to-CSS variable structure and validation approach.
Slide deck 
/ak:design-system 10-slide investor pitch for AgentKit Marketing
Use when:
Use when presentation generation must stay brand-compliant and persuasive.
Expected:
Strategy, emotion arc, layouts, token-compliant HTML, Chart.js charts, and navigation.

Handled Scope

  • Primitive tokens
  • Semantic tokens
  • Component tokens
  • CSS variables
  • Component states
  • Tailwind integration
  • Slide strategies
  • Chart.js decks
  • Token validation

Related skills

Next