Hacer una presentación técnica suele empezar igual:

Si sos developer, hay otra forma:

hacer la presentación como código.

• Markdown para escribir.

• Marp para convertirlo en slides.

• Kiro para ayudarnos con IA.

• Git para versionarlo.

En este ejemplo vamos a crear una presentación simple sobre Docker.

Kiro
  ↓
Markdown
  ↓
Marp
  ↓
PDF / PPTX / HTML

---

Primero: preparar Marp

Podemos usar Marp de dos formas:

Marp Extension → preview
Marp CLI       → exportar

Extensión

En Kiro o VS Code buscá:

Repo marp-vscode

Marp for VS Code

Con eso vas a poder ver las slides mientras editás el Markdown.

CLI

No hace falta instalar nada globalmente.

Repo: marp-cli

Podés usar:

npx @marp-team/marp-cli --version

Y después exportar con:

npx @marp-team/marp-cli docker.md --pdf

o:

npx @marp-team/marp-cli docker.md --pptx

Listo.

Ya tenemos el entorno.

---

Ahora sí: pedirle a Kiro que cree la presentación

En lugar de empezar escribiendo slides manualmente, podemos darle el brief directamente.

Quiero crear una presentación utilizando Marp.
El tema es una introducción a Docker para personas que recién empiezan
con contenedores.
Creá un archivo docker.md.
La presentación debe tener aproximadamente 8 diapositivas.
Incluí:

qué es Docker
qué problema resuelve
qué es una imagen
qué es un contenedor
diferencia entre imagen y contenedor
ejemplo con docker run
arquitectura básica de Docker
conclusión
Usá Markdown compatible con Marp.
Agregá:
marp: true
paginate: true
size: 16:9
No generes demasiado texto por diapositiva.
Priorizá frases cortas, diagramas simples y ejemplos de comandos.

Acá está una de las primeras lecciones:

el brief importa más que decir “haceme una presentación”.

Audiencia, duración y objetivo cambian completamente el resultado.

---

¿Qué genera Kiro?

Después del prompt, Kiro crea un archivo llamado:

docker.md

Ese archivo contiene toda la presentación en Markdown.

Por ejemplo:

---
marp: true
paginate: true
size: 16:9
---

# 🐳 Introducción a Docker

De cero a tu primer contenedor

---

## ¿Qué es una imagen?

- Plantilla de solo lectura
- Incluye código y dependencias
- Se utiliza para crear contenedores

---

## ¿Qué es un contenedor?

- Una imagen en ejecución
- Aislado
- Portable
- Descartable

---

## Demo: nginx

```bash
docker run -d \
  --name web \
  -p 8080:80 \
  nginx

Lo importante es entender dos cosas.

Primero, estas líneas del inicio configuran Marp:

```yaml
---
marp: true
paginate: true
size: 16:9
---

• marp: true activa Marp.

• paginate: true agrega el número de página.

• size: 16:9 define el formato de la presentación.

Segundo, cada vez que aparece:

---

Marp entiende que comienza una nueva diapositiva.

Es decir:

# Portada

---

## ¿Qué es una imagen?

---

## ¿Qué es un contenedor?

---

## Demo

se convierte en:

Slide 1 → Portada
Slide 2 → ¿Qué es una imagen?
Slide 3 → ¿Qué es un contenedor?
Slide 4 → Demo

Así de simple.

---

Ver la presentación mientras trabajamos

Ahora abrimos docker.md en Kiro.

Con la extensión Marp for VS Code instalada podemos abrir el preview y ver las slides directamente desde el editor.

El flujo queda así:

Kiro
  ↓
docker.md
  ↓
Marp Preview
  ↓
vemos la presentación

Si modificamos el Markdown, podemos ver inmediatamente cómo cambia la presentación.

No necesitamos generar un PDF cada vez.

Por ejemplo, podemos pedirle a Kiro:

Agregá una slide después de
"¿Qué es un contenedor?"

Explicá qué es Docker Hub
con máximo 3 puntos.

Kiro modifica docker.md y podemos revisar el resultado directamente en el preview.

---

Probar una demo real

Como nuestra presentación es sobre Docker, podemos incluir comandos que realmente vamos a ejecutar durante la charla.

Por ejemplo, una slide puede contener:

docker run -d \
  --name web \
  -p 8080:80 \
  nginx

Durante la demo abrimos:

http://localhost:8080

y mostramos nginx ejecutándose dentro de un contenedor.

Después podemos limpiar el entorno con:

docker rm -f web

Esto también es útil si estamos practicando la charla y queremos ejecutar la demo varias veces.

Así, nuestras slides no solo explican Docker:

también acompañan una demo real.

---

¿Y el diseño?

Marp también permite crear temas usando CSS.

Por ejemplo:

/* @theme docker */

section {
  font-family: Arial, sans-serif;
  font-size: 30px;
  padding: 70px;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 50px;
}

Y en nuestro Markdown:

---
marp: true
theme: docker
paginate: true
size: 16:9
---

También podemos pedirle a Kiro:

Creá un tema CSS para Marp y guardalo en un archivo llamado `docker.css`.

Quiero:

- diseño minimalista
- títulos grandes
- código fácil de leer
- estilo técnico
- formato pensado para proyectar
- buen contraste
- tipografía legible desde una sala
- bloques de código con estilo de terminal
- paleta inspirada en Docker

El archivo debe comenzar con:

```css
/* @theme docker */
```

Generá únicamente el contenido completo de `docker.css`.

Y que genere directamente:

docker.css

---

Ojo con el preview

Hay un detalle que puede hacerte perder un rato.

Tener:

theme: docker

no significa automáticamente que la extensión conozca nuestro CSS.

Hay que registrarlo.

Creamos:

.vscode/settings.json

con:

{
  "markdown.marp.themes": [
    "./docker.css"
  ]
}

Después recargamos la ventana.

Ahora sí:

docker.css
   ↓
Marp Preview
   ↓
🎨 tema aplicado

---

Configurar la CLI una sola vez

También podemos crear:

.marprc.yml

html: true
theme: ./docker.css
size: 16:9

options:
  allowLocalFiles: true

Nuestro proyecto queda así:

presentacion-docker/
│
├── docker.md
├── docker.css
├── .marprc.yml
│
└── .vscode/
    └── settings.json

Y exportar se vuelve simplemente:

npx @marp-team/marp-cli docker.md --pdf

---

Lo mejor: iterar conversando

Como nuestra presentación es texto, podemos seguir trabajando con Kiro.

Por ejemplo:

Revisá docker.md.

Hay demasiado texto.

Dejá máximo 4 puntos por slide
sin eliminar los comandos.

O:

Agregá una slide después de
"Imagen vs Contenedor"
explicando Docker Hub.

O algo mucho más interesante:

La audiencia nunca utilizó Docker.

Revisá la presentación y detectá
conceptos que estoy explicando
antes de haberlos introducido.

Ahí la IA deja de ser simplemente un generador.

Se convierte en un copiloto editorial.

---

Presentation as Code

Y esta es la parte que más me gusta.

Nuestra presentación ahora vive en:

docker.md

Entonces podemos hacer:

git add docker.md docker.css

git commit \
  -m "feat: agrega presentación de Docker"

Y ver cambios reales:

- Docker ejecuta aplicaciones.
+ Docker permite ejecutar aplicaciones
+ utilizando contenedores.

• Podemos tener branches.

• Pull requests.

• Code review.

• Historial.

Incluso CI/CD:

Sí.

CI/CD para presentaciones.

---

Mi flujo queda así

• Kiro ayuda a crear e iterar.

• Markdown mantiene todo simple.

• Marp genera la presentación.

• Git guarda la historia.

---

¿Querés probarlo?

Preparé el proyecto completo utilizado en este artículo.

Incluye:

docker.md
docker.css
.marprc.yml
.vscode/settings.json
README.md

Además de los prompts para recrear la presentación y el tema.

💻 Repositorio:

github.com/roxsross/roxs-presentation-as-code

Podés clonarlo:

git clone https://github.com/roxsross/roxs-presentation-as-code.git

cd roxs-presentation-as-code

Y probar:

npx @marp-team/marp-cli docker.md --pdf

---

Conclusión

Durante mucho tiempo pensé las presentaciones como archivos.

Ahora prefiero pensarlas como proyectos.

Porque un proyecto puede tener:

contenido
diseño
versiones
automatización
revisión

Y la combinación:

Kiro + Markdown + Marp + Git

hace exactamente eso.

Si trabajás todos los días con código, Git y Markdown, vale la pena probar este flujo aunque sea una vez.

Crear presentaciones también puede sentirse como programar. 🚀

Build with fire. Deploy with power. 🔥