El problema del front-end de IA «suficientemente bueno»
Los modelos de IA de vanguardia ya escriben código front-end correcto. Pídele a uno una landing page y obtendrás HTML válido, un reset razonable, marcado accesible y una cuadrícula responsive. El código funciona.
Pero «funciona» no es lo mismo que «bueno». Si se la deja con sus valores por defecto, una IA produce un aspecto genérico reconocible: el degradado oscuro de morado a azul, el texto del titular con degradado, todo centrado, tarjetas idénticas y uniformemente espaciadas, una única sombra plana. Es competente y olvidable: exactamente el tipo de resultado que erosiona una marca en lugar de construirla.
Así que nos planteamos una pregunta concreta: ¿se puede llevar de forma fiable a un agente de IA de «competente» a «genuinamente bello, cuidado al píxel e impecablemente responsive» y demostrar que la diferencia es real, no un simple deseo? Esta investigación es la respuesta.
Paso 1: Construir la base de conocimiento
Empezamos donde lo haría un ingeniero sénior: consolidando el mejor pensamiento sobre front-end en una única fuente de verdad. Analizamos seis cursos exhaustivos de front-end (717 transcripciones de clases, aproximadamente 5.3 millones de caracteres) y los destilamos en un único manual de buenas prácticas de más de 600 líneas que abarca arquitectura, sistemas de diseño, maquetación responsive, accesibilidad, semántica, rendimiento y CSS moderno.
Después lo actualizamos a la realidad de las plataformas de 2024-2025: Web Platform Baseline para las decisiones de compatibilidad, CSS moderno (container queries, :has(), cascade layers, color OKLCH, clamp()), el estado real de los prefijos de proveedor, las API modernas del navegador (IntersectionObserver, View Transitions, la Popover API, el <dialog> nativo) y Core Web Vitals.
Paso 2: Convertir el conocimiento en habilidades de agente reutilizables
Un manual que lee una persona es útil. Una capacidad que un agente de IA aplica automáticamente es transformadora. Por eso empaquetamos el manual en siete habilidades de agente modulares, cada una delimitada para activarse en el contexto adecuado y cargar la guía correcta bajo demanda:
- Arquitectura CSS: resets, tokens de diseño, la estrategia rem, BEM y organización del CSS a escala.
- Sistema de diseño web: tipografía, color, espaciado, jerarquía y diseño «la personalidad primero».
- Maquetación responsive: Flexbox, Grid, container queries y media queries basadas en EM.
- HTML semántico y accesibilidad: WCAG, compatibilidad con teclado y lectores de pantalla, y formularios accesibles.
- Animación y movimiento: animaciones eficientes y seguras para reduced-motion, y efectos modernos.
- CSS moderno y compatibilidad: funcionalidades de 2024-2025 habilitadas con seguridad mediante Baseline y feature queries.
- Rendimiento y API del navegador: Core Web Vitals, lazy-loading y la API del DOM adecuada para cada tarea.
El primer resultado fue una sorpresa: un empate
Evaluamos las habilidades primero de la forma obvia: construir las mismas tareas con las habilidades y sin ellas, y comparar el resultado con criterios objetivos. El resultado fue casi idéntico: aproximadamente un 91 % con las habilidades frente a un 95 % sin ellas.
Eso parece un fracaso. En realidad es el hallazgo más importante del proyecto. Las comprobaciones objetivas medían la corrección —si usa unidades rem, HTML semántico, una etiqueta viewport— y un modelo de vanguardia ya hace todo eso por sí solo. Estábamos midiendo lo que no debíamos.
«La corrección está resuelta. El oficio no. La brecha entre un front-end competente y uno excepcional no es conocimiento que le falte al modelo: es el buen gusto aplicado mediante la iteración y la negativa a entregar el resultado genérico por defecto.»
El avance decisivo: una habilidad que trabaja como un diseñador
Un diseñador nunca entrega el primer render. Lo construye, mira los píxeles reales, detecta lo que falla y lo refina. Las habilidades de conocimiento no podían capturar eso, así que creamos una octava habilidad, Visual Polish, que cambia cómo trabaja el agente, mediante tres palancas:
1. Un bucle de renderizar e iterar
Al agente se le obliga a dejar de resolverlo todo de una sola pasada. Construye la página, la renderiza en un navegador real, hace capturas de pantalla en cada breakpoint, critica la captura frente a una rúbrica de calidad, corrige los problemas más importantes y repite. Mirar los píxeles es la mayor palanca de todas: en nuestras ejecuciones, el agente con habilidades realizó entre 40 y 54 pasos de construcción y verificación por tarea, frente a los 3-4 del agente sin asistencia.
2. Un sistema de diseño de gran gusto, incluido en la habilidad
En lugar de decirle al agente que «use buena tipografía», entregamos valores por defecto contrastados y con criterio: un sistema de color OKLCH, un emparejamiento tipográfico editorial, una escala fluida, sombras de elevación multicapa y componentes pulidos con cada estado de interacción ya cuidado. El agente parte del buen gusto en lugar de improvisar un resultado genérico por defecto.
3. Salvaguardas y una Definición de Terminado
La habilidad nombra los «tells» exactos de la «IA genérica» que hay que evitar y define una lista de comprobación estricta que el agente debe verificar antes de declarar el trabajo terminado: sin desbordamiento horizontal en ningún breakpoint, contraste AA en modo claro y oscuro, estados de focus y hover diseñados, y movimiento que respeta las preferencias de reduced-motion.
El bucle demostró su valor de inmediato. Al construir la propia página de referencia de la habilidad, el paso de renderizado detectó dos defectos reales que una revisión de código había pasado por alto: contenido que era invisible sin JavaScript y una maquetación que se desbordaba en móvil. Ambos se corrigieron antes de entregar nada: exactamente los fallos que llegan a producción cuando nadie mira el resultado renderizado.
La prueba: un test A/B a ciegas
Las afirmaciones sobre la «belleza» son fáciles de hacer y fáciles de falsear, así que validamos con honestidad. Dimos dos briefs nuevos —una sección de precios de un SaaS y una landing page de una aplicación financiera— a un agente con habilidades y a otro sin asistencia. Renderizamos los cuatro resultados y luego entregamos las capturas de pantalla a un crítico de IA independiente que no sabía cuál era cuál, con las etiquetas aleatorizadas para que no pudiera reconocer patrones.
El veredicto fue contundente. Los diseños con habilidades ganaron ambas tareas con alta confianza, y el juez identificó de forma independiente los resultados sin asistencia como «el resultado genérico por defecto de la IA».
| Dimensión (puntuación a ciegas, 1–10) | Con habilidades | IA sin asistencia |
|---|---|---|
| Atractivo visual | 8 | 5 |
| Tipografía | 8 | 5 |
| Color y paleta | 8 | 4 |
| Maquetación y composición | 8 | 6 |
| Profundidad y acabado | 8 | 6 |
| Distinción | 9 | 3 |
| Resultado | El agente con habilidades ganó ambas tareas: la brecha es «clara, no marginal» | |
«Uno tiene dirección de arte y está claramente diseñado a medida: material de tablero de inspiración. El otro recurre a los dos mayores tells de la IA genérica a la vez: un degradado oscuro y un texto de titular con degradado. La brecha es clara, no marginal.»
Por qué esto importa
La mayoría de los equipos que adoptan la IA para el desarrollo se detienen en «produce código que funciona». Esta investigación muestra el siguiente paso, más valioso: codificar el oficio y el proceso en el agente para que su resultado sea fiablemente excelente, no solo correcto, y luego demostrarlo con una prueba real y a ciegas en lugar de con una corazonada.
Los principios se generalizan mucho más allá del CSS:
- Mide lo correcto. Si tu evaluación solo comprueba la corrección, un modelo potente siempre parecerá «suficientemente bueno» y pasarás por alto por completo la brecha de calidad.
- El proceso supera al conocimiento. Las mayores mejoras no vinieron de más reglas, sino de obligar al agente a verificar su propio trabajo frente a la realidad e iterar.
- Entrega buen gusto, no principios. Los valores por defecto contrastados y con criterio hacen avanzar el resultado más que cualquier consejo abstracto.
- Demuéstralo a ciegas. Una comparación independiente y a ciegas convierte el «a mí me parece más bonito» en evidencia.
Cómo aplica esto SplatDev
SplatDev crea sistemas de desarrollo potenciados por IA para agencias y empresas de software. No nos limitamos a apuntar una IA a tu base de código: diseñamos las habilidades, las salvaguardas y los bucles de verificación que hacen que su resultado sea fiable y de calidad genuinamente alta, y validamos el resultado en lugar de darlo por sentado.
- Habilidades de agente personalizadas adaptadas a tu stack, sistema de diseño y estándares.
- Bucles de verificación: renderizado, pruebas y revisión integrados en el funcionamiento de la IA, no añadidos después.
- Entrega basada en evidencia: medimos la calidad, no solo la velocidad.
Da el siguiente paso
Si tu equipo usa la IA para escribir código pero aún no para entregar código excelente, hay una brecha medible que cerrar, y un método para cerrarla.
¿Quieres una IA que produzca trabajo que pondrías en un porfolio, no solo trabajo que compila?
Contacta con SplatDev: construye mejor con IA
O escríbenos a [email protected]