# Design System

> Arquitectura de tokens en tres capas (primitivo→semántico→componente), variables CSS, escalas de espaciado/tipografía, specs de componentes y generación estratégica de slides con marca.

Fuente: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system
Markdown: https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design-system.md

Repositorio: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Autor: nextlevelbuilder
Licencia: MIT
Actualizado: hace 23 días
Coste de contexto: 70 tok instalada, 1.9k tok al activarse, 45.7k tok con todos los archivos del bundle
Bundle: 27 archivos, 178 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent claude-code
# Cursor
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent cursor
# Codex
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent codex
# Gemini CLI
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent gemini
# Windsurf
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent windsurf
# Cline
npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill design-system --agent cline
```

## Qué hace

- Genera y valida sistemas de tokens de diseño en tres capas: primitivo → semántico → componente, con salida CSS
- Define especificaciones de componentes (estados hover/active/disabled) y escalas de tipografía/espaciado
- Genera presentaciones (slides) con tokens de marca, Chart.js y un sistema de decisión contextual basado en CSVs
- Busca slides por relevancia (BM25) y valida el cumplimiento de tokens en HTML de slides
- Integra los tokens con configuraciones de Tailwind

## Cuándo usarla

- 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 de theme de Tailwind
- Generación de slides/presentaciones

## Qué la activa

- "Genera los design tokens para mi proyecto a partir de tokens.json"
- "Valida si src/ tiene valores hardcodeados en vez de tokens"
- "Crea una presentación de 10 slides para un pitch de inversores"
- "Busca layouts de slide para 'revenue growth' en el dominio chart"

## Antes de instalar

- Requiere Node.js para los scripts .cjs y Python para los scripts de slides, además de docs/brand-guidelines.md y assets/design-tokens.json como fuentes de verdad.
- Necesita en el PATH: node, python
- Variables de entorno: DESIGN_SYSTEM_PROJECT_ROOT, JSON
- makes network requests
- reads environment config

## Archivos

- 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 — 3 KB
- scripts/fetch-background.py — 13 KB
- scripts/generate-slide.py — 28 KB
- scripts/generate-tokens.cjs — 5 KB
- scripts/html-token-validator.py — 13 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

Reproducido tal cual desde nextlevelbuilder/ui-ux-pro-max-skill bajo MIT. Esta sección es el documento original y está en inglés.

# 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);
```

## Script Paths

Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.

## 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**

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [nextlevelbuilder](https://skillsagentes.com/creators/nextlevelbuilder.md) — 7 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Ui Ux Pro Max](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-ux-pro-max.md): Inteligencia de diseño UI/UX para web, móvil y escritorio: úsala al diseñar, construir, revisar o corregir interfaces, componentes, accesibilidad, interacción, layout y tipografía.
- [Design](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/design.md): Skill de diseño integral: identidad de marca, tokens de diseño, estilos UI, generación de logos (55 estilos, Gemini, Atlas Cloud o MuAPI), CIP, presentaciones HTML, banners, iconos y fotos sociales.
- [Ui Styling](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/ui-styling.md): Crea interfaces bellas y accesibles con componentes shadcn/ui (sobre Radix UI + Tailwind), estilos utility-first de Tailwind CSS y diseños visuales basados en canvas.
- [Brand](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/brand.md): Voz de marca, identidad visual, frameworks de mensajería y gestión de assets para contenido de marca, tono, materiales de marketing y cumplimiento de estilo.
- [Slides](https://skillsagentes.com/skills/nextlevelbuilder/ui-ux-pro-max-skill/slides.md): Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)