Design System

Three-layer token system (primitive to semantic to component) plus a full slide generation engine. You get scripts to generate CSS variables from JSON, validate token usage across your codebase, and BM25 search through 25+ slide layouts with contextual recommendations. The slide system is interesting: it uses CSV decision tables to match layouts to goals, applies Duarte sparkline beats for pacing, and enforces token compliance so everything stays brand-consistent. Includes Chart.js integration and a working pitch deck reference. Overkill if you just need design tokens, but the strategic slide generation with emotion arcs and pattern breaking is uncommonly thoughtful for a design system.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 11
skills.sh installs: 50.5K
GitHub stars: 147.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent claude-code

Installs into .claude/skills of the current project.

Files

Design System

Token architecture, component specifications, systematic design, slide generation.

When to Use

Design token creation
Component state definitions
CSS variable systems
Spacing/typography scales
Design-to-code handoff
Tailwind theme configuration
Slide/presentation generation

Token Architecture

Load: references/token-architecture.md

Three-Layer Structure

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

Example:

/* Primitive */
--color-blue-600: #2563EB;

/* Semantic */
--color-primary: var(--color-blue-600);

/* Component */
--button-bg: var(--color-primary);