Como Ensinar um Agente de IA a Construir Sites e Escrever Componentes React

Recentemente me peguei pensando: já nos acostumamos com redes neurais escrevendo código, mas o processo ainda parece trocar blocos de texto em um chat. Você copia um prompt, recebe um muro de código, cola no seu projeto, percebe que esqueceu os imports ou que os estilos quebraram... Rotina familiar?

Parece que o pessoal do Google Labs também se cansou disso e lançou o stitch-skills. Não é mais um "assassino de programadores", mas sim um conjunto de habilidades concretas para agentes de IA que funcionam através do MCP (Model Context Protocol). Para simplificar: são instruções e ferramentas que permitem que seu Claude, Cursor ou Gemini não apenas gerem texto, mas manipulem conscientemente a estrutura do projeto, sigam sistemas de design e até montem sites completos a partir de uma única frase.

O que é isso afinal

O projeto é uma biblioteca de habilidades sob medida para trabalhar com o Stitch — um servidor de criação visual e geração de interfaces. A característica principal aqui é a padronização. Cada habilidade no repositório é embalada seguindo um modelo unificado: há um manifesto para o agente (SKILL.md), scripts de validação e exemplos "golden standard".

Isso é necessário para que o agente não precise adivinhar o que fazer, mas siga um algoritmo claro. Por exemplo, se você pedir para transformar um esboço em componentes React, o agente usa a habilidade react-components, que conhece as regras do jogo: como verificar a sintaxe e não perder design tokens.

Para que serve na prática

O repositório atualmente tem cerca de uma dúzia de habilidades prontas. Destaco as que realmente economizam tempo, em vez de apenas parecerem impressionantes em demos.

Geração de sites completos via stitch-loop

Em vez de pedir "construa uma landing page" e receber um arquivo index.html, esta habilidade faz o agente criar uma estrutura completa. Ele mesmo cria as páginas necessárias, organiza os arquivos e verifica se tudo realmente abre. Essencialmente, isso é automação de construção de protótipos.

Polindo ideias com enhance-prompt

Frequentemente uma rede neural dá um resultado ruim porque o prompt foi algo como "deixe bonito". A habilidade enhance-prompt transforma suas ideias fragmentadas em uma spec com termos de UI/UX e contexto de sistema de design. É como ter um lead experiente revisando a tarefa antes de enviá-la a um desenvolvedor.

Documentação via design-md

Minha parte "favorita" do trabalho — descrever por que o botão tem exatamente aquela cor e como o espaçamento funciona. A habilidade design-md analisa o projeto e gera o arquivo DESIGN.md. Não é apenas uma lista de estilos, mas uma descrição do sistema de design em linguagem humana que então ajuda o mesmo agente de IA a gerar novas telas com mais precisão.

Conversão para React e shadcn/ui

Para quem já brincou com protótipos e quer levar isso para produção, existem as habilidades react-components e shadcn-ui. Elas garantem que ao transferir design para código, a lógica dos componentes não se perca e as bibliotecas corretas sejam usadas.

Como funciona por baixo dos panos

Se você olhar dentro de qualquer pasta de habilidade, verá uma estrutura rigorosa. O pessoal do Google Labs claramente defende a previsibilidade:

• SKILL.md: essencialmente um system prompt que explica a tarefa do agente.
• scripts/: arquivos executáveis para validar o resultado. Se o agente tiver errado o código, o script vai avisar.
• examples/: exemplos de referência. O modelo aprende com eles (few-shot learning) para entender que resultado é esperado.

A instalação de habilidades é feita da forma mais simples possível via CLI:

npx skills add google-labs-code/stitch-skills --skill react:components --global

O próprio comando vai encontrar as ferramentas que você tem instaladas (como Cursor ou Claude Code) e adicionar novas capacidades a elas.

Vale a pena tentar

O projeto é específico. Se você escreve código da velha guarda em Vim puro sem assistência de IA, isso provavelmente não será útil para você. Mas se você já moveu parte da sua rotina para o Cursor ou usa servidores MCP, então stitch-skills é um ótimo exemplo de como você pode estruturar o trabalho com redes neurais.

Isso vai agradar especialmente desenvolvedores frontend e quem está construindo MVPs rapidamente. A capacidade de transformar um esboço abstrato em um projeto estruturado com documentação e componentes React em poucos minutos é algo para o qual eventualmente chegaremos de qualquer forma.

No lado negativo: a documentação é um pouco escassa em alguns lugares, e o projeto não é oficialmente suportado pelo Google como produto comercial (é um experimento do Google Labs). Mas como base para criar suas próprias habilidades ou para acelerar seu trabalho atual de layout — é uma opção muito digna.

Você pode conferir todas as habilidades disponíveis e ler a especificação no repositório do projeto.