Vibe Coding Un Dashboard Detenido

Repositorio de hoy :

https://github.com/AlfonsoOrozcoAguilarnoNDA/vibecodingDetenidos

Vivo en la Ciudad de México y mi trabajo me hace ir de manera más o menos regular al Ministerio Público, lo que será el equivalente a hacer denuncias penales. A veces he ido a levantar denuncias para clientes, otras por obligaciones del trabajo. No me gusta estar en eso, pero de alguna manera se han dado las cosas que desde 1998, y más desde 2005, he tenido que dar seguimiento a situaciones civiles, familiares o penales de clientes.

El razonamiento de ellos es que, si puedo resolverles cosas de fraudes, programar y dar consejos legales acertados, probablemente les puedo ayudar en otras cosas.

El 6 de febrero de 2026 estaba en el Ministerio Público para dar seguimiento a dos carpetas de investigación, y era como la sexta visita en ocho meses (spoiler: la justicia en México es lentísima si no hay sangre o robos a la propiedad donde se recuperó el bien). En visitas a este lugar, ya había visto un monitor con Windows 7 y algo inoperante. Nada funcionando, solo errores y ver que era Windows7 No vi nada “funcionando” hasta ese viernes 6 de febrero. Ni idea de cual era la finalidad del monitor.

Ese 6 de febrero me encontré, en mi última visita, un dashboard de cuatro columnas que eran más o menos: nombre del detenido, folio de carpeta, delito cometido y estado de resolución de la denuncia.

El problema es que el dashboard mostraba cosas como:

Sin determinación: faltan 227,962 horas con 110 minutos Sin determinación: faltan 227,945 horas con 79 minutos

Mi cálculo me hace pensar que una parte del proyecto estaba escupiendo un API corrupto o con base en 01/01/1970. Se puede arreglar metiendo una variable de control que descuente miles de horas, pero lo de horas con 79 y 110 minutos no tiene excusa, remedio ni ética profesional.

Hay aquí varias consideraciones. Tenemos en el mundo de las computadoras que tener cuidado con cosas que ya están certificadas. Probablemente hacerle cambios al sistema provocaría una necesidad de recertificarse. Eso cuesta dinero y uno pregunta cómo se certificaron en primer lugar. Usar Windows 7 en 2026 es un error, pero en realidad no hay nada que diga que tengas que procesar mal los datos. Se ve mal y te quemas.

La manera de solucionar un problema como este es hacer un dashboard que presente de manera diferente los datos, informal, y en realidad es una necesidad operativa. Además, un jefe que vea esos números en un monitor se va a enojar.

Por supervivencia tú debes hacer algo e implementar una solución; si no la usan, no es tu problema.

Por cuestiones de tiempo, me preparé para el experimento generando con Gemini un prompt comprensible (estaba en medio de tres cosas diferentes en la vida real, lo modifiqué y ayer hice esta batería de pruebas):

INICIA PROMPT

# ROL: Senior Full-Stack Developer (Vibecoding Mode)

Actúa como un desarrollador experto en PHP y UI/UX institucional. Tu objetivo es ganar una competencia de código replicable en un solo archivo.

# EL PROBLEMA A RESOLVER

Debes recrear un “Monitor de Detenciones” inspirado en las oficinas del Ministerio Público de la CDMX. El sistema original presenta datos corruptos y una visualización deficiente. Tu misión es crear una interfaz robusta que procese un universo de datos “sucios” y los presente de forma clara, profesional y automatizada.

# REGLAS TÉCNICAS (ESTRUCTURA)

1. LENGUAJE: PHP 8.x puro.

2. FRONTEND: Bootstrap 4.6 y Font Awesome (carga exclusiva vía jsDelivr).

3. PROHIBICIONES:

– NO usar base de datos.
– NO usar short tags (<?).
– NO usar short echo (<?=). Usar siempre <?php echo …; ?>.
– TODO el código debe estar en un único archivo (.php).

4. PERSISTENCIA: Crea un array interno con un universo de 24 registros de prueba (Persona, Delito, Tiempo, Estatus).

# LÓGICA DE NEGOCIO (COLORES Y ALERTAS)

La columna 3 (Estatus/Tiempo) debe cambiar de color dinámicamente:

– FONDO ROJO: si el estatus contiene las palabras “consignado” o “recluido”.
– FONDO AMARILLO: si el tiempo es mayor a 36 horas y no está consignado (atención con los datos corruptos de miles de horas).
– FONDO NORMAL: si el tiempo es menor a 36 horas.

# INTERFAZ Y DINÁMICA

– NAVBAR: fija arriba, identificando tu nombre de modelo y la versión de PHP actual.
– FOOTER: estático y profesional con Bootstrap.
– PAGINACIÓN AUTOMÁTICA: el monitor debe mostrar bloques de 6 registros. Cada 7 segundos debe cambiar al siguiente bloque automáticamente y regresar al primero al terminar (loop). Usa JS Vanilla o Meta-Refresh para esto.
– DISEÑO: estilo “Dashboard de Control”, limpio y legible a distancia.

# SALIDA ESPERADA

Dame el código completo en un solo bloque, listo para copiar, pegar y ejecutar.

FIN PROMPT

Lo apliqué a las diferentes inteligencias artificiales con una modificación menor. Resulta que varias de ellas me dieron un resultado que parecía usurpación de funciones, lo cual es un delito, así que cambié las referencias a Ciudad de México por “Base Lunar Alfa”, de la serie de ciencia ficción Cosmos 1999, también llamada Águilas del espacio, de 1979 más o menos. Para los de mi edad, que la vimos en vivo, era todo un referente con dos capítulos fenomenales. El resto de la serie no tuvo tanto presupuesto pero es muy buena también.

Decidí que si hago un dashboard de Base Lunar Alfa, nadie puede pensar que estoy cometiendo un delito de usurpación.

El ejercicio me agarró con tiempo limitado. Tengo una idea de una nueva sección de este sitio y, además, me pasé buscando en un disco duro externo de dos teras una información, así que no es una prueba con tantas IA/LLM como las que acostumbro. Sin embargo, los resultados fueron, como siempre, inesperados.

En la arena entran en esta ocasión Claude, Gemini, Cohere, Grok y Copilot.

He comentado las razones por las que de momento NO uso ChatGPT, que además nunca he usado para vibecoding.

El resultado es: Copilot ganador con 9.5 y un empate triple con Cohere, Gemini y Claude en 9.4. Grok pierde por un error simple pero fatal que lo deja en 9.3. Su comportamiento posterior me sorprendió porque cometió un error parecido al que hace de repente Copilot, y escribo de eso después.

1er lugar Copilot

2do lugar Gemini Cohere Claude

3er Grok

En la práctica, Cohere, Copilot y Gemini listos para salir de inmediato a producción.

Voy a tratar  de explicar de manera resumida las ventajas y problemas principales  de cada versión.

Los puedes consultar en el repositorio en unas tres horas y los puedes ver en ejecución aquí :

https://vibecodingmexico.com/arena/copilotdetenidos.php

https://vibecodingmexico.com/arena/geminidetenidos.php

https://vibecodingmexico.com/arena/claudedetenidos.php

https://vibecodingmexico.com/arena/coheredetenidos.php

https://vibecodingmexico.com/arena/grokdetenidos.php

Copilot: Trabajo limpio. Me he referido a él como el becario que mandas por una Pepsi fría y regresa con un café. Aquí hizo un buen trabajo visualmente y cumplió lo necesario.

Gemini: Listo para producción en realidad, pero no hizo cosas que los otros sí hicieron. Sin embargo, es el segundo en la línea si hubiera habido un problema con Copilot. Su problema principal fue lo que no hizo, pero sí puso una barra de avance muy clara. Arquitecto senior confiable. Le tuve que quitar Cosas que parecían usurpación de identidad de gobierno.

Claude: Entregó, como siempre, un portaaviones en lugar de un barquito de papel: estadísticas para dirección, código robusto, pero un problema grave. Los monitores encendidos todo el tiempo se acaban quemando y, en mi opinión, la estética oscura de ese tipo acaba dañando los monitores. El principal problema que tuvo fue que no consideró poner en letras negras el texto en las áreas amarillo y rojo pastel, así que no se podía leer. Un poco amplio, alrededor de 470 líneas. Maneja excelente mensajes de error y su desplazamiento. Sobreingeniería, pero no te hace quedar mal.

Muchas cosas que nadie mas hizo. “En vivo”, hora  en vivo, mucho muy bueno. Pero si no se  puede leer / ver no gana, y el punto de quemar monitores es real. Los monitores planos después de unos 7 años de estar encendidos casi todo el tiempo, y a veces antes, empiezan a quemarse. Yo tengo uno de 2015 que no ha estado encendido todo el tiempo pero ya tiene este problema.

Cohere: Su mayor problema es que en el universo de datos de ejemplo no puso un amarillo. Cumple y es sólido. Menos es más, es decir, es fácil de mantener. Me refiero a él como mi arma secreta. Trabajo excelente. Es un senior que está en sus propios asuntos y resuelve de una manera diferente.

Grok: Sus resultados son demasiado grandes y no se ve todo. Error simple pero fatal. Sin embargo, excelente su manejo de errores y conversiones. Superó a los otros completamente. Me refiero a él como un junior autodidacta que va a llegar muy lejos. El ultimo renglón no se ve Pero técnicamente compacto, hace cosas que no le pedí y pudo ganar de no ser que no se puede ver el ultimo renglón.

Si tuviera que elegir con presupuesto limitado en oficina real, tendría en mi oficina a Gemini y Grok, el junior autodidacta que da más de lo que pides, principalmente porque Gemini es confiable. Usa tiempos de respuesta muy rápidos en los dos. Usaría como remote office a Cohere y a Claude. Sí cumplen, pero no los puedes ni quieres usar todo el tiempo.

Y el becario depende de si mejora o no. Esta es la primera vez que Copilot gana y no comete errores.

Salieron detalles de personalidad raros en mis consultas con Grok y con Gemini. Probablemente sea necesario hacer un vibecoding ético, para hacerles benchmarks de personalidad porque los efectos secundarios de Grok y Gemini, a pesarde ser confiables, si merecen posts aparte. No es necesariamente de la sección “domando a la caja negra” pero es algo que si tengo que hacer como evaluación transversal que haría a todos mis empleados. Es un proyecto que empieza el viernes que va a empezar a ser una nueva sección.

Se van a sorprender.

En el transcurso de las próximas horas saco el código de esto al repositorio.

Repositorio de hoy :

https://github.com/AlfonsoOrozcoAguilarnoNDA/vibecodingDetenidos

Estará disponible a las  14:00 el código.

Related Posts

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *