En esta entrada explico el proceso de creación de dos aplicaciones que he realizado con la técnica del Vibe Coding. Si lo que interesa simplemente es conocer las APPs sin los detalles técnicos de su creación…

Pero si quieres saber más del proceso de creación, quédate aquí.

Vibe-Coding

El Vibe-Conding se está popularizando, y para quien no sepa lo que es, se puede resumir en la técnica de programar código mayoritariamente mediante chats con Grandes Modelos de Lenguaje con capacidades para escribir código.

Más que una explicación sobre el vibe-coding en general, en esta entrada me voy a centrar en mostrar el proceso que yo mismo he utilizado en la creación de estas dos APPs que acabo de lanzar. No voy a usar ninguna IA para escribir esta entrada (no es bueno estar siempre delegando funciones cognitivas) ni tampoco va a tener una precisión técnica absoluta, pero la idea es que este post pueda servir de inspiración para otras personas que quieran adentrarse en el vibe-coding y se muestre un ejemplo desde en un lenguaje lo más cercano y accesible posible.

En este post voy a explicar el proceso de creación de dos apps. En la primera iba un poco más a ciegas (y la explicaré a rasgos más generales), en la segunda el proceso fue mucho más directo (y la explicaré con detalles más precisos).

Las herramientas

Las herramientas utilizadas para crear estas aplicaciones han sido estas:

• Claude Code: este es el núcleo del proyecto. Es la Inteligencia Artificial (mayoritariamente el modelo Opus 4.5 de Anthropic). Se puede acceder a Claude Code desde distintas formas. Aunque he tenido algunas conversaciones en su propio chat de la App dedicada para Mac, mayoritariamente he utilizado un IDE para hablar con Claude Code.
• IDE: es un Entorno de Desarrollo Integrado (es decir, una APP que ayuda a gestionar, escribir, modificar, el código). En concreto he usado Visual Studio Code (aplicación gratuita) para la que Claude Code tiene una extensión. Es decir, he abierto una aplicación para programar, y he hablado con Claude Code desde dentro de ella, y el propio Claude Code se ha encargado de ir escribiendo la aplicación según lo que le iba pidiendo; para posteriormente subirlo a Github.
• GitHub: Github es una plataforma de desarrollo dónde se puede alojar código, y además proporciona un entorno (GitHub Pages) dónde el código de una aplicación se puede poner en marcha y usar la aplicación desde el propio navegador. Lo interesante de GitHub es que se basa en Git para el control de versiones.
• Git: Git es un sistema para almacenar y controlar las distintas transformaciones que va acumulando una APP a medida que va evolucionando. Es ideal porque tienes un control de qué cambios se van implementando (y puedes volver atrás fácilmente) o de tener una rama de trabajo paralela mientras mantienes pública una versión estable de la APP.

Y alguien dirá, pero si ahora le pides a la IA una APP y te la crea, y ya ella te da un enlace para compartir (artefactos), ¿para qué complicarse la vida? Pues porque en el momento que quieres realizar algo complejo (de requiera de refinamientos constantes, que pueda escalar a algo más grande, etc…) necesitas tanto un control de versiones (Git) como poder manejar una APP que no se base en un único archivo de código, sino varios (GitHub/VSCode) y que puedas ir modificando la APP en diferentes conversaciones (Plug-in de Claude Code en VSCode) para evitar alucinaciones en conversaciones largas.

Explicación del proceso

El punto de partida

Como (recién) Jefe de Estudios de un Conservatorio, quería tener una forma de conocer y entender cómo está funcionando el centro educativo a nivel de las calificaciones que están obteniendo los alumnos.

• Parto de que puedo tener todas las calificaciones en una hoja excel con una serie de campos (algunos me sirven otros no).
  • Solo puedo tener una hoja excel cada etapa por separado (Elemental o Profesional), así como de cada trimestre por separado (1EV, 2EV, 3EV y Final)
• También tengo en cuenta de que no quiero que se pueda subir ningún dato de ningún alumno, ni quiero particularizar en ningún alumno ni en ningún docente, solo ver los datos por asignaturas / cursos, etc…
  • Manejar NIAs, Nombres y Calificaciones, son datos sensibles que hay que proteger. No pasa nada por utilizar esa información en local dentro de Excel sin subir a nubes (o subirlas a nubes corporativas), pero sí que no conviene subir esa información a ningún otro sitio.
• La aplicación, que va a residir en una página web, públicamente accesible, no debe de tener capacidad de guardar ningún dato de forma interna, así que se debe gestionar como cargar cada vez los datos.
• Para aligerar los cálculos voy a intentar que la APP haga solo los cálculos que sean de comparar etapas o trimestres (ya que estos están en excels diferentes) y el excel se encargará de realizar los cálculos dentro de cada trimestre.

El camino

El primer paso es averiguar qué cálculos interesantes se pueden hacer con la información de la que dispongo:

• Nota media, desviación, moda, porcentaje de aprobados y suspendidos, nota media de aprobados, nota media de suspendidos, distribución de notas (cuantas notas de cada nota posible del 1 al 10 hay), y correlaciones (si un alumno saca buenas notas en una asignatura, también lo hace en esta otra).

Luego es ver en qué dimensiones me interesa toda la información anterior:

• Quiero saberlo a nivel de todo el alumnado del centro
• Quiero saberlo a nivel de cada curso
• Quiero saberlo a nivel de cada asignatura

También quiero poder agrupar o destacar ciertas cosas:

• Quiero poder saber todos los datos anteriores de todas las asignatura de especialidad, o de no especialidad.

También se pueden crear umbrales para catalogar:

• Puedo catalogar el nivel de dificultad de una asignatura en función de porcentaje de suspensos o nota media.

La primera parte del proceso, fue crear un excel que, copiando los datos que disponía de notas, fuera capaz de calcular todo esto.

Y para ello, primero pregunté a varias IA qué tipos de cálculos podría hacer con el tipo de datos de los que disponía (y llegue más o menos a la lista anterior, en la que evidentemente no utilicé todo lo que me indicaron).

Una vez tenía eso claro, empecé a crear el Excel (inocente de mi) con la ayuda de Claude, me iba indicando qué fórmulas necesitaba para cada cálculo:

• Teniendo en cuenta que uso Excel en Español (y las fórmulas son diferentes)
• Teniendo en cuenta que hay que saber manejar errores o datos inesperados como «no dato» o «poca muestra» y que supiera mostrar eso sin errores en el excel

Digo inocente de mi, porque aunque las capacidades para ayudarme con las fórmulas exactas que mostraba Claude Code con Opus 4.5, resulta que ya podía él solito crearme el excel, como comprobé más adelante.

Y el nodo, entre el excel y la APP reside en la última hoja del Excel, que después de hacer todos los cálculos, los lista en una hoja final (en la que no hay absolutamente ningún dato individual de ningún alumno) y que se debe exportar como archivo csv (desde excel puedes exportar una hoja concreta en ese formato).

El paso siguiente fue pedir a Claude Code, que con ese csv de ejemplo, qué aplicación podría crear para mostrar los datos (dándole unas pinceladas breves de estilo e interfaz y funciones). Y, lógicamente también empecé poco a poco a pedirle funciones (comprar, tipos de gráficas, navegación, etc…). Primero todo en un artefacto de Claude a modo de prototipo entre diferentes conversaciones, y cuando ya estuvo el proyecto más maduro, pasó a residir en GitHub.

Una vez el proyecto estaba en GitHub, empecé a abrirlo desde Visual Code Studio (y con el plugin de Claude Code) seguí mejorándolo. ¿De qué forma?

• Primero probando la propia aplicación, detectando errores, inconsistencias, o cosas que no me gustaban y pidiéndole los cambios explicándolo lo más detalladamente posible.
• Había veces que era necesario abrir la consola de Javascript para detectar los errores y así poderle darle más contexto del error a Claude Code.
• Descubrí como gestionar la compactació (al principio no entendía qué era, pero resulta que llegados a un punto de la conversación – cuando empieza a ser demasiado larga – Claude para lo que está haciendo y realiza un resumen de la conversación, olvida todo lo anterior y sigue desde ese resumen). Así que aprendí a «compactar» a tiempo para que no pillara un proceso importante a mitad, o a cambiar de conversación cuando cambiaba completamente de tema.
• También llegó el momento en el que descubrí que podría crear un servidor local (clonando el repositorio en mi propio ordenador) y probar los cambios antes de enviar una nueva versión a la web.
• También aprendí a tener actualizado el archivo Claude.md que se guarda dentro del proyecto y que Claude siempre lee antes de hacer nada (como un System propmt de todo lo que va a hacer).
• También aprendí a crear una nueva rama del proyecto, y así podía probar cambios en una rama que no era la publicada (pero comprobar su funcionamiento en un servidor local) y cuando ya estuviera conforme, unir esa rama de desarrollo a la principal.
• También aprendí a crear tags de versiones (como «copias de seguridad» para volver a un punto anterior) si la cosa se desmadraba, a la part que empecé a nombrar las diferentes versiones que iba alcanzando la APP.
• De vez en cuando le solicitaba a Claude que auditara la aplicación para proponer mejoras. Y hicimos varias refactorizaciones (actualizar código), así como desgranar archivos grandes monolíticos en otros más pequeños para que la aplicación funcionara mejor.
• También incluimos un segundo idioma de la APP, mediante i18n.

Llegó el punto, que me di cuenta de que faltaba alguna asignatura por crear en el excel original, y ví lo complicado que era añadir algo más al excel y que siguiera funcionando, así que le solicité a Claude Code si era capaz de optimizar el excel con ese objetivo, que permitiera más fácilmente incluir nuevas asignaturas y crear dinámicamente agrupaciones. Y así lo hizo (después de varios intentos e iteraciones). Con lo que hubo que modificar ligeramente también la APP para que admitiera el nuevo formato de csv. cosa que hizo mediante unas instrucciones que el propio Claude Code que rehizo el excel escribió para el Claude Code que actualizó la APP.

Y más o menos así, se llegó al punto actual de la APP.

Un segundo comienzo

Llegados a cierto punto, me pareció también interesante realizar otra APP más enfocada solo para docentes (menos ambiciosa que la primera), pero que me costó mucho menos de realizar con el aprendizaje del proyecto anterior.

Esta vez empecé la conversación así:

Te he subido un excel en el que tienes que añadir nuevas hojas con los siguientes objetivos:
* El excel debe realizar cálculos con las notas que otorga un docente para proporcionar información relevante.
* El excel tendrá unas últimas hoja de exportación en la que preparará todos los cálculos para ser exportados en csv y ese csv servirá para que una APP muestre los datos del csv.

El excel es de ejemplo pero he borrado los datos personales de alumnos porque esa información es confidencial y no se puede subir a la APP, aunque sí se puede manejar dentro del excel. 
En primer lugar, el campo del NIA, ¿se podría anonimizar pero mantener que cada elemento anonimizado siga siendo único?
Eso serviría para hacer seguimiento de los alumnos.
En segundo lugar, los datos que exporte deben poder ser tanto con las anonimizaciones hechas (penúltima hoja del excel), como sin datos individualizados de alumnos (ni siquiera anonimizados), última hoja del excel).
El excel siempre pertenecerá a una etapa (EEM - cuyos cursos son 1EEM, 2EEM, 3EEM y 4EEM- o EPM -cuyos cursos son 1EPM, 2EPM, 3EPM, 4EPM, 5EPM, 6EPM).
Los alumnos pertenecen a especialidades (pero esos nombres pueden o no coincidir con el nombre de la asignatura evaluada por ese docente). Contenido es el nombre de la asignatura evaluada, y luego aparece la nota evaluada (siempre son enteros del 1 al 10 sin decimales). El nombre del profesor no es relevante (porque siempre será el mismo en cada excel), pero guárdalo para exportar en el csv y que la APP sepa el nombre del docent. La información de nota y Apto es redundante respecto a la nota numérica, así que úsala solo si es mejor para los cálculos del excel. La información de repite no la uses.
La información que el csv debe aportar a la app, primero en global es:
KPI's dónde se vea la nota global de todo, la desviación típica, la moda y la distribución de notas (cuantas veces ese docente ha puesto cada tipo de nota), porcentaje de aprobados, de suspensos.
Luego lo mismo desglosado por asignaturas (sin tener en cuenta el curso o especialidad). Luego lo mismo dependiendo del curso, luego lo mismo dependiendo de la especialidad, y luego lo mismo dependiendo de curso y especialidad. 
También quiero correlaciones entre (dentro de cada asignatura posible) nota y curso o (también dentro de cada asignatura posible) nota y especialidad.

Necesito que me devuelvas otro excel que ya haga todo lo que te he pedido. PERO ANTES, revisa bien toda esta información, busca posibles dificultades o preguntas que necesitas que te responda e incluso propón alguna mejora que no haya contemplado.

Y como se puede intuir, la conversación continuó con Claude Code haciendo un plan y un análisis de problemas, y proponiéndome preguntas y dudas sobre qué opción prefería. Después de contestar a todas las preguntas y dudas, generó el excel (francamente bien, salvo pequeñas incidencias con alguna fórmula cambiada entre excel en español o inglés, que se pudo arreglar fácilmente).

A continuación le solicité:

Genial, ahora necesito las instrucciones para que en Claude Code en Visual Studio Code pueda generar la APP que entienda este CSV. Te dejo el inicio que he escrito para empezar a crear la APP y lo completas para que entienda el csv que se le va a entregar.


Esta carpeta será un nuevo repositorio en mi github con el mismo nombre, y que se publicará en GitHub Pages (con actions). El objetivo de este repositorio es crear una APP en estilo minimalista de blancos y negros en el que el usuario subirá un archivo CSV que contendrá registros con los siguientes campos: curso, especialidad, evaluación, contenido (el nombre de la asignatura) y la nota numérica. A partir de ese csv cargado (que será solo de un trimestre y etapa), el usuario podrá gestionar la subida de más csv con la información de más trimestres. Etapa se refiere a que o bien será de EEM o de EPM (pero el curso ya da pistas porque está en formato 1EEM o 6EPM). También podrá descargar toda la información en JSON, para volver a importarla de nuevo (y así, cuando se acumulen muchos trimestres no será necesario cargarlos uno a uno). Lo primero que mostrará la aplicación al usuario son KPI globales:

Y contestó con un gran archivo de instrucciones que proporcioné a Claude Code en Visual Studio Code, el cuál a su vez también tenía alguna pregunta (que consulté en la conversación que me había creado las instrucciones).

Luego de un rato considerable, terminó la primera versión de la APP, que lógicamente fallaba, pero al proporcionar un csv de ejemplo y solicitarle que revisara dónde podía estar el problema (si en el csv o en el parser del csv de la APP) encontró el problema y ya tenía la primera versión funcionando.

Por otro lado, hice un ligero rediseño de la primera APP en cuanto a paleta de colores e interfaz. Y luego en otra conversación pedí que adaptara el diseño de la segunda APP imitando a la primera.

Y más o menos llegué al estado actual de ambas APPs.

Y el desarrollo sigue

Ahora ya tengo dos APP bastante funcionales, con los objetivos que tenia en mente ampliamente superados. Aunque todavía sigo refinando algunos detalles, y veremos si alguien más las quiere utilizar y me encuentra bugs o envía sugerencias de mejora.

Si aun no lo has hecho, te recomiendo que visites el post dónde presento formalmente estas APP y se puede acceder a ellas:

Si te ha parecido interesante esta entrada o quieres apoyar el desarrolla de estas APP puedes invitarme a un café en…