Los agentes de codificación generan con frecuencia JavaScript pesado y desactualizado porque sus datos de entrenamiento están saturados con patrones de código heredados de años pasados. Para abordar esto, Google Chrome, Microsoft Edge, Mozilla Firefox y MDN han colaborado en 'Modern Web Guidance', un conjunto de habilidades que integra la experiencia de la plataforma web y los datos de compatibilidad del navegador directamente en la ventana de contexto de un agente.

Una interfaz de tema oscuro que muestra un entorno de asistente de codificación con una barra lateral y un editor de código.
El proyecto Modern Web Guidance tiene como objetivo mejorar la producción de agentes de codificación como el que se muestra en esta interfaz.github.com

Esta imagen ilustra el tipo de entorno de agente de codificación que el proyecto Modern Web Guidance está diseñado para ayudar a mejorar a través de sus directrices de modernización de código web nativo y de alto rendimiento.

Cerrando la brecha de conocimiento en el entrenamiento de IA

Si bien los modelos de codificación de vanguardia son capaces de producir código funcional, a menudo carecen de la densidad de patrones de implementación modernos y del mundo real necesarios para el software listo para producción. Modern Web Guidance cierra esta brecha proporcionando directrices específicas que ayudan a los modelos a estructurar correctamente las APIs que suelen utilizar incorrectamente.

La herramienta se centra en orientar a los agentes hacia soluciones nativas. Por ejemplo, fomenta el uso de características de HTML o CSS que pueden realizar tareas con menos código que el JavaScript personalizado, lo que normalmente resulta en un mejor rendimiento y una accesibilidad mejorada.

“Modern Web Guidance es un conjunto de habilidades que integran la experiencia de la plataforma web, las mejores prácticas y los datos de compatibilidad del navegador directamente en tus agentes de codificación.”

— GitHub - GoogleChrome/modern-web-guidance: Keep your coding agent up to date with the latest web best practices

Disciplinas principales y cobertura de características

La guía cubre una amplia gama de capacidades web modernas, incluyendo 140 características de CSS y diseño como consultas de contenedor (container queries), subgrid y el espacio de color oklch. También incluye 74 características de JavaScript y API, como la Scheduler API, Temporal y la Translator API.

Una tabla que muestra varias características web y sus categorías y estados correspondientes.
Una parte de la lista completa de 250 características web modernas cubiertas por la guía.github.com

Esta tabla proporciona un ejemplo visual de la amplia cobertura de características en disciplinas como CSS y JavaScript, ayudando a los agentes de IA a evitar patrones de código heredados.

Cobertura de Guía Web Moderna: Total de funciones web modernas 250; Funciones de CSS y Diseño 140; Funciones de HTML y DOM 36; Funciones de JavaScript y APIs 74
Cobertura de Guía Web Modernagithub.com

Gráfico elaborado por HN Digest a partir de cifras reportadas por github.com; los valores se muestran como aparecen en la fuente.

Las áreas de enfoque específicas incluyen 'Fallback Responsables', que guían a los modelos para usar alternativas ligeras en lugar de polyfills pesados, y 'IA Integrada', que aprovecha las APIs del navegador en el dispositivo para tareas como la síntesis de información y la detección de idiomas.

Una tabla detallada que muestra APIs específicas de la plataforma web y sus datos de compatibilidad.
Ejemplo de los datos de compatibilidad del navegador y las APIs a nivel de plataforma incluidas en la guía.github.com

Este apoyo visual respalda la descripción de las características específicas de JavaScript y API incluidas en el proyecto para mejorar la precisión del código generado por IA.

Flujo de trabajo de modernización y limitaciones

La Versión 1.0 introduce un flujo de trabajo de modernización que analiza archivos HTML, CSS, JavaScript y package.json para identificar oportunidades de actualizaciones seguras. Esto permite a los desarrolladores utilizar al agente para reemplazar sistemáticamente los rodeos obsoletos con primitivas modernas.

Actualmente, este flujo de trabajo utiliza análisis estático en un alcance estrecho para garantizar resultados predecibles. El equipo del proyecto planea expandir esto en el futuro para incluir 'auditorías agénticas', donde la IA razona sobre el código directamente en lugar de simplemente coincidir con patrones conocidos.

Qué dicen los lectores de Hacker News

  • Experiencia: Un comentarista compartió que anteriormente había desarrollado sus propias herramientas para abordar el problema del código generado por IA que utiliza patrones heredados verbosos en lugar de características modernas. comentario ↗
  • Escéptico: Un usuario expresó su preocupación de que el proyecto podría llevar a una situación en la que los modelos de IA prioricen las directrices de un navegador dominante sobre los estándares web más amplios. comentario ↗
  • Alternativa: Un comentarista sugirió que, en lugar de requerir instalaciones, las directrices podrían alojarse como un índice de markdown consultable que los agentes podrían obtener mediante solicitudes HTTP. comentario ↗
  • Escéptico: Otro lector argumentó que inyectar estas prácticas en un agente podría resultar en que el modelo produzca un 'promedio' de las directrices, lo que sentía que podría ser ineficaz. comentario ↗

Resumen de opiniones del hilo de Hacker News; no son hechos verificados. Leer el debate completo ↗