Publicado: 10 de noviembre de 2026
En esta nueva era del desarrollo web de agentes, los desarrolladores esperan que sus agentes de programación sean expertos en la creación de sitios web. Y, si bien los modelos de programación de vanguardia más recientes son bastante capaces y, por lo general, pueden producir algo que funcione, si le pides a un experto en desarrollo web que revise el código generado por IA, casi siempre podrá encontrar formas de hacer que el código sea más rápido, accesible o seguro.
Chrome está invirtiendo mucho en el futuro del desarrollo web basado en agentes y, para abordar este desafío, presentamos una versión preliminar anticipada de Modern Web Guidance en Google I/O en mayo. Modern Web Guidance es un conjunto de habilidades que incorporan experiencia en plataformas web, prácticas recomendadas y datos de compatibilidad con navegadores directamente en tus agentes de programación.
Hoy nos complace anunciar el lanzamiento de la versión estable 1.0 de Modern Web Guidance, que incluye lo siguiente:
- Nuevo flujo de trabajo de modernización que analiza tu base de código existente para ayudar a tu agente a encontrar oportunidades de modernización de forma segura.
- Base de datos de guías ampliada que aborda cientos de brechas de conocimiento de IA verificadas con soluciones validadas por expertos y compatibles con varios navegadores.
- Revisión más exhaustiva por parte de expertos humanos para cada guía, incluida la aprobación de los líderes técnicos del área de contenido y una revisión de accesibilidad dedicada en nuestras guías para el usuario.
- Cobertura de evaluación completa en todas nuestras guías con un panel de evaluación público que muestra las mejoras medibles en comparación con los agentes sin Modern Web Guidance.
Con la versión 1.0, también nos complace anunciar que Modern Web Guidance se está convirtiendo en un esfuerzo entre navegadores, con Firefox y Edge uniéndose a Chrome para brindar asistencia, mejorar la compatibilidad entre navegadores y contribuir al proyecto. A partir de nuestro trabajo compartido con Baseline, nuestro objetivo es garantizar que cualquier persona que programe con un agente pueda aprovechar al máximo la potencia y las capacidades de la plataforma web moderna.
Independientemente de los modelos o arneses de agentes que uses, si estás creando para la Web, Modern Web Guidance debe formar parte de tu flujo de trabajo de agentes.
Para instalar Modern Web Guidance, ejecuta este comando desde el directorio de tu proyecto:
npx modern-web-guidance@latest install
Si ya instalaste una versión anterior, puedes actualizar a la versión 1.0 ejecutando lo siguiente:
npx modern-web-guidance@latest update
Para obtener instrucciones de instalación adicionales o más información, consulta la documentación de Modern Web Guidance o mira este video para obtener una breve descripción general:
Por qué los desarrolladores y las empresas deberían usar Modern Web Guidance
Es innegable que los agentes de programación han ayudado a los desarrolladores a escribir código más rápido que nunca. Sin embargo, en un mundo en el que todos usan agentes de programación, la velocidad ya no es una ventaja competitiva.
En la actualidad, es más importante que nunca diferenciarse en factores fundamentales, como la usabilidad y la calidad de la experiencia. Estas son algunas formas en las que Modern Web Guidance puede ayudarte:
Reforzar las prácticas recomendadas que los modelos suelen pasar por alto
Si bien los modelos de programación de vanguardia comprenden bien muchas prácticas recomendadas, nuestras evaluaciones muestran que todavía hay varias áreas importantes en las que se quedan cortos, como las siguientes:
- Accesibilidad: Enfoque del teclado y administración inerte, compatibilidad con movimiento reducido y validación de formularios accesible.
- Experiencia del usuario: Gestos de deslizamiento y toque, transiciones de diálogos y ventanas emergentes, y también implementaciones de temas claros y oscuros.
- Rendimiento: Programación de tareas del subproceso principal, aislamiento de renderización fuera de pantalla y prevención de cambios de diseño.
- Seguridad: Limpieza segura de HTML, políticas de seguridad de contenido estrictas y administración de credenciales de llaves de acceso.
Es especialmente importante aplicar correctamente las prácticas recomendadas de accesibilidad, ya que los errores, como un ARIA incorrecto, pueden hacer que una página sea menos accesible que si no tuviera ARIA. Para la versión 1.0, expertos en accesibilidad que usan tecnologías de accesibilidad todos los días revisaron y probaron nuestras guías para el usuario con tecnologías de accesibilidad reales.
Usa la mejor función web para el trabajo
Los modelos de IA son muy buenos para descubrir cómo hacer que algo funcione con JavaScript, pero, en muchos casos, hay funciones de HTML o CSS que pueden hacer lo mismo con mucho menos código. Y, como los controla el navegador, suelen tener un mejor rendimiento y cuentan con funciones de accesibilidad. Por ejemplo:
- Funciones para animar ventanas emergentes y diálogos
- Funciones para mejorar las interacciones basadas en el desplazamiento y el deslizamiento
- Mejores APIs para transiciones de páginas fluidas
Las funciones nuevas también pueden mejorar la experiencia de un sitio de maneras que son importantes para los usuarios. Por ejemplo:
- Llaves de acceso y WebAuthn: Para experiencias de acceso más rápidas y seguras
- Autocompletar: Para mejorar los procesos de confirmación de compra (especialmente en dispositivos móviles) que suelen fallar cuando se usan controles de formulario personalizados basados en JavaScript
Modern Web Guidance está diseñado para recomendar la mejor función para el trabajo, según tus requisitos de compatibilidad con el navegador. Sus guías tienen datos de compatibilidad con Baseline y navegadores incorporados, por lo que puede adaptar sus recomendaciones a las necesidades de tu proyecto.
Analiza tu base de código y encuentra oportunidades de modernización
La mayor parte del desarrollo web no se realiza en proyectos nuevos. Esto ocurre en bases de código existentes que acumularon años de soluciones alternativas obsoletas, dependencias innecesarias y polyfills que ya no se necesitan.
La versión 1.0 agrega un nuevo flujo de trabajo de modernización que puede analizar tu HTML, CSS, JavaScript y package.json existentes para encontrar oportunidades de actualización segura y, luego, guiar a tu agente a través de los cambios.
/modern-web-guidance Modernize the code in this directory
En esta primera versión, el flujo de trabajo de modernización usa el análisis estático para verificar un conjunto limitado de patrones. Elegimos comenzar con un alcance limitado que produzca resultados predecibles y, luego, expandirnos. Con el tiempo, planeamos abarcar muchas más áreas, incluidas las auditorías de agentes en las que tu agente razona sobre tu código directamente en lugar de solo hacer coincidir patrones conocidos.
Mantente al tanto de la evolución de la plataforma web
La plataforma web es un objetivo en constante evolución. Las funciones nuevas se envían a los navegadores en cada hito, y las funciones existentes que quizás no podías usar antes se convierten en Baseline con cada nueva versión del navegador.
Dado que Modern Web Guidance se basa en los datos de compatibilidad de Baseline y sus recomendaciones las mantienen ingenieros de navegadores, expertos en estándares web y especialistas en accesibilidad, estas recomendaciones evolucionan junto con la plataforma en sí, y ahora tu proyecto también puede hacerlo.
Obtén información sobre las nuevas funciones web y las prácticas recomendadas
Si bien Modern Web Guidance se creó principalmente como una herramienta para agentes, muchos desarrolladores nos dijeron que la guía les resultó bastante útil por sí sola, como recurso de aprendizaje.
Incluso en esta era de programación con agentes, sigue siendo valioso desarrollar experiencia en el dominio. Y Modern Web Guidance puede ayudarte a lograrlo, ya sea leyendo las guías o usando la CLI para buscar casos de uso y descubrir nuevas técnicas que puedan ser relevantes para tu proyecto.
Vincula Modern Web Guidance con las Herramientas para desarrolladores de Chrome para agentes
En el desarrollo web con agentes, la creación de código es solo una parte del flujo de trabajo. También debes ejecutar ese código para asegurarte de que funcione según lo esperado. Por eso, recomendamos que los desarrolladores usen Modern Web Guidance junto con las Herramientas para desarrolladores de Chrome para agentes.
- Modern Web Guidance le brinda a tu agente la experiencia inicial necesaria para escribir código siguiendo las prácticas recomendadas modernas.
- Las Herramientas para desarrolladores de Chrome para agentes le brindan a tu agente visibilidad del entorno de ejecución para que pueda verificar, depurar y optimizar ese código en una amplia gama de capacidades de dispositivos, preferencias de los usuarios y condiciones de red.
En conjunto, estos elementos ayudan a que tu agente llegue a una mejor solución en menos turnos. A continuación, se muestran algunos ejemplos de cómo puedes usar estas herramientas en conjunto para maximizar la eficacia:
Optimiza hasta que alcances tu objetivo de rendimiento
Modern Web Guidance puede enseñarle a tu agente a dividir de forma eficaz las tareas de JavaScript de larga duración que bloquean el subproceso principal, pero no puede probar tu código para ver cuánto tiempo esas tareas de JavaScript realmente bloquean el subproceso principal.
Con las Herramientas para desarrolladores de Chrome para agentes, puedes ejecutar un seguimiento de rendimiento en una CPU de gama baja simulada para ver si tienes un problema y, luego, usar los consejos de rendimiento de Modern Web Guidance para iterar hasta que tu código nunca bloquee el subproceso principal durante más de 50 milisegundos (para que no contribuya a un INP deficiente).
Prueba y define mejor tus animaciones
Modern Web Guidance puede mostrarle a tu agente cómo animar correctamente y con buen rendimiento funciones como diálogos modales, cuadros de información y menús emergentes, pero, incluso con esta guía, debes verificar que las animaciones realmente funcionen y se vean bien cuando se usen en el contexto de tu aplicación completa.
Las Herramientas para desarrolladores de Chrome para agentes pueden ejecutar tu código, interactuar con la página y grabar la pantalla de la animación en acción. Luego, puede estudiar la grabación para asegurarse de que la animación se ejecute y se ajuste al estilo y la sensación del resto del sitio.
También puedes usar las Herramientas para desarrolladores de Chrome para agentes para verificar que, cuando se establece prefers-reduced-motion, el componente respete las preferencias del usuario.
Almacena en caché las vistas sin fugas de memoria
Modern Web Guidance puede enseñarle a tu agente cómo hacer que las transiciones de SPA se sientan instantáneas renderizando y almacenando en caché las vistas en la memoria, y ocultándolas correctamente del árbol de accesibilidad.
Sin embargo, cuando lo hagas, es importante que te asegures de limpiar correctamente las vistas sin usar para no perder memoria si el usuario permanece en la página durante mucho tiempo. Las Herramientas para desarrolladores de Chrome para agentes tienen herramientas de depuración de memoria, por lo que tu agente puede asegurarse de que el uso de memoria no aumente sin límites.
Para obtener más información sobre cómo usar Modern Web Guidance y las Herramientas para desarrolladores de Chrome para agentes en conjunto, mira este video:
Historias de éxito
Los equipos de ingeniería de todo el mundo ya usan Modern Web Guidance y las Herramientas para desarrolladores de Chrome para agentes con el objetivo de mejorar la calidad del código, acelerar la entrega y eliminar los cuellos de botella de la depuración manual:
Pensionbazaar y Policybazaar
Pensionbazaar, una nueva plataforma de planificación de jubilaciones lanzada por la empresa india de tecnología financiera Paisabazaar, vinculó Modern Web Guidance con las Herramientas para desarrolladores de Chrome para agentes con el objetivo de crear y verificar páginas nuevas, lo que redujo el tiempo de respuesta en más de un 90% (de unos cuatro días a unas pocas horas) y disminuyó los errores de la IU en las pantallas nuevas en más de un 90%. Su plataforma hermana Policybazaar, una de las plataformas de seguros líderes de India con más de 97 millones de clientes registrados, usó las Herramientas para desarrolladores de Chrome para agentes con el objetivo de automatizar las auditorías de rendimiento en unas 30 páginas de destino de alto tráfico, lo que redujo el esfuerzo de auditoría manual en un 92%:
"En Pensionbazaar, nuestra prioridad era crear código de calidad desde el primer día para evitar la deuda técnica más adelante. La guía de Modern Web Guidance orientó a nuestro agente de programación para que adoptara estándares web modernos y prácticas recomendadas de rendimiento, respetando nuestros objetivos específicos de compatibilidad con navegadores. Esto hizo que nuestras revisiones de código de frontend fueran mucho más fáciles y rápidas, lo que, en última instancia, mejoró nuestro tiempo de respuesta de desarrollo".
—Aman Soni, gerente de Ingeniería, Policybazaar
WeTV
WeTV, la plataforma internacional de transmisión de video de Tencent, agregó un agente de programación de IA a su canalización de CI/CD que usa las Herramientas para desarrolladores de Chrome para agentes con el objetivo de diagnosticar regresiones de rendimiento y Modern Web Guidance para corregirlas con funciones modernas de la plataforma web. Ahora, el agente diagnostica y resuelve automáticamente el 90% de las verificaciones de rendimiento con errores, lo que reduce el tiempo de depuración y resolución en un 87% (de cuatro horas a 30 minutos, incluida la evaluación manual):
"Los resultados han sido muy eficaces en términos de velocidad y calidad. Las estadísticas de diagnóstico que proporcionaron las Herramientas para desarrolladores de Chrome para agentes y Modern Web Guidance nos brindaron referencias confiables para corregir problemas de diseño complejos. Realizamos una verificación estricta después de cada corrección, y la tasa de éxito y la estabilidad actuales mejoraron significativamente nuestra confianza en los lanzamientos".
—Yangjie Zheng, director de Ingeniería, WeTV (Tencent)
note inc.
note inc., una de las plataformas de creadores y medios más grandes de Japón, con más de 90 millones de usuarios activos por mes, usó Modern Web Guidance junto con su sistema de diseño interno como parte de un esfuerzo continuo para modernizar su frontend de Next.js. En una evaluación de 180 ejecuciones en su base de código de producción, Modern Web Guidance aumentó las tasas de aprobación en las verificaciones web modernas del 61% al 94%, ya que guió a los agentes para que usaran funciones nativas de HTML y CSS en lugar de JavaScript personalizado para las animaciones de desplazamiento, los cuadros de información y los acordeones. También aumentó la priorización adecuada de las imágenes de LCP en un 28% en 431 solicitudes de extracción combinadas:
"Nuestra misión en note es 'Comienza y sigue creando', por lo que nuestra plataforma debe mantenerse rápida y accesible para todos los creadores y lectores. A medida que se escribe más código con agentes de programación de IA, Modern Web Guidance los ayuda a buscar soluciones modernas basadas en estándares en lugar de recurrir a patrones de JavaScript más antiguos. También señala detalles que son fáciles de pasar por alto, como la prioridad de carga de imágenes y la accesibilidad de los formularios. Combinado con nuestro sistema de diseño, nos permite seguir mejorando Note y, al mismo tiempo, mantener la coherencia de nuestra IU".
—Takehiko Itabashi, vicepresidente de Tecnología, note inc.
MetaMask
MetaMask, una plataforma financiera de autocustodia con más de 100 millones de descargas en aproximadamente 190 países, ejecuta Modern Web Guidance como un bot de revisión automatizado en cada solicitud de extracción de su extensión de navegador de código abierto, configurada con una instrucción de solo tres líneas. En sus primeras cinco semanas, el bot revisó aproximadamente 480 solicitudes de extracción y comentó 64 de ellas, lo que llevó a los ingenieros a corregir 43 hallazgos (en su mayoría, problemas de accesibilidad, semántica de HTML y formularios que los linters no detectan) con una mediana de tiempo de 15 minutos desde el comentario hasta la corrección:
"Las opiniones son muy útiles. Nos ayudaron a descubrir las APIs modernas, como los invocadores de intereses y la API de Popover, y a que nuestros ingenieros se familiaricen con ellas. No aumentó los tiempos de revisión de las PR, sino que, en todo caso, los redujo. De lo contrario, los problemas que detectó MWG habrían requerido un revisor humano familiarizado con estas técnicas web modernas".
—Francis Nepomuceno, ingeniero de UX, MetaMask
Asistencia de la comunidad y el ecosistema
Modern Web Guidance comenzó como una iniciativa dentro de Chrome, pero alcanzar este hito de la versión 1.0 fue un esfuerzo de colaboración con numerosos expertos de la comunidad web.
Agradecemos a los líderes técnicos de las áreas de contenido que supervisan cada área de la plataforma web, a nuestros socios de navegadores en Firefox y Edge, a los expertos independientes en accesibilidad y estándares web que crearon y probaron las guías, y a todos los colaboradores de código abierto en GitHub que ayudaron a dar forma a esta versión.
Si detectas una brecha en lo que los agentes de programación saben sobre la Web o quieres ayudar a mejorar una guía existente, consulta la guía de contribución para participar.
Comienza a usar Modern Web Guidance
Para agregar Modern Web Guidance a tu proyecto, ejecuta el instalador de la CLI desde el directorio del proyecto:
npx modern-web-guidance@latest install
Si ya instalaste una versión anterior, puedes actualizar a la versión 1.0 ejecutando lo siguiente:
npx modern-web-guidance@latest update
Además de la CLI, puedes instalar y actualizar Modern Web Guidance directamente a través de los mercados de complementos de agentes de programación más populares, como Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code y Grok Build.
Para obtener más información, consulta estos recursos: