Sistema de Diseño
Arquitectura de tokens, especificaciones de componentes, diseño sistemático, generación de diapositivas.
Cuándo Usar
- Creación de tokens de diseño
- Definición de estados de componentes
- Sistemas de variables CSS
- Escalas de espaciado/tipografía
- Handoff de diseño a código
- Configuración de temas para Tailwind
- Generación de diapositivas/presentaciones
Arquitectura de Tokens
Cargar: references/token-architecture.md
Estructura de Tres Capas
Primitivo (valores brutos)
↓
Semántico (alias de propósito)
↓
Componente (específico del componente)
Ejemplo:
/* Primitivo */
--color-blue-600: #2563EB;
/* Semántico */
--color-primary: var(--color-blue-600);
/* Componente */
--button-bg: var(--color-primary);
Inicio Rápido
Generar tokens:
node scripts/generate-tokens.cjs --config tokens.json -o tokens.css
Validar uso:
node scripts/validate-tokens.cjs --dir src/
Referencias
| Tema | Archivo |
|---|---|
| Arquitectura de Tokens | references/token-architecture.md |
| Tokens Primitivos | references/primitive-tokens.md |
| Tokens Semánticos | references/semantic-tokens.md |
| Tokens de Componente | references/component-tokens.md |
| Especificaciones de Componentes | references/component-specs.md |
| Estados y Variantes | references/states-and-variants.md |
| Integración con Tailwind | references/tailwind-integration.md |
Patrón de Especificación de Componentes
| Propiedad | Por Defecto | Hover | Activo | Deshabilitado |
|---|---|---|---|---|
| Fondo | primary | primary-dark | primary-darker | muted |
| Texto | white | white | white | muted-fg |
| Borde | none | none | none | muted-border |
| Sombra | sm | md | none | none |
Scripts
| Script | Propósito |
|---|---|
generate-tokens.cjs | Generar CSS a partir de configuración JSON de tokens |
validate-tokens.cjs | Verificar valores hardcodeados en el código |
search-slides.py | Búsqueda BM25 + recomendaciones contextuales |
slide-token-validator.py | Validar HTML de diapositivas para cumplimiento de tokens |
fetch-background.py | Obtener imágenes de Pexels/Unsplash |
Plantillas
| Plantilla | Propósito |
|---|---|
design-tokens-starter.json | JSON inicial con estructura de tres capas |
Integración
Con la marca: Extraer primitivos de colores/tipografía de la marca Con ui-styling: Tokens de componente → Configuración de Tailwind
Dependencias del Skill: brand, ui-styling Agentes Principales: ui-ux-designer, frontend-developer
Sistema de Diapositivas
Presentaciones alineadas con la marca usando tokens de diseño + Chart.js + sistema de decisión contextual.
Fuente de Verdad
| Archivo | Propósito |
|---|---|
docs/brand-guidelines.md | Identidad, voz y colores de la marca |
assets/design-tokens.json | Definiciones de tokens (primitivo→semántico→componente) |
assets/design-tokens.css | Variables CSS (importar en diapositivas) |
assets/css/slide-animations.css | Biblioteca de animaciones CSS |
Búsqueda de Diapositivas (BM25)
# Búsqueda básica (detección automática de dominio)
python scripts/search-slides.py "investor pitch"
# Búsqueda específica por dominio
python scripts/search-slides.py "problem agitation" -d copy
python scripts/search-slides.py "revenue growth" -d chart
# Búsqueda contextual (Sistema Premium)
python scripts/search-slides.py "problem slide" --context --position 2 --total 9
python scripts/search-slides.py "cta" --context --position 9 --prev-emotion frustration
CSVs del Sistema de Decisión
| Archivo | Propósito |
|---|---|
data/slide-strategies.csv | 15 estructuras de presentación + arcos emocionales + beats de sparkline |
data/slide-layouts.csv | 25 diseños + variantes de componentes + animaciones |
data/slide-layout-logic.csv | Objetivo → Diseño + flag break_pattern |
data/slide-typography.csv | Tipo de contenido → Escala tipográfica |
data/slide-color-logic.csv | Emoción → Tratamiento de color |
data/slide-backgrounds.csv | Tipo de diapositiva → Categoría de imagen (Pexels/Unsplash) |
data/slide-copy.csv | 25 fórmulas de copywriting (PAS, AIDA, FAB) |
data/slide-charts.csv | 25 tipos de gráficos con configuración de Chart.js |
Flujo de Decisión Contextual
1. Analizar objetivo/contexto
↓
2. Buscar en slide-strategies.csv → Obtener estrategia + beats emocionales
↓
3. Para cada diapositiva:
a. Consultar slide-layout-logic.csv → diseño + break_pattern
b. Consultar slide-typography.csv → escala tipográfica
c. Consultar slide-color-logic.csv → tratamiento de color
d. Consultar slide-backgrounds.csv → imagen si es necesario
e. Aplicar clase de animación desde slide-animations.css
↓
4. Generar HTML con tokens de diseño
↓
5. Validar con slide-token-validator.py
Ruptura de Patrón (Duarte Sparkline)
Las presentaciones premium alternan emociones para mantener el compromiso:
"Lo Que Es" (frustración) ↔ "Lo Que Podría Ser" (esperanza)
El sistema calcula rupturas de patrón en las posiciones 1/3 y 2/3.
Requisitos de Diapositivas
TODAS las diapositivas DEBEN:
- Importar
assets/design-tokens.css- fuente única de verdad - Usar variables CSS:
var(--color-primary),var(--slide-bg), etc. - Usar Chart.js para gráficos (NO barras solo con CSS)
- Incluir navegación (flechas de teclado, clic, barra de progreso)
- Centrar contenido
- Enfocarse en persuasión/conversión
Integración con Chart.js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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', // Usar coral de la marca
backgroundColor: 'rgba(255, 107, 107, 0.1)',
fill: true,
tension: 0.4
}]
}
});
</script>
Cumplimiento de Tokens
/* CORRECTO - usa token */
background: var(--slide-bg);
color: var(--color-primary);
font-family: var(--typography-font-heading);
/* INCORRECTO - hardcodeado */
background: #0D0D0D;
color: #FF6B6B;
font-family: 'Space Grotesk';
Implementación de Referencia
Ejemplo funcional con todas las características:
assets/designs/slides/claudekit-pitch-251223.html
Comando
/slides:create "10-slide investor pitch for ClaudeKit Marketing"
Buenas Prácticas
- Nunca usar hex brutos en componentes - siempre referenciar tokens
- La capa semántica permite cambio de tema (claro/oscuro)
- Los tokens de componente permiten personalización por componente
- Usar formato HSL para control de opacidad
- Documentar el propósito de cada token
- Las diapositivas deben importar design-tokens.css y usar var() exclusivamente