TipsIA

Modern Web Guidance: evita que la IA te escriba frontend antiguo

Google Modern Web Guidance ayuda a que los agentes de IA generen frontend moderno: cómo usarlo para revisar rendimiento, accesibilidad y seguridad.

Agente de IA revisando una interfaz web moderna con paneles de accesibilidad, rendimiento y seguridad

Cuando usas IA para montar una interfaz, el problema no suele ser que no escriba código. El problema es que muchas veces escribe código viejo con apariencia nueva: modales hechos a mano, tooltips frágiles, layouts que no aprovechan container queries, parches de JavaScript para cosas que el navegador ya sabe hacer y componentes que funcionan en escritorio pero se rompen en móvil.

Ahí entra Modern Web Guidance, una iniciativa del equipo de Chrome para meter buenas prácticas actuales de la plataforma web dentro de los agentes de código. No es otro framework ni una librería visual. Es un conjunto de instrucciones y skills que tu agente puede consultar para no resolver problemas de 2026 con recetas de 2019.

La idea es sencilla: instalas la guía en tu flujo de trabajo y le pides al agente que revise o construya una parte de la web usando esas reglas. Google propone casos muy concretos: migrar modales antiguos al elemento <dialog>, sustituir tooltips legacy por Popover API y CSS Anchor Positioning, usar container queries para componentes que se adapten a su propio espacio, preparar una política CSP inicial o atacar problemas de LCP e INP.

Para una web real, esto importa más de lo que parece. Si el agente genera una landing bonita pero llena de dependencias, capas absolutas y eventos duplicados, luego pagas la factura en mantenimiento, rendimiento y accesibilidad. Modern Web Guidance sirve como una segunda voz técnica: obliga al agente a mirar APIs modernas, compatibilidad de navegador, seguridad básica y experiencia de usuario antes de darte el código por terminado.

Un uso práctico sería este: antes de entregar una página, pide a tu agente que la revise con Modern Web Guidance en cuatro bloques: accesibilidad, rendimiento, CSS moderno y seguridad. Después compara sus propuestas con lo que ya tienes y aplica solo cambios verificables. No se trata de aceptar todo lo que diga la IA, sino de darle mejor criterio para que no invente soluciones peores que el problema.

Mi lectura: si usas Codex, Claude Code, Copilot o Cursor para tocar frontend, esta clase de herramientas va a ser cada vez más importante que el modelo concreto. El modelo cambia cada mes. Tus reglas, tus pruebas y las guías que le das al agente son lo que evita que una web aparentemente moderna acabe siendo difícil de mantener.

Fuentes

Hablemos de tu web

Sobre esto y otras muchas cosas puedo ayudar a tu negocio

Formulario de contacto