Hoy tras terminar una de las nuevas piezas del ecosistema selfhosted-saas de GrowthPlugins, GrowthBalance, tocaba lo de siempre, empezar a documentar para los usuarios, una parte de crear productos que no es precisamente la que más me guste, ni se me de bien …. me da mucha pereza ponerme a tomar capturas de pantallas, grabar video etc.
¿Y si hago la «la IA» me ayude a automatizar la creación del manual de usuario?
Veamos las piezas que necesitamos
- Que Claude (mi IA favorita ❤️), pueda «ver» el navegador web, bien por su propia extensión, o de otra forma que veamos.
- Capturas de pantallas. Aquí fue directo, PLaywright, ya lo había usado en oros proyectos y sabía que tiene la capacidad de levantar un navegador y tomar capturas de pantallas completas o de un elemento en concreto.
- Video. Aunque eso sería segunda fase, sabía que Playwright tiene un módulo de video que se le activa y es capaz de grabar la sesión, así que solucionado de momento.
Puede ver la web, tomar capturas e incluso video, ya sólo falta que sea capaz de «interpretarla», es decir que si le digo que haga login, entienda lo que tiene que hacer, y este si veía que podía ser el agujero negro que todo proyecto tiene y que puede ser donde el proyecto acabe, así que es lo primero a atacar … y para mi sorpresa, fue mucho más directo de lo esperado, ya que como con Playwright obtiene el dom, es capaz de interpretar la web y saber cómo actuar en la mayoría de casos, así que agujero negro cerrado.
¿Qué forma le damos a la solución?
La idea es poder usarlo en cualquier proyecto, incluso en algunos que no sean mios, que la gente de soporte pueda usarlo, cuando un usuario te abre un ticket y te dice que no sabe por ejemplo obtener la API KEY, le das la instrucción a este bicho, y que genere el video, se lo pasa, e incluso podemos añadirlo a nuestra base de conocimiento …. pedazo de caso de uso que me acabo de sacar de la manga !!
El primer pensamiento impuro fue un docker para Playwrigth y luego un mega prompt super curado de los que te prometen los gurús de Youtube … 😖
Segundo pensamiento, el prompt a una skill … algo mejor, pero 😖
Vamos a por el tercer pensamiento: ¿me permitirá una skill montar todo el tinglado sin tener que marear al personal con dockers y demás? … pues bingo, si, puedo crear un script que me deje una skill (que pueden ser más que un simple fichero .md con instrucciones) totalmente preparada 😆
Guay, porque una skill la puedo poner a nivel de usuario y ya la tengo para cualquier proyecto o sesión con Claude.
¿Un ejemplito? que la chapa que estoy dando es monumental.
Caso real de ejemplo
El prompt:
/auto-manual http://localhost/intranet.ablancodev.com/freelance-balance/ haz login con usuario blanco y password 123, muestra el listado de proyectos, luego edita uno para que se vea su ficha y como se añade tiempo y como se añade por ejemplo un gasto. Hazme el maual en inglés y en el video que se vean bien los clicks que vayas haciendoAlgunas iteraciones
Que esto no es llegar y besar el santo, algunas cosillas dieron guerra y son cosillas a saber y a tener en cuenta para proyectos futuros o similares.
El video es eterno
El video generado era largo y aburrido, pero aburrido, ya que Playwrigth graba la sesión completa, que incluye cuando Claude toma una captura, la procesa y piensa sobre ella y luego sigue, y esos segundos te los tira tu mirando un video que está en un frame quieto.
Así que la skill incluye posprocesado usando la librería ffmepg, recortando los trozos en los que no hay interacción.
¿Y el ratón?
Playwright al levantar el navegador en modo no visual, no usa un ratón como tal, sino que simula acciones, por lo que para el video y capturas no tenemos un puntero, y sabemos que en los videos a todos se nos van los ojos al puntero del profesor, así que tuvimos que añadir un svg que simula el puntero y el propio sistema hace que se mueva con coherencia.
El resultado, el código
Si lo quieres, lo tienes directamente en github:
https://github.com/ablancodev/skill-auto-manual
Y el proceso es muy sencillo:
- Te lo descargas de github
- En tu equipo entras en la carpeta y desde terminal ejecutas install.sh
Esperas a que termine, la primera vez tarda un ratillo, y ya lo tienes listo para cualquier proyecto.
En cualquier sesión con Claude simplemente llamas a la skill con /auto-manual, por ejemplo:
/auto-manual https://mi-app.com "cómo crear una factura"Mejoras futuras
Video narrado
El video mola, pero ya si estuviese narrado sería la guinda del pastel.
El sistema está preparado para este sentido, ya que incluye la generación de un fichero con los textos y timing del video, que podremos usar para subtítulos o posibles narraciones automáticas por ejemplo usando la API de Elevenlabs.
Esto si me gustaría evolucionarlo más adelante, bien en esta misma skill o quizás en otra aparte para no mezclarlas ya que no todo el mundo lo necesita, a ver si la vida me da un rato libre 🥵
Ahora el manual «escrito» es un html, que es relativamente sencillo generar un pdf a partir de él (pídeselo a Claude y te lo hace en un minuto), pero quizás esté bien que lo haga directamente, ya que suele ser como se comparten estos manuales en el día a día.
Conclusión
Si te instalas esta skill, podrás generar tus manuales, tanto propios, como para compartirlos, de tus desarrollos, o incluso de portales que no son tuyos de forma automatizada ahorrándote esa parte tan tediosa que muchos detestamos.
Incluso puedes usarlo como parte de la documentación de tu proyecto o para crear videos para redes.
Lo importante es pensar en qué te duele en el día a día y ver si esa parte la puedes reducir al mínimo automatizando, aplicando IA u otras soluciones que seguro que podemos encontrar. Y si ya has dado con tu dolor, pero no sabes por donde meterle mano, avísame que seguro que vemos luz al final del tunel.