Claude hizo un tutorial de 18 minutos de mi app

Pensé que desarrollar y poner en marcha un asistente de IA interno sería la parte impresionante. Resulta que el tutorial y la guía de usuario, creados en su mayoría por Claude, son lo que me dejó boquiabierto.

Claude hizo clic por cada pantalla de nuestra aplicación interna, escribió los prompts de demostración, narró cada sección con una voz que no era la mía, construyó las tarjetas de título con marca y transcribió todo en dos idiomas. Durante toda la grabación, casi solo me senté a mirar cómo mi propia app se daba un recorrido a sí misma.

Necesitábamos material de onboarding para MemodoAI, el asistente de IA que usamos internamente en el trabajo (un fork autoalojado de LibreChat). El encargo: un video guía y una guía escrita para no quedar atrapado haciendo soporte técnico a mis colegas. Lo interesante fue cuánto pude delegar, y las dos partes que no.

El tutorial en sí recorre nuestro producto interno real, así que no voy a subir los dieciocho minutos completos a YouTube. Lo que ves abajo es un montaje corto: las tarjetas de intro y outro, los bumpers de transición y clips del recorrido. Suficiente para mostrar lo que Claude construyó.

¿No ves el reproductor? Míralo en YouTube.

Lo que realmente construimos

Dos entregables, una sola fuente de verdad.

La fuente de verdad es una shot list: cada sección dividida en Action (qué hacer clic o escribir), Expected UI (qué debe verse en pantalla después) y Capture (el nombre del screenshot o del capítulo). Cuando cambia la UI del producto, editas ese único archivo y vuelves a grabar solo las secciones afectadas. El video y la guía escrita leen los dos de ahí, así que no pueden desincronizarse. Esa única decisión es la razón por la que un video y una guía no se convirtieron en dos cargas de mantenimiento separadas.

Todo lo demás cuelga de ese archivo: los screenshots, el guion de narración, la lista de capítulos, los subtítulos.

Un documental, no una película animada

Aquí está el modelo mental que hizo que todo lo demás encajara. Un tutorial de producto no es una pieza de motion graphics, es una grabación de pantalla documental con una fina capa de adornos con marca alrededor.

Ese replanteo importa porque te dice dónde invertir el esfuerzo. Al final se componen tres pistas:

• La pista documental es la grabación de pantalla en vivo. Más o menos el 90 % de la duración.
• La pista de decoración es el intro con marca, las tarjetas de título de sección, el outro. Quizá el 10 % de la duración, y carga con algo así como el 90 % del pulido percibido.
• La pista de audio es la narración, un archivo por sección.

Cada pista tiene su propia pequeña pipeline, así que podía volver a renderizar la narración sin volver a grabar, o cambiar una tarjeta de título sin volver a montar. Mantenerlas independientes es lo que hizo barata la iteración.

Claude manejó el producto en vivo

Conectamos Claude Code al navegador ya abierto y ya autenticado a través de la extensión Claude-in-Chrome. Elegí la extensión en lugar de Playwright a propósito: la sesión ya estaba iniciada, así que no había setup de autenticación que cuidar. Claude simplemente podía actuar sobre el producto en vivo.

Mientras exploraba el producto en vivo, haciendo clic por cada pantalla para ver qué funciones estaban realmente activas en nuestro despliegue, capturaba un screenshot de región de cada una a un fijo 1440×900 para que todo quedara alineado. Habíamos fijado una estructura de quince secciones, y los treinta y dos PNG anotados salieron numerados para coincidir con ella. De esos screenshots se construyó la guía escrita.

Para el video en sí, esa shot list (un único archivo markdown, recording-script.md) funcionó también como la lista de tareas de Claude Code. Apunté Claude Code a ella y avanzó fila por fila: leer cada Action, ejecutar el clic o la pulsación en el navegador en vivo a través de la extensión, verificar el resultado contra la Expected UI, y luego pasar a la siguiente fila. Un simple archivo markdown como guion, un producto real con sesión iniciada como entorno de ejecución.

La narración la hizo el text-to-speech de ElevenLabs. Dieciocho MP3, uno por sección, unos veinte minutos en total, renderizados a partir de un guion escrito para ser hablado y no leído (frases cortas, la puntuación marcando el ritmo). El render completo de un guion de ~17.000 caracteres costó alrededor de un dólar. Corregir una frase después cuesta centavos.

El 10 % hace que se vea profesional

Los adornos con marca salieron de Claude Design: una tarjeta de intro con el logo entrando, un outro y catorce tarjetas de título de sección. Esta es la pista de decoración, la parte que convierte una grabación de pantalla competente en algo que parece producido a propósito. Sin herramienta de motion graphics, sin diseñador de por medio, generado directamente contra la marca.

Lo que quedó en mis manos

Dos cosas, y voy a nombrar las dos, porque «Claude hizo el video» pasa por encima de ellas sin decirlo.

La primera fue darle a grabar. Intenté automatizar hasta eso y perdí. Un intento temprano lanzó screencapture -v en segundo plano y dejó que Claude corriera todo el recorrido; la toma desapareció, porque esa herramienta no vuelca su archivo cuando otro proceso la mata, así que una corrida limpia de doce minutos no produjo nada. La división que funcionó: Claude es dueño de cada movimiento en pantalla, una persona es dueña del botón de grabar en OBS. Claude recorre el guion de principio a fin, yo inicio y detengo la grabación. (Hay un futuro más automatizado en el que OBS se controla por su API websocket con marcadores de capítulo con nombre. Vale la pena el día en que esto sea un entregable recurrente. Todavía no lo es.)

La segunda fue el montaje, y esta es la que no quiero minimizar. Las tres pistas no encajan solas. Las ensamblé en Shotcut: la grabación de pantalla en el video, una tarjeta de título delante de cada capítulo, intro y outro en los extremos, y luego la parte lenta: deslizar los dieciocho clips de narración hasta que cada línea de la voz en off cae justo sobre el clic que describe. Si editas video para vivir, esto es simplemente el trabajo, nada exótico. Si no, aquí va la versión honesta: es un día entero moviendo clips fotograma a fotograma y volviendo a mirar para revisar la sincronización. Claude produjo cada ingrediente. Emplatarlo seguí siendo yo en la mesa de edición.

El montaje real, y la parte que hice a mano. La pista de video de arriba es la grabación de pantalla cortada en secciones; las tiras verdes de abajo son los dieciocho archivos de narración (section-01.mp3, section-02.mp3…); las marcas de colores son los marcadores de capítulo. Alinear lo verde con lo azul es lo que come el tiempo.

La transcripción

Transcribí el corte final ya editado con whisper.cpp, no una exportación de audio aparte, para que las marcas de tiempo cuadren exactamente con el video al que apuntan los capítulos. Una sola corrida produjo subtítulos SRT y VTT, texto plano y JSON con tiempos por token, en inglés y alemán, más la lista de quince capítulos que alimenta los capítulos clicables del reproductor dentro de la app.

Dónde vive ahora

El video, la transcripción, los capítulos y la guía escrita aparecen todos dentro de MemodoAI. La guía escrita en sí es una página HTML bilingüe y autocontenida que Claude Design construyó a partir del mismo borrador en Markdown y los mismos screenshots: un archivo, todos los assets incrustados, inglés y alemán.

La guía escrita: las mismas quince secciones que el video, pulidas por Claude Design en una página autocontenida y bilingüe (EN/DE).

Todo se junta en una sola página dentro del producto: el video al frente, la lista de capítulos al lado, y los subtítulos, la transcripción y la guía escrita a un clic, cada uno en inglés o alemán.

• A. Lista de capítulos. Haz clic en cualquier entrada para saltar a ese punto del video.
• B. Subtítulos. Inglés y alemán.
• C. Transcripción completa. Inglés y alemán.
• D. Guía escrita. Inglés y alemán.

La shot list, el guion de narración, los screenshots y los pequeños scripts de tooling (el renderizador de TTS, el wrapper de whisper) viven todos en el repo, por si quieres ver la maquinaria real: docs/memodo-ai-tutorial en GitHub.

Una sola persona hizo todo esto

Aléjate del video un segundo, porque está montado sobre algo mucho más grande.

Antes de que existiera nada de este material de onboarding, ya había construido MemodoAI: un asistente de IA interno dockerizado con logging, monitoreo y observabilidad, con seguridad y detección de PII sobre los datos que entran y salen, capaz de leer la mayoría de los documentos de Microsoft Office, y conectado a nuestro entorno de Microsoft 365. Ese es el producto de verdad. El tutorial de dieciocho minutos y la guía bilingüe son lo que le atornillé encima una vez que ya estaba funcionando.

Una sola persona hizo las dos cosas. Hace unos años esa frase necesita un ingeniero de backend, una persona de DevOps, un revisor de seguridad, un redactor técnico, un screencaster, un locutor y un motion designer. Lo hice como un ejército de un solo hombre, porque Claude colapsó la mayoría de esos roles en «decide qué quieres, y luego revisa el trabajo».

No pretendo que se haya hecho solo. Tomé las decisiones de arquitectura, atrapé lo que volvía mal, le di a grabar y monté el video. Pero la distancia entre lo que puede entregar una sola persona motivada y lo que antes requería un equipo entero se ha cerrado casi del todo. Este video no se lo daría a un cliente. Pero para el onboarding interno es mejor que cualquier cosa que hubiera hecho solo, y tomó una fracción del tiempo.

Cómo hacer el tuyo

Si quieres construir lo mismo, aquí está toda la pipeline, de principio a fin.

1. Explora el producto en vivo, y captura los screenshots mientras lo haces. Conecta Claude Code a tu app real y con sesión iniciada a través de la extensión Claude-in-Chrome y haz que recorra contigo toda la interfaz. Define una estructura de secciones (yo usé quince) y, en esa misma pasada en vivo, captura un screenshot de región de cada pantalla. De esos screenshots se construye después la guía escrita.
2. Escribe la shot list. Un archivo, una fila por paso: la acción a realizar, la UI que esperas después y el asset a capturar (un nombre de screenshot o un título de capítulo). Esta es la única fuente de verdad que mantiene sincronizados el video y la guía.
3. Escribe el guion de narración. Un bloque por sección, escrito para ser hablado y no leído: frases cortas, puntuación para el ritmo, nada de «haz clic aquí». Marca las indicaciones de producción para que no se lean en voz alta.
4. Renderiza la narración. Manda el guion a una API de text-to-speech (yo usé ElevenLabs) y obtén un archivo de audio por sección. Cambiar una línea después es un re-render barato.
5. Graba la pantalla. Haz que Claude maneje el navegador por toda la shot list de principio a fin mientras una persona opera el botón de grabar en OBS. Consigue una toma limpia; todo el ensamblaje pasa después.
6. Crea los adornos con marca. Genera la tarjeta de intro, el outro y una tarjeta de título por sección en Claude Design, ajustadas a tu marca. Esta es la fina capa que hace que todo se vea producido.
7. Monta el video. En un editor (yo usé Shotcut), pon la grabación de pantalla en una pista y la narración en otra, coloca una tarjeta de título delante de cada sección y desliza el audio hasta que la voz caiga sobre la acción que describe.
8. Transcribe el corte final. Pasa el video terminado por whisper.cpp para sacar subtítulos, una transcripción en texto plano y una lista de capítulos. Repítelo para un segundo idioma si quieres uno.
9. Escribe y pule la guía. Redacta el recorrido en Markdown sobre los mismos screenshots, y luego entrega el borrador y las imágenes a Claude Design para exportar una página HTML autocontenida.
10. Ponlo donde la gente ya está. Deja el video, la transcripción, los capítulos y la guía en algún lugar al que tus usuarios ya miran. En nuestro caso es una página dentro del propio producto.