Sobre WebDev Tools

Sim, eu sei. A 10.000.ª coleção de ferramentas na Internet. Quem é que precisa disso? Mas posso tranquilizá-los: este projeto nunca foi planeado. É um acidente, um produto da pura procrastinação, mas também uma lição sobre como lidar com a inteligência artificial.

Tudo começou de forma bastante inofensiva no meu ambiente de trabalho.

No início era o script.

Tal como muitos programadores, eu também tinha várias ferramentas caseiras guardadas no meu localhost. Pequenos scripts para os aborrecimentos do dia-a-dia: uma conversão de Em/Px aqui, um pequeno ajudante ali. Coisas para as quais eu tinha preguiça de procurar sempre os mesmos sites. É que eu estou em guerra total com os favoritos.

Esses ajudantes cumpriam bem o seu papel. Mas depois acrescentei mais dois e o meu instinto de programador web atacou impiedosamente: comecei a ligar as coisas. Era preciso um menu. Um pouco de estilo. E, de repente, estava no meio de tudo aquilo que nos ocorre quando se quer distrair-se com sucesso do trabalho propriamente dito. Da simples coleção, tornou-se um projeto em grande escala. Tive de o «enfeitar» até ter diante de mim um verdadeiro site com tudo o que é necessário.

«IA, toma conta!» – terá sido uma ideia maluca?

A certa altura, ocorreu-me: afinal, são apenas scripts simples. Deixa que seja a IA a tratar disso! Como utilizador fiel do VS Code, criei o projeto diretamente com o Claude Code (Sonnet).

Mas antes de dar carta branca à IA, era preciso estabelecer limites claros. Assim, em primeiro lugar, defini uma pilha de tecnologias fixa. A partir daí, criei um CLAUDE.md (estritamente limitado a um máximo de 60 linhas – comandos curtos são essenciais para as IAs) e um .claude/comments/review.md. Igualmente essenciais para a própria carteira são um ficheiro .claudeignore consistente e um ficheiro .claude/settings.local.json especificamente adaptado, para poupar tokens em grande quantidade durante a codificação.

O resultado foi surpreendente: uma aplicação web incrivelmente boa e modularmente expansível. Mas, claro, nem tudo correu na perfeição. É preciso impedir constantemente uma IA de exagerar. O meu comando mais importante tornou-se rapidamente: «Não, não precisamos de um gestor de pacotes! E agora pára de me sugerir outra vez um framework!» No final, porém, saiu realmente uma estrutura básica utilizável.

As armadilhas do «Vibe Coding»

O projeto ganhou impulso e aprendi rapidamente algumas lições difíceis sobre a colaboração com os meus colegas digitais.

• A questão do framework: as IAs adoram o Tailwind. Após alguns ajustes manuais, durante os quais a minha paciência ficou perigosamente a esgotar-se, ela acabou por se esgotar de vez. Mudei então para o Bootstrap, para concluir o projeto de forma pragmática. Às vezes, «pronto» é simplesmente melhor do que «perfeito» (ou Tailwind).


• Sem Git? Sem mim! Por hábito, criei logo um repositório. Ainda bem! Percebi rapidamente que este «Vibe Coding» desorganizado, sem controlo de versões, acabava por ser uma enorme perda de tempo.


• Lógica da IA vs. realidade: as IAs, por vezes, tornam a vida demasiado fácil – ou demasiado complicada. É verdade que o Claude melhorou imenso neste aspeto e, entretanto, analisa o código de forma significativamente mais fundamentada, em vez de especular cegamente. No entanto, se não se especificar com precisão o rumo a seguir, as IAs continuam a tender para soluções de script arbitrárias que acabam num beco sem saída. Sem um corajoso «git reset --hard», provavelmente teria mesmo assim de reiniciar o projeto do zero mais do que uma vez.


• Ping-pong de IA na revisão de código: Na garantia de qualidade, apostei num sistema de «checks and balances». Através do comando /review, aciono a verificação interna do Claude, que funciona estritamente de acordo com as especificações no meu review.md. Em complemento, solicitei revisões externas ao ChatGPT e ao Gemini e, por fim, discuti os resultados com o Claude Opus. Esta «revisão de IA para a revisão de IA» é, de facto, bastante meta, mas extremamente útil para contrastar diferentes formas de pensar e colmatar lacunas lógicas.

Ronda bónus: IA como tradutor?

Depois de a funcionalidade estar pronta, chegou a vez das traduções. Aqui, a IA mostrou o seu lado filosófico: o Claude Sonnet 4.5 chamou-me a atenção, sem que eu lhe tivesse pedido, para o facto de que, em línguas como o hindi, o chinês ou o japonês, não se trata apenas de vocabulário, mas também de peculiaridades culturais e formas de cortesia. Foi um nível refrescante de autorreflexão.

Na prática, porém, a abordagem acabou por ser pragmática: para a tradução em lote do conteúdo estático, o Claude era demasiado «intelectual» e complicado para mim. No caso do Gemini e do ChatGPT, a qualidade da execução variava demasiado. No final, traduzi tudo com o DeepL. Também aqui se aplica: a ferramenta certa para o trabalho certo!

Da intranet para a web

Depois de a coleção de ferramentas ter ficado pronta e de já suportar vários idiomas, prestou bons serviços durante bastante tempo na nossa rede da empresa. A certa altura, pensei: por que não partilhar?

Então, organizei tudo e tornei o site público. E como tudo isto surgiu de um «acidente», o código está totalmente aberto. Quem quiser dar uma ajuda ou encontrar um erro: o repositório Git encontra-se aqui: https://github.com/RamonKaes/WebDev-Tools.

Sim, desculpem. Então, aqui está ela, a 10.000.ª coleção de ferramentas. A 10.000.ª coleção de ferramentas. Mas, afinal, tem uma boa história por trás!

Divirtam-se com ela!

Ramon