Quantum Proxies: una web diseñada y desarrollada con IA, sin Figma

Quantum Proxies vende proxies ISP, residenciales y móviles, además de los servidores para usarlos. Querían una web nueva “a la altura”: solo en modo oscuro, construida sobre las secciones que ya tenían y con unos textos más afilados.

La diseñé y desarrollé con IA desde la primera línea hasta la versión final aprobada, y en ningún momento hubo un archivo de Figma. El primer borrador completo estaba listo en menos de una hora. La versión final aprobada llegó menos de dos días después del briefing, tras tres rondas de cambios. Ya está publicada en quantumproxies.net.

Este caso de estudio cuenta cómo es posible hoy, y qué hace falta para que el resultado sea bueno, no solo rápido.

Un archivo de Figma es una imagen de una web. Cada revisión plantea preguntas que solo responde la web de verdad: cómo se mueve, qué pasa al pasar el ratón, dónde se corta el texto en un móvil, cuánto tarda en cargar.

Diseñar directamente en código con un agente de IA elimina esa distancia. Cada ronda que revisó el cliente era la web real, con su movimiento, sus estados y sus breakpoints. Los comentarios caían sobre lo que se iba a publicar, y nada se perdía en un traspaso, porque no hubo traspaso.

Aun así, la velocidad no es lo importante. Una IA que escribe código rápido también produce trabajo genérico rápido. Lo que hizo buena esta web se resume en cinco cosas.

Los servidores MCP (Model Context Protocol) conectan un agente de IA con herramientas reales. En lugar de describirle una referencia o un render, el agente puede ir a buscarlo, crearlo o comprobarlo. En este proyecto podía buscar patrones en interfaces de productos reales, generar los renders 3D y abrir la web en un navegador para ver su propio trabajo.

Lo último es lo más importante. Un agente que ve lo que ha construido, en cada tamaño de pantalla, detecta sus propios errores antes que el cliente.

La IA rellena los huecos con ficción verosímil, y una web de proxies llena de cifras de disponibilidad inventadas es peor que una fea. El cliente lo dijo claro: no inventar nada. Así que cada cifra, cada afirmación y cada reseña de la web sale de las fuentes de Quantum, y nada más entra en la página.

Cuando el agente rellenó un hueco igualmente, se detectó y se quitó. Cuando algo no se podía confirmar, iba al cliente como pregunta en lugar de a la página. Y un registro de cada ronda, cada decisión y cada duda pendiente hizo que cada ronda nueva empezara desde los hechos y no desde la memoria.

Una IA sin referencias te da la media de internet. Las referencias son donde entra el criterio, así que fueron lo primero: webs que el cliente admiraba, sus archivos de marca y una biblioteca de referencias que llevo años construyendo, consultada y ampliada durante el proyecto.

Las referencias marcan el listón; no están para copiarlas. El hero y el mapa acabaron siendo cosas que ninguna referencia tenía.

El color, la tipografía, las esquinas, el cristal y el movimiento viven como tokens de diseño: un solo lugar donde queda escrita cada decisión visual. El azul sale directamente del logo, y el cristal es una sola receta, así que cada panel toma el color de lo que tiene detrás y cada tarjeta dentro de otra encaja.

Los tokens son lo que hace que un diseño con IA sea rápido de cambiar. Cuando el cliente pidió una tipografía más sobria para los titulares en la segunda ronda, el cambio llegó a todas las páginas a la vez en lugar de redibujarse pantalla a pantalla.

Los comentarios más útiles de todo el proyecto llegaron en la segunda ronda. El cliente dijo que las tarjetas flotantes y la consola en directo del hero parecían hechas por una IA, y que la letra de las etiquetas de sección “gritaba IA”. Tenía razón: era el aspecto genérico, con todo en movimiento, al que tiende la IA. Casi todo eso desapareció, las etiquetas pasaron a una tipografía ancha que recuerda al logotipo y la marca LED ahora sostiene el hero por sí sola.

Lo que se quedó son las ideas con personalidad:

• El hero LED. La marca de Quantum está dibujada con luz a través de una cuadrícula de celdas LED. Al pasar el cursor, se iluminan las celdas que hay debajo.
• Servidores que se apilan. Dedicated, VPS y Root tienen cada uno su propio chasis, todos vistos desde el mismo ángulo, así que se apilan en un rack que se abre como si fueran cajones.
• Casas de cristal sobre una cuadrícula. Las casas de la página Residential están todas sobre la misma cuadrícula azul, y la IP de salida salta de tejado en tejado.

Ir rápido sirve para probar más ideas, no para quedarse con la primera. Algunos visuales pasaron por media docena de versiones hasta dar con el bueno.

La web es ligera y no usa ningún framework, así que el equipo del cliente puede alojarla en cualquier sitio. La optimización para el lanzamiento redujo el peso de la landing en torno a un 40% y dejó su primer pintado en una conexión móvil lenta por debajo de tres segundos. Hay más sobre el aspecto visual en el diseño de Quantum Proxies.

En la primavera de 2024, la marca y la web de Timepiece FNF tardaron diez semanas en llegar a un diseño listo para lanzar, en Figma. Quantum Proxies pasó del briefing a una web real y aprobada en menos de dos días, y el cliente revisó la web de verdad tres veces por el camino.

El cuello de botella ha cambiado de sitio. Producir páginas ya no es lo lento. Lo lento es el criterio: elegir las referencias, no ceder con los datos y saber qué ideas descartar. Las herramientas serán cada vez más rápidas; el criterio es lo que decide si el resultado vale la pena.

Si quieres una web hecha así, hablemos.