# Design System

> Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.

Source: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system
Repository: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Author: nextlevelbuilder
License: MIT
Updated: el mes pasado
Context cost: 70 tok installed, 1.7k tok once triggered, 44.8k tok with every bundled file
Bundle: 27 files, 175 KB
Permissions requested: none declared

## Install

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

## What it does

- Genera y valida un sistema de tokens de diseño en tres capas (primitivo→semántico→componente) con CSS variables
- Crea especificaciones de componentes con estados (default, hover, active, disabled)
- Genera presentaciones (slides) brand-compliant usando tokens de diseño, Chart.js y un sistema de decisión contextual
- Busca layouts, tipografía, color y fondos de slides mediante CSVs y búsqueda BM25

## Use it when

- Creación de tokens de diseño y sistemas de variables CSS
- Definición de estados de componentes y escalas de espaciado/tipografía
- Handoff de diseño a código o configuración del tema de Tailwind
- Generación de slides/presentaciones

## What triggers it

- "Genera los design tokens a partir de tokens.json"
- "Valida que no haya valores hardcodeados en src/"
- "Crea un deck de 10 slides para un pitch de inversores"
- "Busca slides sobre 'revenue growth' en la categoría de gráficos"

## Before you install

- Requiere Node.js para los scripts .cjs y Python para search-slides.py, slide-token-validator.py y fetch-background.py; depende de las skills brand y ui-styling.
- Needs on PATH: node, python
- Environment: JSON

## Files

- SKILL.md — 7 KB
- data/slide-backgrounds.csv — 1 KB
- data/slide-charts.csv — 8 KB
- data/slide-color-logic.csv — 877 B
- data/slide-copy.csv — 6 KB
- data/slide-layout-logic.csv — 981 B
- data/slide-layouts.csv — 9 KB
- data/slide-strategies.csv — 8 KB
- data/slide-typography.csv — 735 B
- references/component-specs.md — 7 KB
- references/component-tokens.md — 5 KB
- references/primitive-tokens.md — 4 KB
- references/semantic-tokens.md — 4 KB
- references/states-and-variants.md — 5 KB
- references/tailwind-integration.md — 6 KB
- references/token-architecture.md — 5 KB
- scripts/embed-tokens.cjs — 2 KB
- scripts/fetch-background.py — 12 KB
- scripts/generate-slide.py — 28 KB
- scripts/generate-tokens.cjs — 5 KB
- scripts/html-token-validator.py — 12 KB
- scripts/search-slides.py — 9 KB
- scripts/slide-token-validator.py — 973 B
- scripts/slide_search_core.py — 14 KB
- scripts/tests/test_validate_tokens.py — 2 KB
- scripts/validate-tokens.cjs — 6 KB
- templates/design-tokens-starter.json — 7 KB

## SKILL.md

Reproduced verbatim from nextlevelbuilder/ui-ux-pro-max-skill under MIT. This section is the upstream document and is in English.

# 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:**
```css
/* Primitive */
--color-blue-600: #2563EB;

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

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

## Quick Start

**Generate tokens:**
```bash
node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
```

**Validate usage:**
```bash
node scripts/validate-tokens.cjs --dir src/
```

## References

| Topic | File |
|-------|------|
| Token Architecture | `references/token-architecture.md` |
| Primitive Tokens | `references/primitive-tokens.md` |
| Semantic Tokens | `references/semantic-tokens.md` |
| Component Tokens | `references/component-tokens.md` |
| Component Specs | `references/component-specs.md` |
| States & Variants | `references/states-and-variants.md` |
| Tailwind Integration | `references/tailwind-integration.md` |

## Component Spec Pattern

| Property | Default | Hover | Active | Disabled |
|----------|---------|-------|--------|----------|
| Background | primary | primary-dark | primary-darker | muted |
| Text | white | white | white | muted-fg |
| Border | none | none | none | muted-border |
| Shadow | sm | md | none | none |

## Scripts

| Script | Purpose |
|--------|---------|
| `generate-tokens.cjs` | Generate CSS from JSON token config |
| `validate-tokens.cjs` | Check for hardcoded values in code |
| `search-slides.py` | BM25 search + contextual recommendations |
| `slide-token-validator.py` | Validate slide HTML for token compliance |
| `fetch-background.py` | Fetch images from Pexels/Unsplash |

## Templates

| Template | Purpose |
|----------|---------|
| `design-tokens-starter.json` | Starter JSON with three-layer structure |

## Integration

**With brand:** Extract primitives from brand colors/typography
**With ui-styling:** Component tokens → Tailwind config

**Skill Dependencies:** brand, ui-styling
**Primary Agents:** ui-ux-designer, frontend-developer

## Slide System

Brand-compliant presentations using design tokens + Chart.js + contextual decision system.

### Source of Truth

| File | Purpose |
|------|---------|
| `docs/brand-guidelines.md` | Brand identity, voice, colors |
| `assets/design-tokens.json` | Token definitions (primitive→semantic→component) |
| `assets/design-tokens.css` | CSS variables (import in slides) |
| `assets/css/slide-animations.css` | CSS animation library |

### Slide Search (BM25)

```bash
# Basic search (auto-detect domain)
python scripts/search-slides.py "investor pitch"

# Domain-specific search
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart

# Contextual search (Premium System)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration
```

### Decision System CSVs

| File | Purpose |
|------|---------|
| `data/slide-strategies.csv` | 15 deck structures + emotion arcs + sparkline beats |
| `data/slide-layouts.csv` | 25 layouts + component variants + animations |
| `data/slide-layout-logic.csv` | Goal → Layout + break_pattern flag |
| `data/slide-typography.csv` | Content type → Typography scale |
| `data/slide-color-logic.csv` | Emotion → Color treatment |
| `data/slide-backgrounds.csv` | Slide type → Image category (Pexels/Unsplash) |
| `data/slide-copy.csv` | 25 copywriting formulas (PAS, AIDA, FAB) |
| `data/slide-charts.csv` | 25 chart types with Chart.js config |

### Contextual Decision Flow

```
1. Parse goal/context
        ↓
2. Search slide-strategies.csv → Get strategy + emotion beats
        ↓
3. For each slide:
   a. Query slide-layout-logic.csv → layout + break_pattern
   b. Query slide-typography.csv → type scale
   c. Query slide-color-logic.csv → color treatment
   d. Query slide-backgrounds.csv → image if needed
   e. Apply animation class from slide-animations.css
        ↓
4. Generate HTML with design tokens
        ↓
5. Validate with slide-token-validator.py
```

### Pattern Breaking (Duarte Sparkline)

Premium decks alternate between emotions for engagement:
```
"What Is" (frustration) ↔ "What Could Be" (hope)
```

System calculates pattern breaks at 1/3 and 2/3 positions.

### Slide Requirements

**ALL slides MUST:**
1. Import `assets/design-tokens.css` - single source of truth
2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.
3. Use Chart.js for charts (NOT CSS-only bars)
4. Include navigation (keyboard arrows, click, progress bar)
5. Center align content
6. Focus on persuasion/conversion

### Chart.js Integration

```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<canvas id="revenueChart"></canvas>
<script>
new Chart(document.getElementById('revenueChart'), {
    type: 'line',
    data: {
        labels: ['Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [{
            data: [5, 12, 28, 45],
            borderColor: '#FF6B6B',  // Use brand coral
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            fill: true,
            tension: 0.4
        }]
    }
});
</script>
```

### Token Compliance

```css
/* CORRECT - uses token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);

/* WRONG - hardcoded */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';
```

### Reference Implementation

Working example with all features:
```
assets/designs/slides/claudekit-pitch-251223.html
```

### Command

```bash
/slides:create "10-slide investor pitch for ClaudeKit Marketing"
```

## Best Practices

1. Never use raw hex in components - always reference tokens
2. Semantic layer enables theme switching (light/dark)
3. Component tokens enable per-component customization
4. Use HSL format for opacity control
5. Document every token's purpose
6. **Slides must import design-tokens.css and use var() exclusively**

---

Skills Agentes — https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system