1 / 25

Presentaciones
con IA

Cómo hacer slides que no se vean tan malas como las de Gamma

Gamma genera slides.

Bullets disfrazados de cards, gradientes genéricos,
4 layouts que se repiten. El público se da cuenta
al segundo slide.

Agenda

1
El problema con Gamma y cómo solucionarlo
2
El workflow correcto: Idea → Markdown → Slides
3
ChatGPT Codex + portafolio personal
4
GitHub + Vercel → tu web en internet hoy
1

El Problema

Por qué las presentaciones de IA fallan

Gamma vs Diseño con IA
Lineamientos
Prompt Inverso: Sistema de Diseño Referencia
# Este documento describe el sistema de diseño de estas presentaciones # Usalo para replicar el estilo en cualquier proyecto nuevo PALETA DE COLOR Fondo: #000000 negro puro Secundario: #1a1a1a fondos de cards y bloques de código Texto: #ffffff principal · #a0a0a0 secundario y subtítulos Azul iOS: #007AFF acento principal, links, CTA, highlight Verde: #30D158 demos, éxito, ejercicios completados Rojo: #FF453A alerta, problema, slides de stop Amarillo: #FFD60A notas del presentador, highlight secundario Púrpura: #BF5AF2 badges, etiquetas, bloques de prompt TIPOGRAFÍA Sans: -apple-system, 'SF Pro Display', Inter, Roboto — pesos 400 600 700 Mono: 'SF Mono', Menlo, Monaco — bloques de código y prompts únicamente H1: clamp(3rem, 8vw, 6rem) · weight 700 · letter-spacing -0.02em H2: clamp(2rem, 5vw, 3.5rem) · weight 700 Soporte: clamp(1.25rem, 3vw, 1.75rem) · color #a0a0a0 REGLAS DE COPY - Sin emojis nunca. SVG inline con trazos finos cuando se necesite un ícono - Máximo 6 palabras por título de slide - Máximo 30 palabras de texto visible por slide - Verbos fuertes al inicio: Crea, Genera, Conecta, Despliega, Elige MOTION Y ASSETS Videos: Remotion + React + TypeScript · 1920×1080 · 30fps · H.264 CRF 18 SVG: stroke-width 1.5, sin relleno plano, colores del sistema de diseño Entrada: fadeUp 0.5s ease · spring config damping 200 · stagger nth-child LAYOUTS layout-divider número grande semitransparente + h1 + subtitle layout-big-statement h1 centrado + soporte, una idea por slide layout-3lines h2 + hasta 4 líneas numeradas con texto layout-cheatsheet scroll vertical + prompt-block mono layout-video-controls video Remotion a pantalla completa layout-stop stop sign animado, pausa para ejercicio en clase
2

El Workflow

Idea → Markdown → Demo

El Workflow Correcto

Markdown.

El formato que la IA entiende perfectamente
y que se convierte en cualquier cosa.

Sintaxis
Qué es Markdown y por qué importa Referencia

Markdown es texto plano con reglas mínimas de formato. Sin botones, sin clics — escribes estructura y la IA la interpreta sola.

# Título principal

El título del documento o del slide. Solo uno por sección.

# Mi presentación sobre IA

## Sección  /  ### Subsección

Jerarquía de contenido. Cada ## es un bloque nuevo, ### es un detalle dentro.

## Por qué importa ### Caso de uso concreto

--- Separador

Divide secciones o indica un cambio de slide. La IA lo usa como corte visual.

## Sección A --- ## Sección B

Listas y énfasis

Puntos clave con -, negrita con **texto**.

- Punto importante - **Concepto clave** - Detalle adicional
Generar el Markdown con IA
Cheatsheet
Prompt: Generar Outline de Presentación Copiar y ajustar
# Pega esto en Claude o ChatGPT y ajusta los campos Eres un experto en presentaciones técnicas y storytelling. Crea un outline detallado en Markdown para una presentación sobre [tu tema aquí]. Contexto: - Audiencia: [descripción de tu audiencia] - Duración: [X] minutos - Objetivo: que al final el público pueda [acción concreta] - Tono: [profesional / casual / técnico / inspiracional] El outline debe incluir: 1. Un hook poderoso de apertura (no empieces con "hola, soy...") 2. El problema o tensión que la presentación resuelve 3. Los 3-5 bloques principales de contenido 4. Una demo o ejercicio práctico por bloque 5. Un cierre con llamada a la acción clara Para cada slide incluye: - Título corto (máximo 6 palabras) - Idea principal (1 oración) - Sugerencia visual (imagen, video, código, diagrama) - Notas del presentador (si aplica) # Solo el outline. No generes el contenido final todavía.
STOP

Generen su propio markdown ahora

Tu outline en 10 minutos

1
Elige un tema que conozcas bien
2
Copia el prompt, pégalo en Claude o ChatGPT
3
Guarda como presentacion.md y comparte en el canal
3

Codex

El agente de coding de ChatGPT

ChatGPT Codex — Cómo usarlo
Demo en vivo
Prompt para recrear esta presentación Codex
# Prompt inverso — pégalo en Codex para regenerar este proyecto desde cero Crea una presentación web interactiva estilo keynote. Especificaciones: Stack: HTML puro + CSS variables + JavaScript vanilla, un solo archivo auto-contenido Archivo: sesion-4.html · sin dependencias externas · sin frameworks SISTEMA VISUAL --bg-primary: #000000 --accent-blue: #007AFF --bg-secondary: #1a1a1a --accent-green: #30D158 --text-primary: #ffffff --accent-red: #FF453A --text-secondary:#a0a0a0 --accent-purple: #BF5AF2 Sin emojis. SVG inline con stroke-width 1.5 cuando se necesite un ícono NAVEGACIÓN Teclado: flechas, Space, Home, End, F (fullscreen) Touch: swipe izquierda / derecha con umbral de 50px UI: barra de progreso top · contador top-right · botones laterales en hover LAYOUTS A IMPLEMENTAR layout-divider número grande semitransparente (opacity 0.3) + h1 + subtitle layout-big-statement h1 centrado clamp(3rem,8vw,6rem) + párrafo soporte layout-3lines h2 + líneas con número circular 48px + texto secundario layout-cheatsheet scroll vertical · prompt-block font-mono fondo #111 layout-video-controls video object-fit:contain + overlay controles bottom layout-stop octágono clip-path animado + subtitle fadeUp ANIMACIONES .animate-in opacity:0 → 1 · translateY(20px) → 0 · 0.5s ease stagger nth-child delays: 0s, 0.1s, 0.2s, 0.3s, 0.4s entering slideIn 0.5s · leaving slideOut 0.3s stop-sign bounceIn cubic-bezier(0.34,1.56,0.64,1) + pulse loop infinito # Genera 23 slides basadas en el contenido de la Sesión 4 del taller de Agentes IA
4

Tu Portafolio

GitHub + Vercel → tu web en internet hoy

El Portafolio Personal
Cheatsheet
Prompt: Tu Web de Portafolio Para Codex
Crea una web de portafolio personal con: ## Stack - Framework: Next.js 14 con App Router - Estilos: Tailwind CSS v3 - Animaciones: Framer Motion - Fuente: Inter de Google Fonts - Deploy target: Vercel ## Diseño Fondo: #0a0a0a | Texto: #ffffff / #a0a0a0 Acento: #007AFF (azul) + #30D158 (verde) Estilo: dark mode, minimalista, espaciado generoso ## Secciones 1. Hero: nombre con gradiente, rol animado, CTA doble 2. About: foto circular, párrafo, badges de habilidades 3. Proyectos: grid de 3 tarjetas con hover glow 4. Contacto: links con íconos SVG y animación ## Calidad - TypeScript estricto - Componentes en /components - README con instrucciones de deploy - Optimizado para Vercel # Genera el proyecto completo listo para `npm run dev`
GitHub + Vercel Deploy
Cheatsheet
Git + GitHub en 5 comandos Terminal
1

Inicializar

git init
2

Agregar archivos

git add .
3

Primer commit

git commit -m "feat: portafolio inicial"
4

Conectar a GitHub

git remote add origin https://github.com/tu-usuario/portafolio.git git branch -M main
5

Subir el código

git push -u origin main

Para cambios futuros

git add . && git commit -m "descripción" && git push

5

Materiales

Todo lo que necesitan para esta sesión

Recursos
Materiales de la Sesión 4

REFERENCIA.md

La guía completa de la clase con todos los prompts y pasos

Descargar

Prompt: Presentación

Prompt reutilizable para generar outlines en markdown

Ver

Prompt: Portafolio

Prompt completo para generar tu web con Next.js + Tailwind

Ver

Checklist Presentaciones

Lista de verificación antes de presentar

Ver

Template Markdown

Estructura base para cualquier presentación

Ver

Comandos Git

Los 5 comandos para subir tu proyecto

Ver
STOP

Showcase: comparte tu portafolio