Este es el secreto inconfesable detrás de todo el frontend de SynaBun: no se hizo con prompts cuidadosamente elaborados, ni con tokens de diseño, ni con maquetas de Figma. Se hizo con frustración, groserías e insultos cada vez más creativos dirigidos a una IA que insistía en darnos la misma basura genérica de plantilla para startups.

Y funcionó. Mucho mejor de lo razonable.

El estancamiento de los prompts amables

Toda sesión de programación con IA empieza igual. Pides las cosas con amabilidad. «Por favor, crea una landing page moderna con tema oscuro y efectos de glassmorphism». Te devuelve algo que parece salido de un generador aleatorio de plantillas de Tailwind de 2023. Esquinas redondeadas por todas partes. Un degradado que grita «aprendí CSS con un tutorial de YouTube». Un titular que dice «Construimos el futuro del mañana, hoy» en Inter Bold de 47px.

Lo intentas de nuevo. Agregas más detalle. «Usa una fuente monoespaciada. Que se sienta como una terminal. Fondo oscuro, bordes sutiles, nada de degradados gratuitos». Vuelve un poco mejor, pero sigue irradiando aire de plantilla genérica. Cada sección se parece a cualquier otra landing page generada con IA que haya en internet. El espaciado está mal. La jerarquía es plana. Tiene ese olor inconfundible a cosa generada por IA, donde todo es técnicamente correcto y emocionalmente muerto.

Esto es lo que llamamos el estancamiento de los prompts amables. Puedes seguir agregando adjetivos a tus prompts eternamente. «Elegante». «Sofisticado». «Premium». «Minimalista pero impactante». La IA asiente y te entrega el mismo resultado tibio con valores de padding ligeramente distintos.

El punto de quiebre fue la rabia

El verdadero punto de quiebre llegó un martes a las 2 de la madrugada, cuando la barra de navegación se negó a centrarse bien en móviles por cuarto intento consecutivo. La conversación fue más o menos así:

«Esto es una auténtica basura. La navegación está cortada, el hero tiene más espacio en blanco que contenido y todo parece un tema gratuito de WordPress de 2019. Me daría vergüenza mostrarle esto a alguien. Arréglalo o lo reescribo yo mismo en HTML puro».

Lo que volvió era notablemente distinto. El espaciado se ajustó. Las decisiones tipográficas se volvieron más audaces. El diseño dejó de ir a lo seguro. Fue como si la IA de pronto entendiera que «que se vea bien» no era un objetivo suficiente y pasara a «que se vea tan bien que esta persona deje de gritar».

Así que seguimos.

El ciclo de retroalimentación de la rabia

Lo que descubrimos, tras meses de construir el sitio web de SynaBun, es que los comentarios negativos y agresivos producen iteraciones de interfaz muchísimo mejores que las críticas amables y constructivas. No porque la IA responda a las emociones. No tiene emociones. Sino porque la rabia obliga a ser específico.

Cuando dices «esto se podría mejorar», la IA tiene infinitas direcciones posibles. Cuando dices «esta sección parece diseñada por alguien que nunca ha visto un sitio web, las tarjetas se ahogan en padding y la tipografía no tiene jerarquía alguna», la IA de pronto sabe exactamente qué arreglar. El insulto lleva información.

Así es un ciclo típico de iteración guiada por la rabia:

  1. Intento 1: petición amable. La IA produce algo genérico y seguro. No sientes nada al mirarlo.
  2. Intento 2: corrección levemente frustrada. «No, así no. Haz las tarjetas más pequeñas, reduce el padding, la fuente es demasiado grande». El resultado mejora un 15%.
  3. Intento 3: irritación genuina. «¿Por qué esto sigue pareciendo una plantilla de Bootstrap? El espaciado es inconsistente, el radio de los bordes está mal en todos los elementos y el contraste de color es horrible». El resultado mejora un 40%.
  4. Intento 4: rabia total. «Esto es una mierda. La marquesina se sale de la pantalla, la navegación móvil está rota y en el hero hay tanto espacio muerto que cabe un camión. Llevo una hora mirando esto». El resultado es, de pronto e inexplicablemente, bueno de verdad.

Pasamos por este mismo ciclo en cada sección importante del sitio web de SynaBun. La marquesina de herramientas MCP. La sección del lienzo de memorias. La tabla comparativa. La terminal de primeros pasos. Todas siguieron el mismo patrón: basura amable, mediocridad frustrada, mejora enojada, calidad alimentada por la rabia.

Por qué funciona de verdad

Después de suficientes sesiones así, empezamos a entender el mecanismo real. No es magia y la IA no te tiene miedo. Ocurren tres cosas:

La rabia es específica. «Esto se ve mal» no sirve de nada. «Esto se ve mal porque la navegación se desborda en móviles, las tarjetas se cortan a 375px y el fill-mode de la animación está pisando mis media queries» es un reporte de error preciso disfrazado de insulto. Cuando estás lo bastante enojado, dejas de ser vago. Señalas exactamente lo que está mal porque estás demasiado frustrado para suavizarlo.

La rabia eleva la exigencia. Cuando dices con amabilidad «¿podrías mejorarlo un poco?», la IA hace un cambio mínimo y lo da por terminado. Cuando dices «esto es inaceptable y me niego a publicarlo», la IA entiende que los ajustes graduales no bastan. Hace cambios más grandes y más audaces. Deja de conservar las decisiones seguras de las iteraciones anteriores y rediseña de verdad.

La rabia comunica criterio. Esta es la más sutil. Cuando dices «esto parece una plantilla gratuita», estás comunicando que sabes distinguir entre un trabajo con calidad de plantilla y uno hecho a medida. Cuando dices «el espaciado se siente mal», le estás diciendo a la IA que tienes opiniones sobre el ritmo visual. La IA calibra su resultado según tu nivel aparente de cultura de diseño, y el enojo indica que tus estándares son altos.

Ejemplos reales de SynaBun

El sitio web de SynaBun que ves hoy pasó por decenas de estos ciclos de rabia. Algunos momentos destacados:

La barra de navegación. Tomó cinco iteraciones. La primera versión era una fila flex que se desbordaba en móviles. La segunda agregó un menú hamburguesa que en realidad no funcionaba. La tercera tenía una animación CSS cuyo fill mode forwards pisaba de forma permanente los estilos de las media queries, un error que solo encontramos después de gritar «¿por qué no funciona transform: none?» durante treinta minutos. La versión final tiene un menú desplegable con desenfoque de cristal, un z-index bien resuelto, cierre con la tecla Escape y cierre al hacer clic afuera. Llegó hasta ahí porque nos negamos a dejar de quejarnos.

La sección de herramientas MCP. La IA insistía en generar las herramientas como una cuadrícula estática. Nosotros queríamos una marquesina de desplazamiento infinito. El primer intento de marquesina dejaba tarjetas cortadas fuera de la pantalla. El segundo tenía una animación que iba a tirones. En móviles era un caos ilegible de filas con desplazamiento horizontal y tarjetas partidas por la mitad. Dijimos, cita textual: «la sección de herramientas todavía necesita arreglo», acompañado de una captura de pantalla que mostraba el desastre. El arreglo exigió sobrescribir las clases aplicadas por JS con display: grid !important y ocultar los conjuntos duplicados de la marquesina. Solo ocurrió porque seguimos enviando capturas de pantalla furiosas.

El hero. El hero original tenía tanto contenido que en móviles había que desplazarse dos alturas completas de pantalla entre texto, estadísticas, insignias, contadores y botones antes de llegar a algo de contenido real. Lo llamamos «demasiadas cosas en una sola escena». La versión final oculta el contador en móviles, compacta las estadísticas en una sola fila, reduce todos los tamaños de fuente y usa 100dvh para manejar bien el viewport en móviles. La IA no sugirió ninguno de estos cambios por iniciativa propia. Cada uno se obtuvo a fuerza de quejas.

La verdad incómoda

La verdad incómoda sobre las interfaces generadas con IA es que la IA tiende por defecto a lo mediocre. No porque no pueda hacerlo mejor, sino porque «mejor» es subjetivo y arriesgado. Un diseño seguro y genérico nunca recibirá críticas directas. Uno audaz y con carácter, tal vez sí. Así que la IA va a lo seguro a menos que le dejes claro que lo seguro no es aceptable.

Es la misma dinámica que se da con los diseñadores humanos que presentan tres opciones: una segura, una moderada y una audaz. Si siempre eliges la segura, siguen produciendo opciones seguras. Si presionas una y otra vez por un trabajo más audaz, calibran hacia arriba. La IA funciona igual, solo que la calibración ocurre dentro de una sola sesión y no a lo largo de meses de trabajo en conjunto.

Con la memoria persistente de SynaBun, esa calibración se mantiene de una sesión a otra. La IA recuerda que tienes estándares altos, que te importa el espaciado, que odias los degradados genéricos y que vas a rechazar cualquier cosa que parezca una plantilla. La rabia de la sesión 1 define la calidad del resultado de la sesión 47.

Un método para la rabia productiva

Después de construir un sitio web entero de esta manera, tenemos algunas observaciones que pueden servirte si te encuentras en la misma situación:

  • Las capturas de pantalla son munición. Enviar una captura de lo que está roto vale más que cualquier descripción. La IA procesa exactamente lo que tú ves y no puede fingir que el problema no existe.
  • Compara con sitios reales. «Esto debería verse como la landing page de Linear, no como una plantilla de Squarespace» le dice a la IA exactamente qué nivel de calidad se exige.
  • Nombra la falla concreta. «El padding está mal» es débil. «Hay 80px de padding en una tarjeta que debería tener 20px, y eso hace que toda la sección parezca una diapositiva de PowerPoint» es fuerte.
  • No aceptes mejoras incrementales. Si la IA mejora algo un 5% cuando necesitas un 50%, díselo. "Esto apenas se diferencia de la versión anterior" la obliga a hacer un cambio más grande.
  • Reconoce cuando algo está bien. Esto importa. Cuando la IA por fin acierta en algo, díselo. Refuerza lo que significa "bueno" en ese contexto. La rabia solo sirve para calibrar si también hay una señal positiva.

El resultado

El sitio web de SynaBun lo construyó por completo Claude Code. Cada sección, cada animación, cada breakpoint responsive, cada efecto de vidrio esmerilado. No se creó ningún archivo de Figma. No se usó ningún framework de CSS. Ningún humano escribió una sola de las más de 13.000 líneas de HTML y CSS del archivo index principal.

Y no parece generado por IA. De eso se trata. Parece hecho por un diseñador humano con criterio propio, porque salió de un proceso que obligó a la IA a formarse un criterio, una iteración furiosa a la vez.

El desarrollo guiado por la rabia no es una metodología que recomendaríamos llevar a tu retrospectiva de sprint. Pero si estás construyendo UI con IA y los resultados siguen saliendo planos, genéricos y sin vida, considera que el problema quizá no sean tus prompts. Quizá sea que eres demasiado amable. La IA puede hacerlo mejor. Solo necesita saber que tú sabes que puede hacerlo mejor, y que no te vas a callar hasta que lo haga.