Vibe Coding Favoritos

El codigo fuente  se encuentra en su totalidad en

https://github.com/AlfonsoOrozcoAguilarnoNDA/vibecodingFavoritos/

Actualizado el 13 de marzo de 2026

Cuando empecé a probar la IA como aliada en programación, me encontré con una situación ideal para pruebas: Control de favoritos o marcadores.

En mi trabajo normal en ese momento, el ambiente de oficina era restrictivo. Literalmente, los favoritos los tenía en el correo para que no estuvieran en la computadora. Pero yo necesitaba esos favoritos en las dos computadoras principales de mi casa, y tener acceso no solo en la oficina, sino si estaba en la calle y desde el celular.

Un dato importante es que, para mí, era parte de mi trabajo entrar desde el celular a veces en el metro y hacer una corrección o checar un dato del sistema principal, para ayudar a sucursales y a un jefe de departamento que nunca fue mi jefe. Así que tuve que desarrollar poco a poco una interfaz que pudiera usar en el metro, que se viera bien en computadoras lentas con redes inestables.

Así que tenemos la necesidad de crear un sistema de control de favoritos que pueda usarse desde cualquier lugar, y con un control de acceso por contraseña o dirección IP.

Mi regla ha sido siempre tratar de hacer cosas útiles para los demás y agradables para mí mismo. Es frecuente que diseñe reportes para mi uso que después todo el mundo usa; y creo que a todo el mundo le sirve un control de favoritos que no dependa del navegador ni de la máquina.

Joel Spolsky, creador de las reglas revolucionarias de diseño del Excel 5.0, tiene varios artículos y uno de ellos se basa en especificaciones funcionales. Si quieres, búscalo. El inventó el término por el 2002 y sigue siendo vigente y moderno.

Por lógica, necesitamos un servidor. Y una contraseña. Algo que sea ligero y que puedas montar a lo MacGyver: hacer más con menos, economía de trincheras.

Esto nos lleva a varias limitaciones de lenguaje. Usar React/Spring requiere instalar React y Spring, y eso es… ¿una hora y media si sabes lo que haces y sigues mi manual de cinco partes?

¿Qué otros lenguajes te quedan para servidores? Ruby, Python, PHP.

Mi consejo para empezar es que debes tener una superficie simple de trabajo; que si roban la oficina o roban en tu casa, tu información esté en otra parte. Te sugiero que compres hoy un dominio con tu nombre completo, si no lo tienes ya, y un hospedaje web sencillo CPanel. Si no sabes usar CPanel (que se sale de este artículo), no vas a poder solucionar problemas de algunos clientes; pero, literalmente, es la solución más simple y barata que puedes encontrar para hospedaje web.

Por la regla de redundancia, tenemos que conocer varios proveedores.

Te sugiero que compres el dominio con extensión .com en dynadot.com, que es muy equilibrado y fácil de usar. Tus datos de dirección son públicos, pero eso es importante: no te estás escondiendo. Nunca contrates hospedaje en el mismo lugar donde contratas el dominio, y siempre usa empresas conocidas.

¿Mi sugerencia? Contrata tu dominio en dynadot.com y un plan económico en Hostinger. Lo que buscas se llama alojamiento compartido (shared hosting). Usa su sistema de pago de mes con mes, o el pago anual si es menor de 30 USD.

Mi consejo es hosting-mexico.net, que por unos 500 pesos te da un año de CPanel; más que suficiente para esa etapa en la que estás “en patines antes de andar en bicicleta”. Si quieres ir a lo seguro, aunque sea en inglés, el mejor es knownhost.com con su plan de 6.71 USD mensuales. Por lo general, lo más sano es estar pagando mes con mes y poder cambiar si el proveedor no cumple; además, el control de tu dominio en Dynadot es una experiencia de independencia.

Sugerencias por orden:

• Hospedaje: CPanel Shared Knownhost, hosting-mexico.net, Neubox o suempresa.com (si confirmaste que son CPanel). No uses Hostgator.

• Comprar dominio: dynadot.com. Opciones: porkbun.com, spaceship.com y namesilo.com. No uses GoDaddy.

La calidad de tu comida es tu marca. La calidad de tus proveedores es tu marca. ¿Les vas a confiar el dominio con tu nombre a desconocidos o a lo más barato? No.

Elegimos cPanel porque es un estándar desde hace 25 años; yo lo uso desde el 2001, más o menos. Ahora bien, el hospedaje cPanel te deja usar Python, Perl, Ruby y PHP, pero mi consejo “brutalmente honesto” (Reglas 1 y 2) es: Quédate con PHP.

Al igual que con Python, muchos proveedores ya incluyen “Setup Node.js App” para correr aplicaciones de JavaScript en el servidor. Pero tiene una limitación: en un entorno compartido, no puedes dejar procesos pesados corriendo eternamente porque el Watchdog del servidor te va a matar el proceso si consume mucha RAM.

También está Perl, el “abuelito” que siempre está ahí (cPanel mismo está escrito en gran parte en Perl) y sirve para scripts CGI antiguos o procesamiento de texto muy específico. Casi nadie lo usa ya para web nueva, pero ahí está. O Ruby (on Rails), que es el más difícil de ver en proveedores económicos porque consume muchos recursos; si lo tienen, suele ser en versiones algo viejas.

¿Por qué usar PHP? Desde la versión 7.x tiene varias mejoras y, para vibe coding, es barato, confiable y probado en batalla. Usaré mis ejemplos en PHP porque es lo más simple de replicar. Si vas a seguir la filosofía MacGyver y de economía de trincheras:

• Portabilidad: Un código en PHP corre en el 100% de los cPanel del mundo. Si mañana te peleas con un proveedor y te vas a otro, solo arrastras los archivos y listo; incluso lo hacen por ti. Tu respaldo es de un solo paso.

• Cero configuración: No tienes que entrar a “Setup App”, elegir versión ni reiniciar el servidor. Subes por FTP y ya funciona.

• Ligereza: Para un control de favoritos, PHP es el envase de vidrio: limpio, rápido y no le cambia el sabor a la información.

Así que tu respaldo de cPanel es como un Tupperware que puedes cambiar de refrigerador. Sí, vas a tener que pelear un poquito viendo cómo direccionas el dominio a tu proveedor, pero créeme: esto es muchísimo más fácil que lo demás.

Vamos a suponer que ya creaste una base de datos. Por ahí dice “MySQL Database Wizard”. Búscalo en el menú, crea una base de datos y un usuario.

Ahora sí. Vamos a pensar en algo seguro. ¿Qué sabemos?

• No queremos que se vea la contraseña de la base de datos, ¿no?
• Queremos algo que se pueda usar en celular.
• Queremos algo que te pida contraseña
• Para la prueba, queremos verlo sin contraseña.
• Que maneje categoría de favoritos.
• Altas, bajas y cambios de favoritos y categorías.
• Para que sea simple, en una sola página.
• No necesitas “buscar” porque eso lo haces en el navegador con control f.
• Como adorno, que nos de la posibilidad de elegir color e icono de cada categoría y que lo organice en orden alfabético.

La lógica te dice que, si vas a usarlo en celular, lo mejor es un sitio web, porque hacer una aplicación es tardado y entras en otro universo de reglas. PHP es lo mejor por lo que vimos antes. Y la tecnología de PHP para esto es:

• Bootstrap (apariencia gráfica).

• Font Awesome (iconos).

Yo suelo usar Bootstrap 4.6.x por compatibilidad con otros proyectos, pero no le indicaremos eso a la inteligencia artificial. Si no sabes diseñar bases de datos, eso es muy diferente a la programación. Puedes pedirle a Gemini o a un chatbot que te arme una estructura.

Lo mas seguro es que ya la tengas… y si le pides a varias IA que te haga la estructura, estarian trabajando de manera diferente y comparas peras con manzanas. Pero tus datos son tus datos, y esto es vibecoding, no vibedesigningdatabasesmexico.com asi que por referencia esto es lo que dice Gemini:

• Tabla categorias:

  • id (llave primaria, autoincrementable)

  • nombre (ej. “Trabajo”, “Personal”)

• Tabla favoritos:

  • id (llave primaria, autoincrementable)

  • categoria_id (para relacionarlo con la tabla anterior)

  • titulo (el nombre del sitio)

  • url (la dirección web)

  • orden (por si quieres que uno aparezca siempre hasta arriba)

Pero yo, editor de este sitio te sugiero esto , suponiendo que seas el único usuario:

DROP TABLE IF EXISTS `LINKS`;

CREATE TABLE `LINKS` (
  `link_id` int(11) NOT NULL AUTO_INCREMENT,
  `category_id` int(11) NOT NULL,
  `link_title` varchar(200) NOT NULL,
  `link_url` text NOT NULL,
  `link_comment` text DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  PRIMARY KEY (`link_id`),
  KEY `category_id` (`category_id`),
  CONSTRAINT `LINKS_ibfk_1` FOREIGN KEY (`category_id`) REFERENCES `LINK_CATEGORIES` (`category_id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


DROP TABLE IF EXISTS `LINK_CATEGORIES`;
CREATE TABLE `LINK_CATEGORIES` (
  `category_id` int(11) NOT NULL AUTO_INCREMENT,
  `category_name` varchar(100) NOT NULL,
  `category_icon` varchar(50) NOT NULL DEFAULT 'fa-link',
  `category_color` varchar(20) NOT NULL DEFAULT 'metro-blue',
  `created_at` timestamp NULL DEFAULT current_timestamp(),
  PRIMARY KEY (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Otra cosa. No creo que quieras darle a la IA los datos de acceso a tu base de datos, ¿no? Y mucho menos en cada proyecto. Así que lo más sano es poner los datos de acceso en un archivo aparte y que él establezca la conexión de base de datos.

Así que vamos a hacer una pausa y buscar en la web whatismyipaddress.com y fíjate cuál es tu dirección IPv4.

Para conseguir esa separación, yo uso un archivo llamado config.php y otro para cada minisistema. Aquí serían config.php y favoritos.php.

Crea un archivo de texto con tu bloc de notas y cambia la dirección 123.123.x.x por la tuya

Esto lo puedes copiar del repositortio que está al inicio del artículo, si copias de aquí puedes tener problema con las comas.

¿Por qué esta regla de procedural y pedir versión php es vital? (Consejo de Senior)

Pedir la versión de PHP en el pie de página (phpversion()) es aplicar la Regla de “No te confíes”.

• Depuración rápida: Si el código falla porque la IA usó una función de PHP 8.2 y tu servidor tiene la 7.4, lo verás de inmediato sin tener que entrar al cPanel a buscar.

• Seguridad: Saber la versión te dice qué tan vulnerable o actualizado está tu entorno de trabajo.

• Consistencia: Si vas a mover tu “Tupperware” (respaldo) a otro servidor, comparar las versiones de PHP entre el origen y el destino te dirá si va a funcionar a la primera

• Procedural: Hay un artículo muy interesante llamado programación orientada a objetos, el fraude del trillón de dolares. Si quieres algo confiable y rapido, y ligero para la IA, Procedural es lo contrario a objetos y tu mejor opción. Es una regla desde ya. Lo simple tiene valor de supervivencia.

• Claude le pedí un barquito de papel y me dio un bunker con helicoptero de 900 lineas. Bueno pero excesivo. Esto me recuerda cuando me pidieron copiar los datos principales de un acta constitutiva para una tarea pero en lugar de una presentacion de dos o tres láminas encontré algo que no podía dejar pasar e hice una presentacion de 99 laminas y papeles de trabajo de 38 paginas para justificar NIA 320 (normas de auditoría 320) por algo que me di cuenta del acta y el domicilio ( si quieres verlo aqui es  https://alfonsoorozcoaguilar.com/analisis-forense-integral/ ) , Claude es como el Doc Brown de Volver al futuro., te pide disculpas por no hacer los modelos a escala y te entrega el tren que vuela …. mientras tenga combustible.
  • En este caso se le olvido el altas bajas y cambios de categoría. Cuatro horas despues le puedo decir se te olvidó esto
  • Hay un dedazo. Si está categorías pero no funciona. No muestra todos los favoritos ni el footer. Puedo depurarlo yo o decirle a el.
  • Dos errores. Desobediencia funcional y estética.   Este caso especial no uso metro, se ve bootstrap simple. Con iteraciones se corrige pero …. aqui yo le preguntaría a mi programador. ¿ tienes problemas personales ?
  • Si te lo corrige pero en unas horas.
• Grok. Me dio todo de inmediato pero sin pedirme primero ni mi config.php ni mi estructura de base de datos. Lo que entregó tenia problemas serios y me recordó mucho lo que pasa cuando mando a mi hija al mandado. Pero al desobedecer instrucciones no es el programador estrella, sino el semi-senior pedante que nadie soporta; ese que cree que el cliente no sabe lo que quiere y termina entregando una pieza de ingeniería que no conecta con nada. Si trabajas a su modo, te vuelves su esclavo técnico; si intentas integrarlo a tu flujo real, simplemente se rompe porque nunca se molestó en mirar tus planos. Le pedí que usara mi config y base de datos y eso es lo que presento.
  • Error 500. Resulta que usó shorttags que no funcionan en todas las versiones de php. Le dije y lo corrigio de inmediato.
  • Solo que uso sus datos de ejemplo y no el config.php
  • Le dije en qué se equivoco y de inmediato en menos de diez minutos me dio algo impresionante. Es el genio rebelde al que no sabes si recompensar o agarrarlo a golpes.
  • Todo en menos de 10 minutos. Puedes trabajar con el.
• Chatgpt. Parece que a partir de cierto momento, y no lo uso mucho, te quiere forzar a canal de pago. Simplemente no me dio nada. Something went wrong while generating the response. If this issue persists please contact us through our help center at help.openai.com. , y yo interpreto que me va a decir que tengo memoria completa, pero como lo use para cálculos de una licitación y un uso mediano de junio a septiembre, ahora va a ser un mensaje de pasar a plan  . Si usas muchos números tiene sentido plan de pago, pero no vas a sacrificar tu historial por esto y en momentos críticos, lo que es limpio para el, para tí es inutil.
• Copilot. Me dio dos códigos incompletos. Si fuera un junior , despedido. Es exactamente lo que mencionaba en otro lugar. Vale la pena destacar que mi experiencia personal , si le paso un código de 400 lineas para que le haga una mejora de cinco lineas, lo reduce a 255 perdiendo la mitad de la funcionalidad.  Le digo que revise y me dice ahora si es la versión completa, dandome 320 lineas con menos funcionalidad. Solo sirve para funciones muy simples. Literalmente es Dory de Buscando a Nemo. No es solo un chiste, es una advertencia de seguridad.
• Gemini. Equilibrado y funcional.
• Minimax. Le puse el mismp prompt el 13 de marzo, unos 40 dias después y ganó absolutamente.

  • El mismo reto fue puesto a prueba con MiniMax-M2.5, disponible en chat.together.ai en el panel izquierdo. El resultado fue el más sólido de todas las IAs evaluadas: respetó el stack exacto (Bootstrap 4.6.2, Font Awesome 5.15), incluyó los headers de caché desde el inicio, respetó el config.php, implementó el CRUD completo de categorías y cada categoría tiene su propio collapse independiente. Se ve impecable. Por líneas de código no gana, pero por disciplina técnica y cumplimiento de reglas, es la IA que ganó con un 9.5.

    Como parte de un experimento en curso, esta versión del control de favoritos está publicada bajo licencia LGPL (no MIT) y puedes descargarla en: github.com/AlfonsoOrozcoAguilarnoNDA/lemkotir

Otra cosa. A ninguna Ia se le cocurrió el problema del caché.

• El “truco” de las tablas: El CREATE TABLE IF NOT EXISTS es lo que separa a un programador de tutoriales de un Administrador de Sistemas. Tu código es “Plug & Play”.

• El Cache-Control: Ese detalle es oro puro de experiencia. Sin eso el usuario borraría un link en el metro y pensaría que no funcionó porque el navegador le sigue mostrando la versión vieja.

No es que mas líneas sean mejor.

Análisis del Peso Técnico

1. Claude (908 líneas): Es el “camión de carga”. Es tan largo porque no escribe código plano; crea una arquitectura. Incluye una sección de CSS de casi 150 líneas solo para que los colores “Metro” sean exactos. Es el más robusto, pero no pudo hacer nada más por varias horas.

2. Copilot (420 líneas): Se quedó a mitad de la batalla. Su límite de salida (tokens) no le permitió terminar el HTML. Técnicamente, esas 420 líneas son basura digital si no sabes cómo cerrar manualmente las etiquetas que dejó volando.

3. Grok (408 líneas): Un tamaño intermedio, pero desperdiciado. Al usar POO (new mysqli) y re-declarar la conexión que ya existía en tu config.php, gran parte de sus líneas son redundantes o conflictivas.

4. Gemini (177 líneas): Es la “navaja suiza”. Logró meter la seguridad (IP/Pass), el CRUD completo de categorías, el CRUD de links, los modales de edición y el CSS Metro en menos de 200 líneas. Es el más eficiente para un despliegue rápido en cPanel.

5. El humano (yo) 620 líneas. Con control de caché vista agradable y entrega después de probar y lleva usandolo seis meses porque pensó que lo ibas a necesitar.
6. Minimax (845) líneas hizo algo excelente y como parte de un experimento con esa IA, lo procesé  un mes después y creo que es el ganador de LLM. Subí la imagen y la pongo abajo  Hizo un collapse de las categorías que a nadie se le ocurrió.

Conclusión técnica: Para artículo, este dato es demoledor. Demuestra que Claude tiende a la sobreingeniería, Copilot a la fatiga, Grok a obedecer y dar algo impresionante cometiendo errores de principiante pero de alta calidad y Gemini a la síntesis operativa.

Corolario: Como partede pruebas del otro proyecto y reposiotorio se puso esto a Minimax y estoy muy satisfecho. Sin embargo me sigue gustando mas mi propia versión pero por coherencia y sinceridad pongo las dos opciones.  Se concluye que cuando salen nuevos competidores hay que reevaluar.

Grok: El genio insoportable (y rápido)

Grok me puso a prueba. Primero me dio un Error 500, luego “olvidó” mi arquitectura de archivos… pero cuando por fin se centró, lo que entregó en menos de diez minutos fue impresionante.

A diferencia de Claude, Grok sí entendió el “Vibe” del estilo Metro:

• Mosaicos reales: Nada de Bootstrap genérico; se fue a lo plano y sólido.

• Funcionalidad total: Las categorías funcionan, los colores están ahí y los iconos cumplen.

• Velocidad de redención: Lo que a otros les toma horas de iteración, él lo resolvió en un suspiro tras el regaño.

¿El problema? Que para llegar a ese tesoro tuve que pasar por el pantano del Error 500. Es el programador al que quieres premiar por el resultado final, pero al que quieres “agarrar a golpes” por el estrés innecesario que te hizo pasar al principio por no leer bien los manuales (el config.php).

Aquí tienes el resumen estrictamente técnico de la comparativa entre los modelos evaluados para sistema de favoritos:

1. Gemini (El enfoque MacGyver / Directo)

• Paradigma: Procedural puro (mysqli_query, mysqli_fetch_assoc).

• Acoplamiento: Totalmente alineado con config.php y el recurso $link. No requiere ajustes de infraestructura.

• Gestión de UI: Utiliza el control de flujo de PHP para disparar modales de Bootstrap mediante JS condicional al final del documento.

• Seguridad: Validación de IP mediante unserialize(AUTHORIZED_IPS) y fallback de sesión con clave hardcoded.

• Observación: Es el código más eficiente en relación funcionalidad/líneas de código (LOC).

2. Claude (El enfoque Enterprise / Modular)

• Paradigma: Funcional-Abstracción. Encapsula la lógica en funciones (get_all_categories, process_action).

• Complejidad: Elevada (900+ líneas). Separa la lógica de negocio de la vista de forma casi profesional.

• UI/UX: Implementa un sistema de variables CSS (:root) para una tematización Metro real y feedback visual (alertas de éxito/error).

• Seguridad: Sanitización estricta con intval() y real_escape_string(). Implementa un TEST_MODE mediante constantes (define).

• Observación: El uso de INNER JOIN para listar links optimiza las consultas a la DB, pero requiere integridad referencial (CASCADE) en la base de datos para no dejar registros huérfanos.

3. Copilot (El enfoque Híbrido / Truncado)

• Paradigma: Mixto. Usa funciones para lectura (SELECT), pero código lineal para escritura (INSERT/UPDATE).

• Falla Crítica: Error de Token Limit / Timeout. En dos intentos, fue incapaz de cerrar las estructuras de control (while, if) y etiquetas HTML (</form>, </body>).

• Seguridad: Implementa session_status() para prevenir errores de cabeceras (headers already sent).

• UI: Dependencia de clases CSS manuales (el usuario debe conocer los nombres de las clases predefinidas).

• Observación: Técnicamente inútil para despliegue directo debido al truncamiento sintáctico.

4. Grok (El enfoque Inconsistente)

• Paradigma: POO (Programación Orientada a Objetos) mediante la clase mysqli.

• Error de Arquitectura: Ignoró la instrucción de usar el archivo procedural config.php existente, intentando re-declarar la conexión como objeto (new mysqli).

• Sintaxis Obsoleta: Uso de Short Open Tags (<?), lo cual genera fallos de interpretación en configuraciones estándar de PHP 7.4/8.x.

• Observación: Alta probabilidad de Error 500 por incompatibilidad de tipos entre el recurso de conexión y los métodos de objeto invocados.

Resumen de hallazgos para el artículo:

• Fiabilidad de salida: Gemini > Grok > Claude > Copilot ( suele ganar Claude)

• Apariencia: Gemini / Grok > Claude > Copilot

• Seguridad SQL: Claude > Copilot > Gemini > Grok.

• Integración (Vibe Coding): Gemini (mejor entendimiento de las restricciones de infraestructura del usuario).

Mi calificación final:

• Claude es el programador senior. Si le pagas te responde rápido y bien. Calificación 9.0
• Grok es el junior autodidacta que sigue las ordenes al pie de la letra y que las sigue  pero le falta experiencia y habilidades blandas como cortesía y prudencia pero puedes trabajar con el Calificación 9.0
• Gemini es  metódico, no ambicioso pero suele hacer las cosas bien. Calificación 9.0
• Copilot. Es el becario que no hace nada pero que segun tu te va a ahorrar dinero. Si le pides sacar copias esta bien, pero si lo mandas por una pepsi regresa con un café. Calificación 6.0, porque lo puede completar otro.
• ChatGPT El programador que te dicen es muy bueno pero que nunca entrega nada y no lo has visto trabajar. Cero por ahora.

¿Y qué haría un humano?

Lo que vas a ver en mi versión final no es solo código; es experiencia acumulada. Mientras que las IAs se pelean por ver quién usa la versión más nueva de Bootstrap o quién escribe más funciones, el humano se enfoca en que la herramienta sea una extensión de su mano.

• Nota: Mi versión cumple lo necesario en seguridad y sanitize porque ya corre  desde una IP segura. Se puede mejorar sí, pero a menos que un atacante esté en mi propia IP y con mi clave de acceso no puede hacer nada. Es una prueba de concepto funcional que no maneja datos confidenciales. De momento no necesito hacerle hardening.

Mi versión está basada en una respuesta de imagen simple creada por Copilot, y modificada por Gemini de hace seis meses, pero curada, podada y pulida por mí. El resultado es un sistema que llevo usando medio año y que, visualmente, sigue aplastando a las propuestas actuales de la IA.

El toque humano se nota en:

• La Intencionalidad del Diseño: La IA pone colores porque “se ven bien”. Yo puse colores y tamaños pensando en el rebote del vagón del metro y en la fatiga visual de las 6:00 AM.

• La Resiliencia: Mi código no asume que la red es perfecta. Está diseñado para que, si la señal cae, lo que ya cargó sea útil y no se quede la pantalla en blanco esperando un CDN de Bootstrap 5.

• La Síntesis: Logró en menos de 700 líneas lo que a Claude le tomó 900. Eso se llama mantenibilidad. Si algo falla en tres meses, tardo 30 segundos en encontrar el error. Con Claude, tardaría media hora solo en leer sus propios comentarios. Gemini fue una base para trabajar y quizá la mejoré con Claude.

Regla de Oro: La IA es el copiloto, pero tú eres el que sabe a dónde va el avión. Si dejas que el copiloto vuele solo, podrías terminar con un búnker de 900 líneas en un lugar donde solo necesitabas un barquito de papel que flote.

Imagenes por facilidad de uso:

Humano (yo)

Grok ( 9.0 pero no jaló a la primera)

Gemini (9.0 Simple y funcional lo que se ve feo es mi base no gemini)

Claude (le pedí metro… donde estan los mosaicos ??)

Minimax (Hizo categorias colapsables)