¿Qué hace slides?
Sistema de diseño para presentaciones. Se aplica a todos los decks: internos, de clientes o públicos.
Los valores de paleta, tipografía y logotipo que se indican a continuación son valores por defecto. Si el proyecto tiene su propia guía de estilo, léela primero (paleta, logotipo, tipografías) y reemplaza estos valores: los diseños, las reglas y la estructura narrativa siguen siendo los mismos.
Tres skills se combinan para producir una presentación:
brand-systemproporciona la identidad (paleta, tipografía, degradado, logotipo, tono). Si está instalada, léela primero: sus tokens reemplazan los valores por defecto que se indican a continuación.slides(esta) proporciona la estructura narrativa y los quince diseños.pptx(skill de Anthropic, que debe instalarse por separado) proporciona la generación técnica del archivo. Léela para la creación del.pptx.
1. Tokens de diseño
Paleta principal
| Rol | Hex | Uso en diapositivas |
|---|---|---|
| Azul logotipo | #295FEC | Solo logotipo |
| Azul primario | #3D65E8 | Acentos, subtítulos, CTA, borde superior, puntos de timeline |
| Fondo off-white (degradado) | #F8F9FB | Fondo base para diapositivas con degradado |
| Fondo claro de contenido | #EBEFF7 | Diapositivas de transición, fondo alternativo |
| Superficie / tarjeta | #FFFFFF | Bloques de contenido, tarjetas |
| Bloque de superficie clara | #F0F2F7 | Tarjetas en cuadrículas de 3-6 bloques |
| Texto principal | #111827 | Títulos, cuerpo |
| Texto atenuado | #6B7280 | Etiquetas, leyendas, pie de página |
Degradado de fondo (azul suave)
Aplicado en diapositivas de fondo claro, portadas ligeras y diapositivas de título:
- En PPTX: fondo de diapositiva #F8F9FB, relleno de degradado radial, esquina superior derecha, color #B4D7F5 opacidad 55% hacia transparente.
- Variante simétrica (decks largos): degradado también en la esquina inferior izquierda, #B4D7F5 opacidad 25%.
- El degradado siempre es suave y sutil. Nunca tiene saturación fuerte. Debe pasar desapercibido a simple vista.
Tipografía
| Uso | Fuente | Peso | Tamaño indicativo |
|---|---|---|---|
| Título de diapositiva | Inter | Black 900 o ExtraBold 800 | 36-56pt |
| Título hero (título grande) | Inter | Black 900 | 72-96pt |
| Subtítulo / titular | Inter | SemiBold 600 | 20-24pt |
| Antetítulo / etiqueta de sección | Inter | SemiBold 600 | 10-12pt, mayúsculas, #3D65E8 |
| Cuerpo de texto | Inter | Regular 400 | 14-16pt |
| Etiqueta / metadato | Inter | Regular 400 | 10-12pt, atenuado |
Alternativa: Public Sans (https://fonts.google.com/specimen/Public+Sans). Alternativas del sistema: Geist, SF Pro, Helvetica Neue. Nunca usar serifa.
Iconos
Phosphor Icons (https://phosphoricons.com/) o Lucide (https://lucide.dev/). Regular o Light. Nada de emojis.
2. Logotipo en las diapositivas
Recursos: el símbolo y el logotipo (símbolo + nombre) de la marca del proyecto, en SVG o PNG. Esta skill no incluye ningún logotipo.
Colocación estándar
- Portada (fondo de color primario): logotipo en la parte superior izquierda, altura 36-40px, versión blanca si existe; de lo contrario, solo el símbolo.
- Diapositivas de contenido (fondo claro): pie de página inferior izquierdo, símbolo circular de 20px
- nombre en Inter Regular 10pt atenuado #6B7280.
- Diapositivas de transición: el mismo pie de página o sin logotipo (minimalista).
Estructura del pie de página estándar
[Símbolo 20px] Nombre correo electrónico | sitio | LinkedIn [Nº]
Pie de página alineado con la línea de base, tipografía 10pt atenuada. Separador | entre los elementos de contacto. Número de diapositiva alineado a la derecha.
3. Catálogo de diseños
Hoja de referencia: references/mises-en-page.png (y .svg) muestra los quince diseños uno al lado del otro, numerados como se indica a continuación. Mírala antes de elegir un diseño, luego lee su ficha.
Regla universal
Una idea por diapositiva. Espacio en blanco generoso. Un elemento dominante. Relación texto/visual: máximo 60% de texto. Títulos afirmativos y específicos.
DISEÑO 01 — Portada
Estructura:
- Fondo: azul #3D65E8 o fondo degradado off-white según el tono del deck
- Logotipo wordmark en la parte superior izquierda
- Antetítulo (cliente o contexto): mayúsculas, Inter SemiBold 12pt, blanco o azul
- Título principal: Inter Black 900, 48-56pt, blanco o #111827, máximo 2 líneas
- Subtítulo o eslogan: Regular 18pt, atenuado o blanco 70%
- Pie de página: datos de contacto (correo electrónico, sitio, LinkedIn), 10pt, parte inferior izquierda
Variante de fondo degradado (decks conceptuales): fondo #F8F9FB + degradado radial en la esquina superior derecha, título en #111827, acento en #3D65E8.
DISEÑO 02 — Título grande (sección, transición, idea contundente)
Estructura:
- Fondo: #EBEFF7 o degradado off-white
- Línea de borde superior: 3px sólido #3D65E8, ancho completo
- Solo título: Inter Black 900, 56-72pt, #111827, alineado a la izquierda, 40% de la altura
- Subtítulo opcional: SemiBold 600, 20pt, atenuado
- Pie de página con logotipo minimalista
Uso: apertura de capítulo, enunciado de problema, estadística impactante.
DISEÑO 03 — Idea grande (una frase, pantalla completa)
Estructura:
- Fondo blanco puro #FFFFFF o degradado
- Una sola frase, Inter Black 900, 64-96pt
- Palabras clave coloreadas en #3D65E8 (selectivo, máximo 1-2 palabras)
- Ningún otro elemento excepto un pie de página discreto
- Alineación: izquierda o centrada según el ritmo del deck
Uso: pitch, keynote, momento de ruptura narrativa.
DISEÑO 04 — Título + cuerpo (estándar)
Estructura:
- Fondo #F8F9FB con degradado o #EBEFF7
- Antetítulo en mayúsculas azul 11pt en la parte superior izquierda
- Título: Inter Black 900, 36-44pt
- Cuerpo: 2-4 párrafos o viñetas, Regular 400, 14-16pt
- Margen generoso a la derecha (al menos el 15% del ancho)
- Pie de página con logotipo
DISEÑO 05 — Mitad texto / mitad contenido multimedia
Estructura:
- Fondo: #F8F9FB degradado
- Columna izquierda (50%): título + cuerpo o viñetas, alineado a la izquierda
- Columna derecha (50%): imagen, captura de pantalla, maqueta o diagrama
- Separación: solo espacio en blanco (sin línea, sin fondo diferente)
- Imagen derecha: bordes redondeados 12-16px, sombra suave
Uso: presentar una interfaz, un caso, una comparación visual.
DISEÑO 06 — 1/3 texto + 2/3 maqueta de dispositivo
Estructura:
- Fondo: #F8F9FB degradado
- Columna izquierda (33%): antetítulo + título + 2-3 puntos clave o descripción breve
- Columna derecha (67%): maqueta de dispositivo (iPad, Mac, iPhone) con la interfaz de usuario en su interior
- Maqueta: marco fino #F0F2F7, bordes muy redondeados para móvil, rectángulo para Mac/iPad
- La interfaz en el interior es una captura de pantalla real o una maqueta fiel
- El dispositivo puede sobresalir ligeramente de los márgenes (sangrado sutil)
Uso: presentación de concepto de producto, prototipo, nueva funcionalidad.
DISEÑO 07 — 3 columnas
Estructura:
- Fondo: #F8F9FB degradado o #FFFFFF
- Título de diapositiva en la parte superior izquierda
- 3 columnas iguales, espacio 24-32px
- Cada columna: título SemiBold + contenido + enlace o etiqueta en la parte inferior
- Superficie de la columna: #F0F2F7, border-radius 12px, padding generoso
- Sin borde marcado entre columnas
Uso: 3 conceptos, 3 opciones, 3 casos, comparación de 3 herramientas.
DISEÑO 08 — 3 bloques
Idéntico al DISEÑO 07 pero en organización vertical o con una línea de jerarquía más marcada. Superficie de bloque más grande, contenido más denso por bloque posible.
DISEÑO 09 — 4 bloques (2×2)
Estructura:
- Fondo: #F8F9FB degradado
- Título de diapositiva en la parte superior izquierda
- Cuadrícula 2×2, espacio 20px
- Cada bloque: superficie #F0F2F7, border-radius 12px, título SemiBold + cuerpo Regular
- Ancho y alto de los bloques iguales
Uso: 4 servicios, 4 pasos, 4 puntos clave.
DISEÑO 10 — 6 bloques (2×3 o 3×2)
Estructura:
- Fondo: #FFFFFF o #F8F9FB
- Título de diapositiva en la parte superior izquierda, subtítulo descriptivo opcional
- Cuadrícula de 3 columnas × 2 filas o 2 columnas × 3 filas según el contenido
- Bloques: superficie #F0F2F7, border-radius 12px, título SemiBold 14pt + cuerpo Regular 12pt
- Etiqueta o tag contextual en la parte inferior de cada bloque, en azul #3D65E8 sobre fondo ligeramente más saturado (#E8EEF8)
Uso: caja de herramientas, métodos, funcionalidades, competencias.
DISEÑO 11 — Línea de tiempo
Estructura:
- Fondo: #FFFFFF con línea de borde superior azul de 3px
- Título en la parte superior izquierda, subtítulo descriptivo 14pt atenuado
- Eje vertical izquierdo: línea fina #E5E7EB
- Cada entrada: fecha/año en atenuado a la izquierda + punto azul #3D65E8 (12px) + título Bold + subtítulo Regular + detalle en cursiva atenuada
- Espaciado vertical generoso entre entradas (no comprimir)
Uso: trayectoria, historial de proyecto, hoja de ruta pasado/presente.
DISEÑO 12 — Hoja de ruta
Estructura:
- Fondo: #F8F9FB degradado
- Título en la parte superior izquierda
- Eje horizontal: línea #E5E7EB con marcadores o bloques por período
- Períodos: T1/T2... o Mes 1/2... o Fase 1/2...
- Bloques de elementos: superficie #FFFFFF o #F0F2F7, border-radius 8px, título + etiqueta de estado
- Estados: color de punto o insignia (azul = en curso, verde = entregado, gris = pendiente)
- Pie de página con logotipo
Uso: planificación de misión, hoja de ruta de producto, hitos.
DISEÑO 13 — Tabla
Estructura:
- Fondo: #FFFFFF o #F8F9FB
- Título en la parte superior izquierda
- Encabezados de columna: fondo #3D65E8, texto blanco, Inter SemiBold 12pt
- Filas alternadas: #FFFFFF / #F0F2F7 para facilitar la lectura
- Celdas: Regular 400, 13pt, padding 12px
- Sin bordes gruesos. Solo separadores horizontales finos #E5E7EB.
DISEÑO 14 — Visual a ancho completo / alto completo
Estructura:
- La imagen o captura de pantalla cubre el 100% del fondo de la diapositiva (sangrado total)
- Superposición de degradado oscuro o claro según el contenido que se muestre encima
- Título en superposición: Inter Black 900, blanco o #111827, parte inferior izquierda o centrado en la parte inferior
- Sin elementos cromados de diapositiva visibles (sin fondo, sin borde, sin pie de página excepto número de página discreto)
Uso: transiciones dramáticas, introducción de sección, portafolio, capturas de pantalla hero.
DISEÑO 15 — Maqueta de dispositivo + interfaz de usuario a ancho completo
Estructura:
- Fondo: #F8F9FB degradado
- Dispositivo (Mac, iPad, iPhone) centrado o ligeramente desplazado a la derecha, 70-80% de la altura
- La interfaz de usuario en el interior: captura de pantalla real o maqueta de alta fidelidad
- Título o etiqueta flotante a la izquierda: Inter SemiBold 20pt, #111827
- Sombra proyectada debajo del dispositivo: suave, opacidad 15-20%
- Sin marco adicional alrededor del dispositivo
Uso: concepto hero, showcase de producto, prototipo a resolución completa.
Convenciones para maquetas de dispositivos:
- iPhone: marco fino antracita o blanco, esquinas muy redondeadas
- iPad: marco fino de aluminio, orientación vertical u horizontal según el contenido
- MacBook: marco de aluminio abierto, pantalla centrada, base discreta
- Mantener las proporciones del fabricante
4. Principios de diseño
- Título dominante por diapositiva: el lector entiende la idea sin leer el cuerpo.
- Espacio en blanco generoso: nunca llenar más del 70% de la superficie.
- Jerarquía fuerte: un solo elemento de «primera mirada» por diapositiva.
- Fondo blanco puro #FFFFFF como fondo global del deck: prohibido. Preferir #F8F9FB.
- Texto centrado en diapositivas de contenido: prohibido (centrado solo en la portada y en el DISEÑO 03 Idea grande).
- Mezcla de fuentes: prohibido.
- Línea decorativa debajo de los títulos: prohibido.
- Mismo diseño repetido más de 3 diapositivas consecutivas: evitar.
5. Diapositivas de estructura
| Tipo | Fondo | Texto | Diseño |
|---|---|---|---|
| Portada | #3D65E8 o degradado #F8F9FB | Blanco o #111827 | DISEÑO 01 |
| Transición / capítulo | #EBEFF7 + borde superior | #111827 | DISEÑO 02 |
| Contenido estándar | #F8F9FB degradado | #111827 | DISEÑO 04 a 15 |
| Idea grande | #FFFFFF o degradado | #111827 + acento azul | DISEÑO 03 |
| Conclusión / CTA | #3D65E8 | Blanco | DISEÑO 01 variante |
Estructura recomendada (sándwich): portada con fondo azul, diapositivas de contenido claras con degradado, conclusión con fondo azul.
6. Convenciones narrativas
Arco del deck
- Situación actual (anclaje en la realidad del cliente)
- Tensión o problema identificado
- Ángulo de intervención y mecanismo
- Entregables, hitos o solución propuesta
- Siguiente paso concreto
Títulos de diapositivas
- Específicos y afirmativos: «Las pruebas revelan 3 puntos de fricción críticos», no «Resultados de las pruebas».
- El lector que solo lea los títulos debe entender la lógica del deck.
- Prohibidos: «Introducción», «Contexto», «Conclusión», «Resumen».
Datos y métricas
- Llamada de estadística centrada: cifra muy grande, etiqueta pequeña debajo.
- Cada métrica acompañada de su contexto (antes/después, período, fuente).
- No incluir tablas sin procesar sin visualización o comentario.
7. Configuraciones de decks
Deck comercial / propuesta para cliente
- Portada: fondo azul #3D65E8, título de misión, nombre del cliente
- 8-12 diapositivas como máximo
- Sin diapositiva de resumen
- Cierre con un próximo paso concreto (fecha, acción, contacto)
Deck de caso / caso de estudio
- Portada: fondo azul #3D65E8 + título + año
- Estructura: contexto, decisiones, resultados, aprendizajes
- Llamadas de estadística para métricas clave
- Capturas de pantalla a ancho completo en diapositivas dedicadas (DISEÑO 14 o 15)
Deck de formación UX / diseño
- Capítulos con diapositivas de transición (DISEÑO 02)
- Ejercicios visualmente diferenciados (fondo ligeramente diferente)
- Línea de tiempo de la sesión en la diapositiva de apertura
- Un concepto por diapositiva, ilustración sistemática
Pitch / keynote
- Máximo 10 diapositivas
- Una estadística o idea contundente por diapositiva
- Sin viñetas: solo narración visual
- Ideas grandes (DISEÑO 03) intercaladas con imágenes (DISEÑO 14 o 15)
8. Antipatrones a evitar
- Viñetas densas sobre fondo blanco sin estructura visual
- Texto centrado en diapositivas de contenido
- Mezcla de fuentes
- Iconos emoji
- Línea decorativa debajo de los títulos (firma de IA genérica)
- Mismo diseño repetido en más de 3 diapositivas consecutivas
- Fondo blanco puro #FFFFFF como fondo global
- Degradado demasiado saturado o visible a simple vista
9. Verificación antes de la entrega
- Logotipo presente: logotipo en la portada, símbolo en el pie de página de las diapositivas de contenido.
- Paleta conforme a la guía de estilo del proyecto (por defecto: #295FEC para el logotipo, #3D65E8 para los acentos, #F8F9FB para el fondo).
- Degradado aplicado en las diapositivas de fondo claro.
- Tipografía Inter únicamente, jerarquía de pesos respetada.
- Un elemento dominante por diapositiva, espacio en blanco respetado.
- Títulos afirmativos y específicos.
- Arco narrativo legible leyendo solo los títulos.
- Cero emojis, cero rayas, cero líneas decorativas debajo de los títulos.
- Sin mezcla de fuentes, sin texto centrado en diapositivas de contenido.
- Diseño variado cada 3 diapositivas como máximo.
10. Ejemplo de flujo de trabajo con IA
- El usuario pide: «Crea un deck de 10 diapositivas para presentar nuestra nueva funcionalidad de IA a los clientes».
- La skill
brand-systemse lee primero para obtener los colores, la tipografía y el logotipo correctos. - La skill
slidesselecciona: portada (DISEÑO 01), 2 diapositivas de problema (DISEÑO 02 o 03), 4 diapositivas de solución (DISEÑO 05, 06, 07), 2 diapositivas de resultados (DISEÑO 11 o 13) y 1 diapositiva de CTA (DISEÑO 01 variante). - La skill
pptxgenera el archivo.pptxcon las dimensiones, los fondos y las imágenes reales.
Skill diseñada para Claude Code, Cursor, Codex y agentes de IA similares. Combinar con brand-system y pptx para una presentación completa.
[Final del documento]