Publicado em: 10 de novembro de 2026
Nesta nova era do desenvolvimento web agêntico, os desenvolvedores esperam que os agentes de programação sejam especialistas em criar para a Web. Embora os modelos de programação de fronteira mais recentes sejam bastante capazes e geralmente produzam algo que funciona, se você pedir a um especialista em desenvolvimento web para revisar o código gerado com IA, ele quase sempre encontrará maneiras de torná-lo mais rápido, acessível ou seguro.
O Chrome está investindo pesado no futuro do desenvolvimento web com agentes. Para enfrentar esse desafio, apresentamos um pré-lançamento do Modern Web Guidance no Google I/O em maio. O Modern Web Guidance é um conjunto de habilidades que incorpora conhecimento especializado em plataformas web, práticas recomendadas e dados de compatibilidade de navegadores diretamente nos seus agentes de programação.
Hoje, temos o prazer de anunciar o lançamento estável da versão 1.0 do Modern Web Guidance, que inclui:
- Novo fluxo de trabalho de modernização que verifica sua base de código atual para ajudar o agente a encontrar oportunidades de modernização segura.
- Banco de dados de guias expandido, que aborda centenas de lacunas de conhecimento de IA verificadas com soluções entre navegadores aprovadas por especialistas.
- Análise humana mais detalhada de cada guia, incluindo a aprovação dos líderes técnicos da área de conteúdo e uma análise de acessibilidade dedicada nos guias voltados ao usuário.
- Cobertura de avaliação completa em todos os nossos guias com um painel de avaliação público que mostra as melhorias mensuráveis em comparação com agentes sem o Modern Web Guidance.
Com a versão 1.0, também temos o prazer de compartilhar que o Modern Web Guidance está se tornando um esforço entre navegadores, com o Firefox e o Edge se juntando ao Chrome para oferecer suporte, melhorar a compatibilidade entre navegadores e contribuir com o projeto. Com base no nosso trabalho compartilhado com o Baseline, nosso objetivo é garantir que qualquer pessoa que programe com um agente possa aproveitar ao máximo o poder e os recursos da plataforma da Web moderna.
Não importa quais modelos ou estruturas de agentes você está usando, se estiver criando para a Web, o Modern Web Guidance precisa fazer parte dos seus Agentic Workflows.
Para instalar o Modern Web Guidance, execute este comando no diretório do projeto:
npx modern-web-guidance@latest install
Se você já instalou uma versão anterior, atualize para a 1.0 executando:
npx modern-web-guidance@latest update
Para mais instruções de instalação ou para saber mais, confira a documentação do Modern Web Guidance ou assista este vídeo para uma breve visão geral:
Por que desenvolvedores e empresas devem usar o Modern Web Guidance
É inegável que os agentes de programação ajudaram os desenvolvedores a escrever código mais rápido do que nunca. Mas em um mundo onde todo mundo usa agentes de programação, a velocidade não é mais uma vantagem competitiva.
Hoje em dia, é mais importante do que nunca se diferenciar em fatores fundamentais, como usabilidade e qualidade da experiência. Confira algumas maneiras como o Modern Web Guidance pode ajudar:
Reforçar as práticas recomendadas que os modelos costumam ignorar
Embora os modelos de programação de fronteira tenham uma boa compreensão de muitas práticas recomendadas, nossas avaliações mostram que ainda há várias áreas importantes em que eles falham, como:
- Acessibilidade: foco do teclado e gerenciamento inerte, suporte a movimento reduzido e validação de formulários acessíveis.
- Experiência do usuário: gestos de deslizar e tocar, transições de caixas de diálogo e pop-overs e implementações de temas claros/escuros.
- Performance: programação de tarefas da linha de execução principal, isolamento de renderização fora da tela e prevenção de mudança de layout.
- Segurança: limpeza segura de HTML, políticas rígidas de segurança de conteúdo e gerenciamento de credenciais de chave de acesso.
É muito importante seguir as práticas recomendadas de acessibilidade, porque erros como um ARIA ruim podem tornar uma página menos acessível do que se não houvesse nenhum ARIA. Para a versão 1.0, nossos guias voltados ao usuário foram revisados e testados com tecnologias adaptativas reais por especialistas em acessibilidade que dependem delas todos os dias.
Use o melhor recurso da Web para o trabalho
Os modelos de IA são muito bons em descobrir como fazer algo funcionar com JavaScript, mas, em muitos casos, há recursos de HTML ou CSS que podem fazer o mesmo com muito menos código. Como são processados pelo navegador, eles geralmente têm um desempenho melhor e vêm com recursos de acessibilidade. Exemplo:
- Recursos para animar popovers e caixas de diálogo
- Recursos para melhorar as interações de rolagem e deslize
- APIs melhores para transições de página suaves e fluidas
Novos recursos também podem melhorar a experiência de um site de maneiras importantes para os usuários. Exemplo:
- Chaves de acesso e WebAuthn: para experiências de login mais rápidas e seguras
- Preenchimento automático: para melhorar os processos de finalização da compra (especialmente em dispositivos móveis) que costumam falhar ao usar controles de formulário personalizados baseados em JavaScript.
O Modern Web Guidance foi projetado para recomendar o melhor recurso para o trabalho, com base nos requisitos de suporte do navegador. Os guias têm dados de compatibilidade com o Baseline e o navegador incorporados, para que ele possa adaptar as recomendações às necessidades do seu projeto.
Verifique sua base de código e encontre oportunidades de modernização
A maior parte do desenvolvimento para Web não acontece em projetos novos. Isso acontece em bases de código que acumularam anos de soluções alternativas desatualizadas, dependências desnecessárias e polyfills que não são mais necessários.
A versão 1.0 adiciona um novo fluxo de trabalho de modernização que pode analisar seu HTML, CSS, JavaScript e package.json para encontrar oportunidades de upgrade seguro e, em seguida, orientar seu agente pelas mudanças.
/modern-web-guidance Modernize the code in this directory
Nesta primeira versão, o fluxo de trabalho de modernização usa análise estática para verificar um conjunto limitado de padrões. Escolhemos começar com um escopo restrito que gera resultados previsíveis e, em seguida, expandir. Com o tempo, planejamos abranger muitas outras áreas, incluindo auditorias de agentes, em que o agente raciocina sobre o código diretamente, em vez de apenas corresponder a padrões conhecidos.
Mantenha-se atualizado com a evolução da plataforma da Web
A plataforma da Web é um alvo em movimento. Novos recursos são lançados nos navegadores a cada marco, e os recursos que você talvez não pudesse usar antes estão se tornando Baseline a cada nova versão do navegador.
Como o Modern Web Guidance é baseado nos dados de compatibilidade do Baseline, e as recomendações são mantidas por engenheiros de navegadores, especialistas em padrões da Web e especialistas em acessibilidade, essas recomendações evoluem junto com a própria plataforma, e agora seu projeto também pode.
Saiba mais sobre os novos recursos da Web e as práticas recomendadas
Embora o Modern Web Guidance tenha sido criado principalmente como uma ferramenta para agentes, muitos desenvolvedores nos disseram que acharam as orientações bastante úteis por si só, como um recurso de aprendizado.
Mesmo nesta era de programação agêntica, ainda é importante desenvolver conhecimento especializado. E o Modern Web Guidance pode ajudar você a fazer isso: lendo os guias ou usando a CLI para pesquisar casos de uso e descobrir novas técnicas que podem ser relevantes para seu projeto.
Parear o Modern Web Guidance com o Chrome DevTools para agentes
No desenvolvimento web agêntico, a criação de código é apenas uma parte do fluxo de trabalho. Você também precisa executar esse código para garantir que ele funcione conforme o esperado. Por isso, recomendamos que os desenvolvedores usem o Modern Web Guidance com o Chrome DevTools para agentes.
- O Modern Web Guidance dá ao seu agente o conhecimento necessário para escrever códigos seguindo as práticas recomendadas modernas.
- O Chrome DevTools para agentes oferece visibilidade do Agent Runtime para que o agente possa verificar, depurar e otimizar esse código em uma ampla variedade de recursos de dispositivos, preferências do usuário e condições de rede.
Juntos, eles ajudam o agente a chegar a uma solução melhor em menos turnos. Veja a seguir alguns exemplos de como usar essas ferramentas juntas para maximizar a eficácia:
Otimize até atingir sua meta de performance
O Modern Web Guidance pode ensinar ao agente como dividir de forma eficaz as tarefas de JavaScript de longa duração que bloqueiam a linha de execução principal, mas não pode testar seu código para ver por quanto tempo essas tarefas realmente bloqueiam a linha de execução principal.
Com o Chrome DevTools para agentes, você pode executar um diagnóstico de desempenho em uma CPU com limitação simulada para identificar problemas e, em seguida, usar as orientações do Modern Web Guidance para iterar até que seu código nunca bloqueie a linha de execução principal por mais de 50 milissegundos (evitando que ele contribua para um INP ruim).
Testar e refinar suas animações
O Modern Web Guidance pode mostrar ao agente como animar recursos como caixas de diálogo modais, dicas de ferramentas e menus pop-over de maneira adequada e eficiente. No entanto, mesmo com essa orientação, você ainda precisa verificar se as animações realmente funcionam e ficam boas quando usadas no contexto do aplicativo completo.
O Chrome DevTools para agentes pode executar seu código, interagir com a página e fazer uma gravação de tela da animação em ação. Em seguida, ela pode estudar a gravação para garantir que a animação seja executada e que se encaixe no estilo e na sensação do restante do site.
Você também pode usar o Chrome DevTools para agentes para verificar se, quando prefers-reduced-motion está definido, o componente respeita as preferências do usuário.
Armazenar visualizações em cache sem vazamentos de memória
O Modern Web Guidance pode ensinar ao agente como fazer com que as transições de SPA pareçam instantâneas, renderizando e armazenando em cache as visualizações na memória, além de ocultá-las corretamente da árvore de acessibilidade.
No entanto, ao fazer isso, é importante garantir que você limpe corretamente as visualizações não utilizadas para não vazar memória se o usuário permanecer na página por muito tempo. O Chrome DevTools para agentes tem ferramentas de depuração de memória, para que seu agente possa garantir que o uso de memória não aumente sem limites.
Para saber mais sobre como usar o Modern Web Guidance e o Chrome DevTools para agentes juntos, assista este vídeo:
Histórias de sucesso
Equipes de engenharia do mundo todo já estão usando o Modern Web Guidance e o Chrome DevTools para agentes para melhorar a qualidade do código, acelerar a entrega e eliminar gargalos de depuração manual:
Pensionbazaar e Policybazaar
A Pensionbazaar, uma nova plataforma de planejamento de aposentadoria lançada pela fintech indiana Paisabazaar, combinou as orientações da Web moderna com o Chrome DevTools para agentes para criar e verificar novas páginas, reduzindo o tempo de resposta em mais de 90% (de cerca de quatro dias para algumas horas) e os bugs de interface em novas telas em mais de 90%. A plataforma irmã Policybazaar, uma das principais plataformas de seguros da Índia, com mais de 97 milhões de clientes registrados, usou o Chrome DevTools para agentes para automatizar auditorias de desempenho em cerca de 30 páginas de destino de alto tráfego, reduzindo o esforço de auditoria manual em 92%:
"Para o Pensionbazaar, nossa prioridade era criar um código de qualidade desde o primeiro dia para evitar dívidas técnicas mais tarde. O Modern Web Guidance orientou nosso agente de programação a adotar padrões modernos da Web e práticas recomendadas de desempenho, respeitando nossas metas específicas de compatibilidade com navegadores. Isso tornou nossas revisões de código de front-end muito mais fáceis e rápidas, melhorando nosso tempo de resposta de desenvolvimento."
—Aman Soni, gerente de engenharia, Policybazaar
WeTV
A WeTV, plataforma internacional de streaming de vídeo da Tencent, adicionou um agente de programação de IA ao pipeline de CI/CD que usa o Chrome DevTools para agentes para diagnosticar regressões de desempenho e o Modern Web Guidance para corrigi-las usando recursos modernos da plataforma da Web. O agente agora diagnostica e resolve automaticamente 90% das verificações de desempenho com falha, reduzindo o tempo de depuração e resolução em 87% (de quatro horas para 30 minutos, incluindo a avaliação manual):
"Os resultados têm sido muito eficazes em termos de velocidade e qualidade. Os insights de diagnóstico fornecidos pelo Chrome DevTools para agentes e pelo Modern Web Guidance nos deram referências confiáveis para corrigir problemas complexos de layout. Fazemos uma verificação rigorosa após cada correção, e a taxa de sucesso e a estabilidade atuais melhoraram significativamente nossa confiança no lançamento."
—Yangjie Zheng, chefe de engenharia, WeTV (Tencent)
note inc.
A note inc., uma das maiores plataformas de mídia e criadores do Japão, com mais de 90 milhões de usuários ativos por mês, usou o Modern Web Guidance com o sistema de design interno como parte de um esforço contínuo para modernizar o front-end do Next.js. Em uma avaliação de 180 execuções na base de código de produção, o Modern Web Guidance aumentou as taxas de aprovação em verificações da Web moderna de 61% para 94%, orientando os agentes a usar recursos nativos de HTML e CSS em vez de JavaScript personalizado para animações de rolagem, dicas de ferramentas e acordeões. Ele também aumentou a priorização adequada de imagens da LCP em 28% em 431 PRs mescladas:
"Nossa missão no note é 'Começar e continuar criando'. Por isso, nossa plataforma precisa ser rápida e acessível para todos os criadores e leitores. À medida que mais do nosso código é escrito com agentes de programação de IA, o Modern Web Guidance ajuda a alcançar soluções modernas e baseadas em padrões, em vez de recorrer a padrões mais antigos do JavaScript. Ele também destaca detalhes que podem passar despercebidos, como a prioridade de carregamento de imagens e a acessibilidade de formulários. Combinado com nosso sistema de design, ele nos permite continuar melhorando o Note e manter nossa interface consistente."
—Takehiko Itabashi, vice-presidente de tecnologia, note inc.
MetaMask
A MetaMask, uma plataforma financeira de autocustódia com mais de 100 milhões de downloads em cerca de 190 países, executa o Modern Web Guidance como um bot de análise automática em cada solicitação de pull para a extensão de navegador de código aberto, configurada com um comando de apenas três linhas. Nas primeiras cinco semanas, o bot analisou cerca de 480 solicitações de pull e comentou em 64 delas, levando os engenheiros a corrigir 43 descobertas (principalmente problemas de acessibilidade, semântica de HTML e formulários que os linters não detectam) com um tempo médio de 15 minutos do comentário até a correção:
"As avaliações são muito úteis. Eles ajudaram a mostrar e familiarizar nossos engenheiros com APIs modernas, como invocadores de interesse e a API Popover. Ele não aumentou os tempos de revisão de RP, mas provavelmente os reduziu. Os problemas que o MWG detectou exigiriam um revisor humano familiarizado com essas técnicas modernas da Web."
—Francis Nepomuceno, engenheiro de UX, MetaMask
Suporte do ecossistema e da comunidade
O Modern Web Guidance começou como uma iniciativa do Chrome, mas alcançar o marco 1.0 foi um esforço colaborativo com vários especialistas da comunidade da Web.
Agradecemos aos líderes técnicos da área de conteúdo que supervisionam cada área da plataforma da Web, aos nossos parceiros de navegadores no Firefox e no Edge, aos especialistas independentes em padrões da Web e acessibilidade que criaram e testaram os guias e a todos os colaboradores de código aberto no GitHub que ajudaram a moldar esta versão.
Se você notar uma lacuna no que os agentes de programação sabem sobre a Web ou quiser ajudar a melhorar um guia, consulte o guia de contribuição para participar.
Começar a usar o Modern Web Guidance
Para adicionar o Modern Web Guidance ao seu projeto, execute o instalador da CLI no diretório do projeto:
npx modern-web-guidance@latest install
Se você já instalou uma versão anterior, atualize para a 1.0 executando:
npx modern-web-guidance@latest update
Além da CLI, é possível instalar e atualizar o Modern Web Guidance diretamente nos marketplaces de plug-ins de agentes de programação mais conhecidos, incluindo Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code e Grok Build.
Para saber mais, confira estes recursos: