Ferramentas de IA (ou não) para criar um site

No artigo anterior, falei que todo projeto de IA começa sem IA. Que antes de abrir qualquer ferramenta, você precisa entender o problema.

Pois bem. O problema eu já tinha claro. Agora era hora de construir.

O ponto de partida

A Abranghe precisava de um site institucional.

Nada mirabolante: página sobre a associação, hub com informações sobre angioedema hereditário, área do paciente, área do médico, eventos, referências, contato, doação. Em português, inglês e espanhol, porque a Abranghe se relaciona com pacientes e profissionais da América Latina e da Europa. Nenhuma funcionalidade exótica — mas precisava estar no ar, ser bonito, funcionar bem no celular e ser fácil de manter.

Eu não tinha um dev disponível.

Esse é um detalhe importante que costuma passar batido quando se fala de ferramentas de IA. Abranghe é uma associação de pacientes com doença rara, financiada por doações, voluntariado e boa vontade. Não tem orçamento de tecnologia. Não tem time de desenvolvimento. Tem — entre outras coisas — uma cientista de dados (eu) com tempo limitado e a missão de colocar uma operação digital inteira de pé.

Eu sei codar. Já construí dashboards, pipelines de dados, modelos de machine learning, apresentações técnicas, relatórios automatizados. Já fiz página HTML na mão quando precisei. Esse não era o problema.

O problema era o custo de oportunidade. Construir um site institucional do zero é entrar num universo específico: responsividade, acessibilidade, SEO, hierarquia de conteúdo, formulário que funcione de verdade, proteção contra bot, multilíngue. Cada hora que eu gastava nisso era uma hora fora do que eu realmente sei fazer: ciência de dados, IA aplicada, arquitetura de solução.

Em 2025, fazer tudo na mão quando a IA já resolve parte disso é como insistir em lavar roupa no tanque tendo máquina em casa. Funciona? Funciona. Faz sentido? Não.

Então decidi testar até onde a IA conseguia me levar.

O que eu fiz antes de sair usando ferramentas

Esse parágrafo eu quero escrever com ênfase, porque é a parte que quase ninguém conta quando mostra "criei X com IA em 30 minutos": eu passei um fim de semana pesquisando antes de começar.

Não foi pesquisa acadêmica. Foi pesquisa pragmática. Queria saber:

• Quais ferramentas eram realmente usadas por quem constrói software profissionalmente hoje, e não só pelo marketing
• Qual a diferença prática entre "gerar código" e "editar um projeto"
• Onde cada ferramenta brilhava e onde falhava
• Que nível de conhecimento técnico cada uma exigia de quem usa

Li posts no LinkedIn de desenvolvedores descrevendo fluxos reais. Assisti a vídeos de devs mostrando o dia a dia com ferramentas diferentes. Li comparativos técnicos. Li críticas. Entrei em threads do Reddit de devs que tinham começado a usar IA no trabalho há meses e falavam do que deu certo e do que deu errado.

O que eu estava tentando evitar era o ciclo do hype: ler que "ferramenta X mudou tudo", abrir a ferramenta X, usar por duas horas, frustrar, abandonar. Esse ciclo gasta muito tempo e energia, e no final do dia a gente culpa "a IA" quando o problema era que a gente não entendeu o que a ferramenta realmente faz.

Saí desse fim de semana com três candidatas pra testar na prática: Google AI Studio, ChatGPT e Claude Code. Cada uma representando uma filosofia diferente de como IA ajuda alguém a construir software. Resolvi testar as três com o mesmo objetivo concreto: sair do zero até um site da Abranghe no ar.

Tentativa 1: Google AI Studio

O que é

O Google AI Studio é uma interface gratuita do Google pra conversar com o Gemini, o modelo de IA da empresa. É tipo um ChatGPT, mas do Google. Você escreve, ele responde. Tem versão gratuita generosa, o que é um diferencial — especialmente pra quem está testando sem querer pagar nada.

Por que escolhi começar por aqui

Três motivos. Era gratuito, então zero risco financeiro. Eu queria entender o Gemini de perto, porque o Google estava empurrando o modelo com força e eu queria formar opinião própria. E eu já uso outras ferramentas do Google no dia a dia (Gmail, Drive, Analytics), então faria sentido se o fluxo fosse integrado.

O que aconteceu

Descrevi o que queria: uma página inicial simples, com header, hero, seção "sobre a Abranghe", rodapé com contatos. O Gemini gerou HTML, CSS e componentes visuais. O resultado era razoável visualmente — não era feio, seguia boas práticas básicas, usava cores coerentes.

O problema apareceu quando pedi o segundo ajuste.

"Muda a cor do botão principal pra verde escuro." E ele me devolveu — uma página inteira nova. Não o trecho alterado. A página inteira, com tudo reescrito do zero. Como se ele nunca tivesse visto o que tinha feito na resposta anterior.

Isso acontece porque o AI Studio não tem noção de projeto. Ele não sabe onde os arquivos existem, não sabe o estado atual do seu código, não sabe o que você já aceitou e o que você ainda está decidindo. Ele só responde ao prompt atual com o contexto limitado que cabe na janela da conversa.

Na prática, o ciclo virava isso: pedir algo, copiar a resposta, colar no meu editor, ajustar manualmente pra não sobrescrever o que já existia, testar no navegador, voltar a perguntar. Cada ajuste levava uns quinze minutos, metade dos quais era eu fazendo reconciliação manual de versões.

Por que não deu certo pra mim

Serve pra prototipagem isolada — se você quer ver um componente, testar uma ideia, gerar um trecho de CSS — o AI Studio é útil. Mas pra construir um projeto real, que cresce, muda, tem interdependências entre arquivos, o modelo de "pergunta isolada, resposta isolada" trava. Eu estava fazendo mais trabalho manual do que se tivesse escrito do zero.

Tentativa 2: ChatGPT

O que é

O ChatGPT não precisa de apresentação — é provavelmente a ferramenta de IA mais conhecida do mundo. Interface de chat do GPT-4 (ou o modelo atual da OpenAI no momento em que você lê isso). Existe versão gratuita e paga.

Por que escolhi tentar

Eu já usava ChatGPT pra outras coisas: escrever, pesquisar, resumir artigos, trocar ideia sobre problemas técnicos. Já tinha a assinatura paga e já confiava no modelo pra raciocínio técnico. Fazia sentido testar ele como "co-dev".

O que aconteceu

Foi uma melhoria em relação ao AI Studio. O ChatGPT mantém contexto dentro da mesma conversa — quando eu dizia "adiciona uma seção de FAQ", ele já entendia o tom e o estilo do código anterior e respondia coerente. Respostas tinham boa qualidade técnica e ele explicava o que estava fazendo.

Eu consegui avançar de verdade. Construí algumas páginas. Em um dia fiz mais do que fiz em dois dias com o AI Studio.

Mas o problema continuou sendo o fluxo. Eu ainda estava fazendo:

1. Escrever meu pedido no ChatGPT
2. Esperar a resposta
3. Copiar o código
4. Abrir o editor no VS Code
5. Colar no arquivo certo
6. Testar no navegador
7. Ver se funcionou
8. Se não funcionou, voltar pro ChatGPT, descrever o erro, esperar nova resposta
9. Recomeçar

Cada mudança era quatro, cinco, seis etapas manuais. E o ChatGPT não tinha noção do que existia no projeto. Se eu adicionava uma nova página, ele não sabia como ela se conectava às rotas existentes a menos que eu colasse o arquivo de rotas inteiro no chat. Cada conversa começava com um "contexto" gigantesco pra ele entender onde a gente tinha parado.

Por que não deu certo pra mim

O problema nunca foi a qualidade do código gerado. Foi a fricção do processo. Eu passei a terminar os dias cansada, não de programar, mas de ir e voltar entre ferramentas. Pensei: "tem como tirar essa fricção do meio?"

Foi essa pergunta que me levou pro Claude Code.

Tentativa 3: Claude Code

O que é

O Claude Code é uma ferramenta da Anthropic — a mesma empresa que faz o Claude, o modelo de IA que eu já usava pra algumas tarefas. Mas não é um chat. É um agente que roda direto no terminal, dentro da pasta do seu projeto.

A diferença é conceitual. Num chat, você descreve, ele responde, você copia, testa, volta. No Claude Code, você descreve o que quer e ele executa dentro do seu projeto: abre os arquivos que precisa, lê, entende a estrutura, edita, cria arquivos novos, roda comandos no terminal, testa, corrige erros. Sem copiar e colar nada.

Ele não é "mais inteligente" que o ChatGPT como modelo. O que muda é o modelo de interação. Em vez de conversar e traduzir a conversa pra ação manualmente, o Claude Code age junto com você.

Por que cheguei até ele

Durante minha pesquisa, vi vários desenvolvedores descrevendo fluxos que pareciam muito mais fluidos do que o meu. Eles descreviam uma feature e o agente "fazia". Eu estava cética — parecia bom demais. Mas o padrão se repetia em vários relatos, de pessoas diferentes, com níveis técnicos diferentes. Resolvi que valia testar uma semana.

A primeira dificuldade: o medo de perder o controle

Vou ser honesta. Nos primeiros dias, eu tinha medo.

Deixar uma IA editar meus arquivos direto, sem eu olhar cada linha antes, parecia uma ousadia. E se ela quebrasse algo? E se apagasse sem querer? E se gerasse código ruim e eu não percebesse?

Esse medo é legítimo e acho que toda pessoa técnica experiente passa por ele. Porque quando você sabe programar, confiar numa ferramenta pra fazer o que você sempre fez sozinha parece perigoso.

O que destravou isso foi entender três coisas:

Primeira: o Claude Code trabalha em cima de Git. Todas as alterações ficam visíveis como diff. Eu conseguia revisar cada mudança, aceitar ou reverter, como se fosse um pull request de um colega júnior.

Segunda: ele explica o que está fazendo. Não é caixa-preta. Antes de editar um arquivo, ele diz "vou modificar X para Y porque Z". Eu podia discordar, corrigir, redirecionar.

Terceira: a responsabilidade final é minha. Eu continuei sendo quem decide o que entra no projeto e o que não entra. A IA não "me substitui" — ela me permite focar nas decisões importantes e delega a execução mecânica.

Depois de três dias, o medo virou confiança. E o processo virou outra coisa.

O que mudou de verdade

O que antes levava um dia inteiro — criar uma página nova, estilizar, integrar com o resto — passou a sair em 30 minutos. Mas não foi só velocidade. Foi a qualidade da minha atenção.

No fluxo antigo (ChatGPT), minha cabeça ficava ocupada com a parte mecânica: copiar, colar, abrir arquivo certo, ajustar formatação, verificar indentação. Isso é trabalho importante, mas é trabalho braçal. Ocupa espaço mental sem entregar valor proporcional.

No fluxo novo (Claude Code), eu passei a pensar no que realmente importa: qual a hierarquia de informação dessa página? Esse copy está claro pro paciente? Esse formulário precisa de qual validação? Como essa página se conecta com a jornada de quem chega aqui pela primeira vez?

A IA fazia a parte mecânica. Eu fazia a parte de decisão.

O que foi construído

O site inteiro da Abranghe foi construído nesse fluxo. Hoje ele tem:

• 11 páginas em português, com versões em inglês e espanhol (33 páginas no total)
• Hub completo sobre angioedema hereditário: o que é, sinais e sintomas, diagnóstico, tratamento, evolução científica
• Área do paciente com mapa de centros de referência em todo o Brasil
• Área do médico com materiais técnicos
• Formulário de contato com proteção anti-bot (honeypot + validação server-side)
• Proxy serverless pra esconder a URL real do backend
• TailwindCSS sem build system — decisão proposital pra facilitar manutenção futura

E colocar no ar?

O site estava pronto no meu computador. Agora precisava estar na internet. E aqui começa a parte que IA nenhuma resolve sozinha.

Como a Abranghe é uma ONG sem fins lucrativos, cada centavo importa. A Vercel (uma plataforma de hospedagem de sites estáticos e aplicações web) oferece plano gratuito pra projetos como esse — o que resolveu o custo. Mas "plano gratuito" não significa "um clique e pronto".

A Abranghe já tinha o domínio próprio (abranghe.org.br) registrado há anos. Mas pra conectar o domínio ao site que eu tinha construído, eu precisei:

1. Subir o código no GitHub — criar repositório, configurar .gitignore, fazer o primeiro commit
2. Conectar o GitHub com a Vercel — configurar deploy automático a partir do branch principal
3. Configurar o DNS — apontar os registros A e CNAME do domínio pra servidores da Vercel
4. Esperar a propagação — DNS não muda na hora, leva até 48 horas pra propagar globalmente
5. Configurar HTTPS — a Vercel faz automaticamente, mas tive que validar que os certificados estavam corretos
6. Validar no celular, em redes diferentes, em navegadores diferentes

Nada disso é impossível de aprender, mas também não é trivial. São conhecimentos que eu já tinha por trabalhar com deploy há alguns anos. E sem eles, essa etapa teria sido um bloqueio gigante — daqueles em que a pessoa posta no grupo de estudos "consegui criar o site com IA mas não consigo colocar no ar, socorro".

Hoje, qualquer push no GitHub faz deploy automático na Vercel. HTTPS automático. CDN global. Custo: zero. E eu consigo fazer qualquer alteração no site em minutos, sem depender de ninguém.

O que ficou depois

Hoje, toda a operação técnica da Abranghe passa pelo Claude Code. Não só o site:

• O chatbot de atendimento a pacientes (RAG com 54 fontes médicas validadas)
• A plataforma de gestão de pacientes e médicos (Streamlit + SQLite)
• O kanban de voluntários (tarefas, prazos, atas)
• As automações de envio de e-mail, extração de dados de WhatsApp, relatórios mensais

Quando preciso de uma alteração, abro o terminal, descrevo o que preciso, o Claude Code executa. Revisamos juntos. Eu aprovo ou ajusto. Mando pra produção.

Não é mágica. É a diferença entre uma ferramenta que te dá respostas e uma ferramenta que executa junto com você dentro do contexto real do projeto.

O que eu aprendi com tudo isso

Testei três ferramentas com o mesmo objetivo. Todas geravam código. Mas só uma mudou meu processo de verdade.

A lição mais óbvia seria "use Claude Code". Mas essa não é a lição.

A lição verdadeira é outra:

Quando você compara ferramentas de IA pelo trecho de código que elas geram, todas ficam mais ou menos iguais — todas são boas o suficiente, todas acertam a maior parte do tempo, todas erram em casos de borda. Você vai olhar esses comparativos e pensar "tanto faz, qualquer uma serve".

Mas o que realmente importa é o processo que a ferramenta cria ao redor do output. Ela te faz copiar e colar quinze vezes por dia? Ela entende o projeto ou só o prompt atual? Ela consegue executar ou só sugerir? Ela se encaixa no seu fluxo ou te obriga a inventar fluxo novo?

A melhor ferramenta não é a que gera o melhor trecho de código isolado. É a que elimina atrito e te deixa focar no que importa: a decisão, a arquitetura, o problema que você está resolvendo de verdade.

E isso é verdade pra qualquer área, não só pra programação. Se você é advogado testando IA pra redigir peças, gestor testando IA pra escrever relatórios, professor testando IA pra preparar aula — a pergunta não é "qual gera o melhor texto?". É "qual se encaixa no meu processo e elimina atrito?"

Minha resposta pro desenvolvimento da Abranghe foi Claude Code. A sua pode ser outra. Mas o critério deveria ser o mesmo.

← Voltar ao blog