# Crear presentaciones también puede sentirse como programar

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

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/af48b01c-adc5-469f-8073-6840a8b9616a.png align="center")

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

```text
Kiro
  ↓
Markdown
  ↓
Marp
  ↓
PDF / PPTX / HTML
```

* * *

# Primero: preparar Marp

Podemos usar Marp de dos formas:

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/e6358bdf-1052-4e91-ad82-6fb531ab175c.png align="center")

```text
Marp Extension → preview
Marp CLI       → exportar
```

## Extensión

En Kiro o VS Code buscá:

Repo [marp-vscode](https://github.com/marp-team/marp-vscode)

```text
Marp for VS Code
```

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

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/8a31304a-32c3-4f71-8e28-d6ebc1fe892f.png align="center")

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/d7bb630d-d5d5-4594-aff5-b5d2c56e3d7e.png align="center")

## CLI

No hace falta instalar nada globalmente.

Repo: [marp-cli](https://github.com/marp-team/marp-cli)

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/44ddd0fd-e1a5-472e-98fd-fc2c7c32740c.png align="center")

Podés usar:

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

Y después exportar con:

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

o:

```bash
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.

```text
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.

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/e0ba0dd8-8663-4e27-a439-4921b4edcb39.png align="center")

* * *

# ¿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:

````markdown
---
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
````

````plaintext

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:

```text
---
```

Marp entiende que comienza una **nueva diapositiva**.

Es decir:

```text
# Portada

---

## ¿Qué es una imagen?

---

## ¿Qué es un contenedor?

---

## Demo
```

se convierte en:

```text
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.

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/a0d05228-c193-4306-afc0-434ecd419300.png align="center")

El flujo queda así:

```text
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:

```text
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:

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

Durante la demo abrimos:

```text
http://localhost:8080
```

y mostramos nginx ejecutándose dentro de un contenedor.

Después podemos limpiar el entorno con:

```bash
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:

```css
/* @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:

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

También podemos pedirle a Kiro:

````text
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:

```text
docker.css
```

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/10a89368-fdd3-4c55-b037-2f4ab8af5ec6.png align="center")

* * *

# Ojo con el preview

Hay un detalle que puede hacerte perder un rato.

Tener:

```yaml
theme: docker
```

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

Hay que registrarlo.

Creamos:

```text
.vscode/settings.json
```

con:

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

Después recargamos la ventana.

Ahora sí:

```text
docker.css
   ↓
Marp Preview
   ↓
🎨 tema aplicado
```

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/10a89368-fdd3-4c55-b037-2f4ab8af5ec6.png align="center")

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/4793a9a8-cb26-47a0-8f1b-5108d7cfea18.png align="center")

* * *

# Configurar la CLI una sola vez

También podemos crear:

```text
.marprc.yml
```

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

options:
  allowLocalFiles: true
```

Nuestro proyecto queda así:

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

Y exportar se vuelve simplemente:

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

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/017b4460-fe4e-4800-a286-700302fcf98a.png align="center")

* * *

# Lo mejor: iterar conversando

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

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/d4508b58-570f-4834-a373-d52cc6d263f0.png align="center")

Por ejemplo:

```text
Revisá docker.md.

Hay demasiado texto.

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

O:

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

O algo mucho más interesante:

```text
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:

```text
docker.md
```

Entonces podemos hacer:

```bash
git add docker.md docker.css

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

Y ver cambios reales:

```diff
- 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.**

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/6f809406-46b0-49e8-adf0-cf91bfb159e8.png align="center")

* * *

# Mi flujo queda así

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/7971e80f-4fa5-4f37-8ab5-f46878bc0619.png align="center")

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

```plaintext
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](https://github.com/roxsross/roxs-presentation-as-code?utm_source=chatgpt.com)

Podés clonarlo:

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

cd roxs-presentation-as-code
```

Y probar:

```plaintext
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:

```text
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.

![](https://cdn.hashnode.com/uploads/covers/620c453d7cf10d2765e28b6c/45412008-0578-4461-882d-fac10604c665.png align="center")

> **Crear presentaciones también puede sentirse como programar. 🚀**

**Build with fire. Deploy with power. 🔥**