¡Cumplimos lo prometido!
Actualmente el proyecto cuenta con muchísimos estilos, cada uno de ellos cuenta con una descripción detallada y un ejemplo de uso.
Para esta ocasión quiero comentar como he ido agregando los estilos y así ser transparente con todo el proceso que se lleva a cabo en el proyecto.
El entorno ayuda más de lo que parece
Cuando me animé a usar IA para la generación de estilos, la primera herramienta que utilicé fue Gemini. Aunque encontré algunos detalles técnicos en el camino, fue una excelente idea apoyarme en archivos de skills. Al principio realizaba el proceso de forma manual, pero al trabajar a escala, la estandarización se vuelve fundamental para ahorrar tiempo y recursos.
Skills de IA
Utilizando el skill-creator de Anthropic, desarrollé una skill específica para extraer y generar estilos basados en lineamientos predefinidos. Mi flujo consistía en navegar por internet, capturar referencias visuales y entregárselas al agente para que, mediante la skill, generara el prompt final automáticamente.
Optimizando el flujo de trabajo
El proceso original constaba de unos 8 pasos en promedio. Decidí optimizarlos para avanzar con mayor agilidad:
- Buscar estilos de calidad en internet.
- Realizar capturas de pantalla.
- Generar el prompt de estilo.
- Actualizar el
README.md. - Crear la estructura de carpetas para el estilo y sus recursos.
- Generar una diapositiva de ejemplo en NotebookLM para obtener las vistas previas.
- Optimizar el peso de las imágenes.
- Realizar el commit y envío de los cambios.
Logré automatizar los pasos 4, 5 y 6, eliminando gran parte de la carga manual.
Scripts y herramientas
Los agentes de IA cuentan con herramientas potentes para la edición de archivos; sin embargo, a medida que el README.md crecía, Gemini empezaba a tener dificultades de contexto. El proceso se volvía lento y, en ocasiones, impreciso.
Noté que el agente fallaba al insertar los prompts para que fueran visibles directamente. Mantener los prompts en el README.md es una decisión de diseño: los usuarios prefieren ver el contenido de un vistazo en lugar de navegar por múltiples archivos. Además, aprovecho ese espacio para mostrar una imagen de ejemplo que aporte valor visual.
Noté que fallaba a veces en colocar el prompt para que las personas lo vean, la razón de ponerlo en el README es de diseño, los usuarios comunes no desearían ir y buscar cada uno de los prompts en cada archivo, asimismo aprovecho el espacio para poner una imagen de ejemplo 👍.
Tal script se encarga de actualizar el README cada vez que se agrega un nuevo prompt, con modificador para categorías y demás (omitiré la parte donde dividimos en más categorías porque tiene el mismo color del asunto).
¡Ahora tenía los poderes para editar correctamente los archivos!
Las IA manejan muy bien herramientas CLI, hacer esto nos redujo ambos pasos.
Workflows y automatización
Los archivos de workflow que diseñamos se encargan de la gestión de carpetas y recursos. Implementamos scripts adicionales que crean la estructura necesaria automáticamente al detectar una nueva entrada en un archivo YAML (input.yaml). El sistema verifica si el estilo ya existe y, de lo contrario, genera el directorio correspondiente con la nomenclatura correcta.
Aunque la generación de imágenes aún requiere un toque manual para asegurar la calidad, hemos mejorado drásticamente la eficiencia del repositorio.
Optimización de activos visuales
Originalmente, una imagen en formato .png pesaba cerca de 1 MB, lo cual es excesivo para la web. Implementamos un script en Python para solucionar este problema de forma transversal. Al finalizar la carga de imágenes para un estilo, el script las optimiza automáticamente y las renombra siguiendo nuestro estándar. Es increíble lo que unas pequeñas herramientas pueden hacer para minimizar la fricción en el proceso de agregación.
Notas finales
El proceso de automatización nos permite mantener el control total sobre el proyecto, incluso con mensajes de commit preestablecidos que aseguran la consistencia en el historial de GitHub.
Aunque el camino ha sido rápido y lleno de iteraciones, lo más importante es documentar lo que realmente aporta valor. Sé que siempre existen formas más eficientes de trabajar y espero encontrarlas en futuros proyectos. Por ahora, el objetivo es seguir expandiendo esta colección más allá de los 100 estilos.
¡Lo importante es crear y compartir!
[¿Te interesa ver un ejemplo de cómo quedó un estilo?] -> Ir al ejemplo
