Olá! Bem-vindo à nova lição do nosso curso.
Na lição anterior, mergulhamos na geração de código para o backend C#/.NET. Vimos como um agente de IA pode interpretar um plano e executar modificações coordenadas em múltiplos arquivos, respeitando a arquitetura e os padrões de codificação fornecidos através de arquivos de instrução.
Nesta lição, nosso foco se desloca para o frontend, abordando o resultado de aprendizagem: Guiar o agente para gerar modificações de código para uma aplicação React/JS. Embora os princípios fundamentais de fornecer contexto e planejar com antecedência permaneçam, o desenvolvimento de frontend introduz desafios e oportunidades únicas. Exploraremos como um agente lida com contexto visual, sistemas de design, componentes de UI e a gestão de estado, elementos com os quais sua experiência em desenvolvimento full-stack lhe dará uma perspectiva valiosa.
1. Por que a IA se destaca com React: A Oportunidade da "Monocultura"
Você pode ter notado que muitos exemplos de codificação com IA gravitam em torno de um conjunto específico de tecnologias de frontend. Isso não é uma coincidência. A eficácia de um agente de IA está diretamente relacionada à quantidade de dados de alta qualidade sobre uma tecnologia específica em seu conjunto de treinamento.
O artigo a seguir, de Addy Osmani, engenheiro do Google Chrome, oferece uma análise aprofundada e baseada em dados sobre o desempenho da IA na codificação em React, começando por explicar essa dinâmica.
How Good Is AI at Coding React (Really)?
Para entender por que os agentes de IA geralmente se saem bem com React, é crucial entender como os modelos de linguagem são treinados. A popularidade de uma tecnologia impacta diretamente a qualidade da assistência que a IA pode fornecer.
Leia a seção introdutória do artigo, focando especialmente na subseção 'The Monoculture problem (and opportunity)'. Preste atenção em como a dominância de stacks como React, TypeScript e Tailwind no 'training data' cria um 'AI assistance ceiling' mais alto para essas tecnologias.
Essa "monocultura" é uma vantagem prática para seu projeto. Ao usar um stack popular como React/JS, você está alinhando seu trabalho com o ponto forte dos modelos de IA atuais, aumentando a probabilidade de obter código gerado de alta qualidade.
2. Criando o Contexto para o Frontend
Como vimos, o contexto é tudo. No backend, esse contexto é predominantemente textual (arquitetura, código existente). No frontend, ele se expande para incluir a intenção visual e a adesão a um sistema de design.
2.1. Contexto Visual e do Design System
A grande questão no desenvolvimento de UI com IA é: como traduzir um design (por exemplo, um mockup do Figma) em código que não apenas "parece" certo, mas que também usa os componentes e tokens corretos do seu sistema de design? A resposta está na integração de ferramentas através do Model Context Protocol (MCP), que já mencionamos.
O post do blog da Atlassian abaixo é um exemplo prático e poderoso de como o Rovo Dev resolve isso.
Redesigning a Homepage in 20 Minutes: Figma MCP + Atlassian Design System MCP + Rovo Dev CLI
Este post do blog da Atlassian demonstra um fluxo de trabalho de ponta a ponta que resolve o problema do contexto visual e de design de forma brilhante.
Leia as seções iniciais do artigo, desde a introdução até o 'Step 2: Query the Atlassian Design System'. Foque em como a combinação do Rovo Dev CLI com dois servidores MCP (Figma Desktop e Atlassian Design System) cria um pipeline de contexto riquíssimo: Contexto Visual (Figma MCP): Observe como o agente extrai não apenas uma imagem (get_screenshot), mas também dados estruturados do design (get_design_context), como layout, cores e tipografia. Contexto do Design System (ADS MCP): Analise como o agente, antes de escrever código, usa a ferramenta ads_plan para obter os tokens de design corretos, as APIs dos componentes e as diretrizes de acessibilidade.
Essa abordagem em duas frentes — dados estruturados do design e diretrizes do sistema de design — é o que permite ao agente gerar código que é tanto fiel ao visual quanto consistente com a engenharia do projeto.
2.2. Codificando Melhores Práticas como "Skills"
Além do design visual, como podemos "ensinar" ao agente as melhores práticas de codificação em React, como otimizações de performance ou padrões de acessibilidade? Uma abordagem moderna e poderosa é encapsular esse conhecimento em "skills" que o agente pode carregar dinamicamente.
Vercel Just Released 10+ Years Of React Best Practices…
Uma abordagem moderna é encapsular conhecimento em 'skills' que o agente pode carregar dinamicamente. Este vídeo explica como a Vercel, criadora do Next.js, está fazendo exatamente isso.
Assista ao trecho de 02:18 a 04:15. O ponto chave aqui é a distinção entre 'static context' (regras que estão sempre presentes, como em um arquivo AGENTS.md) e 'dynamic context' (as 'skills'). Entenda como essas skills, que são arquivos Markdown com exemplos de 'bad practice' e 'good practice', são carregadas sob demanda para guiar o agente sem sobrecarregar o contexto inicial.
A ideia de "skills" é poderosa porque permite que você construa uma biblioteca de conhecimento de engenharia que pode ser compartilhada e versionada, garantindo que o agente evolua junto com as melhores práticas da sua equipe.
3. O Fluxo de Geração em Ação
Com o contexto adequado, o agente pode começar o trabalho. O processo segue um padrão familiar: planejar, depois executar.
3.1. O Blueprint: Planejamento e Prompts Específicos
Assim como no backend, um bom plano é a base para uma boa execução.
Everything You Need to Know About Coding with AI // NOT vibe coding
Antes de gerar código, o agente deve primeiro delinear os passos. Vamos revisitar brevemente essa estratégia de duas etapas que já discutimos.
Assista novamente ao trecho de 04:22 a 05:55. Reforce a estratégia de primeiro pedir ao AI para criar um plano detalhado ('Don't write any code yet'), e só então, após revisar o plano, pedir a implementação.
Com o plano geral definido, o próximo passo é instruir o agente a criar componentes individuais. A especificidade do prompt aqui é crucial.
How Good Is AI at Coding React (Really)?
A especificidade do prompt é o que separa um componente bem-estruturado de um 'div soup'. O artigo de Addy Osmani fornece um protocolo claro para isso.
Estude as seções '6. UI Components Arena: where React developers win' e 'React-Specific tips I want more teams to operationalize'. Foque no protocolo para criar componentes: Definir o Contrato do Componente: No prompt, especifique props, tipos, variantes e estados (loading, disabled, etc.) antes de qualquer JSX. Exigir Acessibilidade: Peça explicitamente por navegação por teclado, atributos ARIA e gerenciamento de foco. Separar Estilos: Instrua o uso de classes (ex: Tailwind) em vez de estilos inline. Comparar Prompts: Analise o exemplo de 'Poor prompt' vs 'Strong prompt' para um componente de botão. Isso ilustra perfeitamente a diferença que a especificidade faz.
3.2. Estudo de Caso: Redesenhando uma Homepage com Rovo Dev
Agora, vamos conectar tudo isso e ver o fluxo completo em ação, retornando ao post da Atlassian.
Redesigning a Homepage in 20 Minutes: Figma MCP + Atlassian Design System MCP + Rovo Dev CLI
Este artigo mostra o agente Rovo Dev executando um plano completo: gerando múltiplos componentes React, compondo-os em um layout e corrigindo seus próprios erros.
Leia as seções 'Step 4: Generate the Components' até 'Step 6: Fix Issues & Pass Tests'. Observe o processo iterativo: Geração de Componentes: Veja a tabela de componentes gerados e como eles usam os componentes e tokens do Atlassian Design System (ADS). Composição do Layout: Note como o arquivo HomePage.tsx é atualizado para integrar os novos componentes. Auto-correção: Este é um ponto crucial. Analise como o agente executa os testes, identifica erros (como React.lazy duplo e violações de acessibilidade) e os corrige iterativamente até que todos os testes passem.
Este exemplo prático demonstra um nível de automação que vai muito além da simples geração de código. O agente atua como um membro da equipe, aderindo aos padrões, usando as ferramentas corretas e garantindo a qualidade através de testes.
4. Navegando pelas Limitações da IA: O Papel do Engenheiro
Embora a tecnologia seja impressionante, é fundamental ter expectativas realistas. A IA não é uma solução mágica, e sua experiência em engenharia é mais importante do que nunca para guiar e validar o processo.
4.1. O "Penhasco da Complexidade" e a Divisão "Lógica vs. Gosto"
A IA lida muito bem com tarefas isoladas, mas sua performance pode degradar rapidamente com o aumento da complexidade.
How Good Is AI at Coding React (Really)?
Compreender os limites da IA é tão importante quanto entender suas capacidades. O artigo de Addy Osmani introduz dois conceitos fundamentais que todo engenheiro que trabalha com IA deve conhecer.
Leia as seções 'The Big reality check: The complexity cliff' e 'The Core Finding: AI has mastered logic, but not taste'. Entenda estes dois pontos: Complexity Cliff: A IA é ótima para tarefas simples e isoladas (um componente, uma função utilitária), mas sua confiabilidade cai drasticamente em tarefas de integração de múltiplos passos. Isso informa que devemos dividir problemas complexos em partes menores para o agente. Logic, but not taste: A IA é excelente em lógica, fluxo de dados e implementação de requisitos explícitos. No entanto, é fraca em 'gosto' — julgamento estético, usabilidade e nuance de UX. Isso significa que você deve delegar a mecânica, mas manter as decisões de arquitetura e design sob liderança humana.
4.2. Você é o Desenvolvedor Sênior
A melhor mentalidade ao trabalhar com um agente de codificação é tratá-lo como um desenvolvedor júnior extremamente rápido e conhecedor, mas que carece de experiência e bom senso.
Everything You Need to Know About Coding with AI // NOT vibe coding
O código gerado pela IA deve sempre ser tratado como um primeiro rascunho que precisa de revisão. Esta analogia de 'pair programming' é muito útil.
Assista ao trecho de 06:42 a 07:20. Internalize a ideia de revisar o código da IA como se você estivesse fazendo 'pair programming' com um desenvolvedor júnior. Questione as decisões, peça esclarecimentos e não hesite em editar e refatorar o código.
Conclusão
Nesta lição, aplicamos os princípios de engenharia de contexto à geração de código frontend com React/JS. Vimos como guiar um agente para produzir modificações de código que são visualmente precisas, consistentes com o design system e alinhadas com as melhores práticas.
Principais Pontos:
- A eficácia da IA com React é amplificada pela sua prevalência nos dados de treinamento ("monoculture opportunity").
- O contexto de frontend é multimodal, incluindo dados visuais estruturados (de ferramentas como o Figma) e diretrizes de design systems.
- Podemos codificar melhores práticas como "skills" para fornecer um contexto dinâmico e reutilizável ao agente.
- O fluxo de trabalho ideal envolve planejamento, prompts específicos que definem o contrato do componente, e um ciclo de geração-teste-correção.
- O papel do engenheiro é o de arquiteto e revisor sênior, navegando o "penhasco da complexidade" e aplicando "gosto" e bom senso onde a IA falha.
Na Próxima Lição
Até agora, cobrimos a geração de código para o backend e o frontend. Mas uma funcionalidade completa muitas vezes requer mudanças na estrutura do banco de dados. Na próxima lição, vamos abordar o próximo resultado de aprendizagem: Explicar os princípios das migrações de esquema de banco de dados e seu papel no desenvolvimento de aplicações, preparando o terreno para que nosso agente também possa gerar scripts de migração para o MariaDB.