Como utilizei um assistente de IA para escrever uma extensão do Chrome em 4 horas

Sempre acreditei que um bom líder precisa estar próximo do seu time, de preferência atuando tecnicamente com as pessoas, entendendo quais são os desafios que elas enfrentam, assim como as oportunidades que estão disponíveis. Desta forma, consigo ter conversas de qualidade com cada uma, analisando de maneira crítica se determinada dificuldade é real, e entendendo se ela está aproveitando todo o potencial que lhe é disponibilizado.

Durante muito tempo, utilizei uma extensão do Chrome chamada Figure It Out para visualizar de maneira simples e elegante diferentes fusos horários como página inicial de uma nova aba - isso é especialmente útil quando se interage com equipes em diferentes lugares do planeta (como é o meu caso). Entretanto, em algum momento do passado recente, o desenvolvedor removeu a extensão da Chrome Web Store e fiquei órfão desta funcionalidade (fiquei curioso para saber o motivo mas não encontrei muita coisa além deste post no Reddit). Procurei por uma extensão substituta, mas não encontrei nada tão simples e visualmente agradável; foi aí que me veio a ideia: e se eu implementasse uma extensão do Chrome semelhante à FIO?

Embora eu tenha feito algumas coisas pontuais com Angular e ReactJS, seguramente mais de 90% da minha carreira técnica foi como desenvolvedor back-end e DevOps. Tenho uma noção de como o front-end funciona, mas estou longe de ser a faca mais afiada da gaveta quando o assunto é JavaScript. Por isso, entendi que esta era a oportunidade ideal para utilizar um assistente de inteligência artificial para converter minhas ideias em implementação. Seria uma ótima maneira de entender quais são as possibilidades e limitações deste tipo de ferramenta - com sorte, eu teria uma visão menos genérica e mais baseada em experiência real do que as pessoas dos meus times conseguiriam fazer para entregarem código de qualidade com mais agilidade e eficiência.

E foi assim que eu, sem experiência em front-end e sem programar diariamente há vários anos, implementei uma extensão nova pra o Google Chrome em 4 horas de trabalho.

(Os próximos parágrafos serão uma descrição dos passos que executei para implementar a extensão com o auxílio do Claude.ai. Se você está procurando pelas minhas conclusões, pode pular direto para o fim do texto).

A escolha do assistente

A primeira tarefa desta jornada era escolher qual ferramenta de IA seria a mais adequada para o trabalho. Quase todas prometem transformar a experiência de codificação, mas o fato é que cada uma dessas soluções traz consigo não apenas capacidades técnicas distintas, mas também filosofias diferentes sobre como podemos interagir com a tecnologia durante o processo de desenvolvimento.

Apesar de acompanhar de perto o mercado de LLMs e inteligências artificiais, o empurrão que eu precisava para me mexer foi o lançamento da versão 3.7 do Claude Sonnet, da Anthropic. Quando me deparei com a imagem abaixo, finalmente me senti motivado a tirar do papel a ideia de aprender pela prática como uma ferramenta de IA poderia acelerar o desenvolvimento de uma aplicação.

Nas minhas primeiras interações com o modelo, ficou clara a capacidade notável de compreensão contextual do que pedi a ele - em outras palavras, não precisei de prompts complexos para que ele me entregasse resultados satisfatórios. Além disso, ao longo do trabalho percebi uma abordagem colaborativa ao desenvolvimento, na qual frequentemente o modelo sugeria alternativas e explorava diferentes caminhos para resolver o mesmo problema. Por fim, de todas as (poucas) experiências que tive com outros assistentes, de longe obtive a melhor interação com o Claude Sonnet no que diz respeito ao raciocínio arquitetural e decisões de design.

Timezone Organizer: o começo

Como comentei, minha experiência anterior com desenvolvimento de extensões para o Google Chrome era zero. Por isso, meu primeiro prompt para o Claude foi o mais ingênuo possível, e logo de cara já tive uma ideia do que estava por vir:

What are the general steps to create a Google Chrome extension and publish it?

A pergunta despretensiosa foi respondida com um plano em alto nível bastante organizado de quais passos eram necessários para a realização da tarefa, desde a definição do objetivo da extensão até a codificação e as etapas burocráticas para publicação. Uma característica interessante desses assistentes é que eles são programados para estimularem a interação, por isso ao fim do plano em alto nível, a própria IA pergunta se eu desejava mais detalhes de alguma etapa específica.

Uma vez que eu já sabia qual seria minha extensão, informei à IA minhas referências e pedi para que ela adaptasse o plano informado anteriormente para a realidade do meu projeto:

Além disso, a resposta também incluiu um plano de implementação técnico…

e uma organização do trabalho por metas:

Neste momento, eu já tinha uma ideia do que era necesssário ser feito, e quais seriam as etapas. Pedi ao assistente que gerasse um código simples que implementasse cada funcionalidade mencionada no plano técnico. Na primeira resposta, o Claude Sonnet já me retornou um conjunto de arquivos HTML, CSS e JavaScript completamente funcionais, assim como instruções de como executá-lo e testá-lo no navegador. Ao seguir as instruções, o código executou sem problemas e lá estavam alguns fusos horários hardcoded, porém corretos.

Definição do Layout

A primeira versão do código gerado pelo assistente era funcional, porém estava longe do que eu imaginava em termos de layout e usabilidade. Como era minha primeira experiência com o Claude, perguntei se ele era capaz de analisar uma imagem, e a resposta foi afirmativa. Procurei uma imagem da extensão original e fiz o upload para o modelo com instruções solicitando que ele interpretasse a imagem e, a partir disso, realizasse alguns ajustes nos códigos originais que ele tinha criado inicialmente.

Em questão de segundos, o assistente retornou novas versões dos arquivos com todas as modificações necessárias para que o design e o layout da minha extensão fosse semelhante à imagem fornecida. A partir desta resposta, fiz pedidos para ajustes finos e, então, tinha diante de mim uma versão muito próxima do meu desejo final de design para a extensão (se eu tivesse que fazer uma estimativa, diria que neste momento já havia 95% do que seria minha versão final para o layout).

Organização do código e MVP

Durante a etapa de brainstorming e planejamento, o assistente de IA organizou as etapas de tal forma que uma versão viável da extensão tivesse o mínimo para funcionar corretamente. O objetivo (como o próprio nome diz) era encontrar um conjunto mínimo de código que permitisse avaliar a funcionalidade e confirmar a viabilidade do projeto. Por isso, com as configurações necessárias para uma extensão do Chrome feitas, e os arquivos organizados, providenciei imagens temporárias de ícones (falarei delas mais à frente) e ajustei a lista padrão de fusos horários. Para todos os efeitos, eu tinha um MVP.

Eu já sabia como organizar o código utilizando o Visual Studio Code e o GitHub, porém quis simular um cenário onde o assistente tivesse que me ajudar também com esta tarefa. Pedi a ele instruções de como utilizar o VSCode para editar o código e também como criar um repositório no GitHub para versionar o código, e as respostas foram precisas e com um nível de detalhes que permite até uma pessoa completamente leiga em tecnologia entendê-las e executá-las com sucesso.

Página de opções e persistência de dados

Conceito validado, passei a explorar horizontes e ampliar o escopo da aplicação, sempre fornecendo o código atual para o assistente e pedindo modificações a partir dele. Executei este processo algumas vezes ao longo de todo o projeto, e os resultados sempre foram satisfatórios. O assistente de IA entendia sempre o que meu código original fazia e, considerando minhas instruções no prompt, realizava as alterações solicitadas, gerando por vezes um novo arquivo, por outras um trecho para ser colado no código existente (sempre com instruções claras sobre como fazer isso).

Uma das primeiras alterações que solicitei foi a criação de uma página de configuração da extensão que permitisse adicionar e remover fusos horários. O assistente ofereceu uma sugestão de utilizar a própria estrutura de opções oferecida pelo navegador e implementou os arquivos necessários. Neste ponto, encontrei a primeira resposta “errada” dele: a página inicial com os fusos horários estava tentando ler de maneira direta uma estrutura de dados que não existia na memória do navegador e o código quebrava. Pela mensagem de erro do Chrome, ficava claro o problema e como resolvê-lo, mas respeitando a premissa de utilizar o assistente para tudo, informei a ele o erro dizendo que “achava que era um problema de inicialização de variáveis”. O modelo de IA confirmou minha suspeita e foi além: implementou instruções de programação defensiva em todos os lugares onde havia leitura de variáveis da memória do navegador, com condições padrão para evitar que o código quebrasse novamente.

Ordenação e usabilidade para novos fusos horários

Tudo já estava funcionando perfeitamente, exceto pelo fato que novos fusos horários adicionados pelo usuário eram exibidos pela ordem de adição, o que gera uma experiência ruim de usabilidade. Meu objetivo era que os fusos horários fossem ordenados pelo GMT, de tal forma que ficasse fácil de identificar quais locais estão antes ou depois da referência do usuário. Por isso, pedi ao assistente que encontrasse uma maneira de implementar isso, e com poucos ajustes, uma função estava pronta para manter tudo organizado.

Durante o processo de adição de um novo fuso horário, o assistente sugeriu um código que utilizava campos de texto para os valores, e no caso da lista de fusos horários, existe uma terminologia e um padrão que precisam ser respeitados para que a biblioteca de código consiga realizar a interpretação dos valores da maneira correta. Por isso, pedi ao assistente que trocasse o campo de texto por um dropdown alimentado por um arquivo local com a lista de fusos horários, e que permitisse busca por nomes específicos. Com poucos ajustes de HTML e CSS a funcionalidade estava pronta.

Por fim, também pedi que o assistente criasse uma mensagem inicial de boas-vindas para a extensão, incentivando que o usuário adicionasse novos fusos horários através da página de opções:

Neste ponto, uma versão funcional e razoavelmente boa da minha extensão estava pronta para ser publicada na Chrome Web Store. Se tempo fosse uma das minhas restrições, eu ficaria confortável de publicar o resultado do trabalho até aqui.

Tudo isso foi feito em menos de 4 horas de trabalho. A partir daqui, continuei evoluindo o código para torná-lo mais próximo do que eu tinha em mente e dos meus padrões de qualidade, porém estas melhorias poderiam tranquilamente ser lançadas como updates da primeira versão.

Definição da paleta de cores

Durante as interações anteriores, o assistente de IA sabia que cada fuso horário teria uma cor associada e deixou a estrutura de dados preparada para armazenar este valor. Entretanto, os valores eram determinados de forma fixa, e eu gostaria de implementar uma funcionalidade semelhante à que existia na extensão original na qual a cor de fundo varia de acordo com horário do dia. Meu conhecimento de cores em código hexadecimal é bem limitado, então pedi ao Claude que gerasse uma imagem de referência, sobre a qual eu faria ajustes:

I want to represent the hours of the day in colors, using dark tones for the night hours and light tones for the day hours. In order to help me decide which colors I will get, I need an image using the 16:9 proportion with 24 vertical bars, where each bar represents one hour of the day. Can you generate a first draft of this image?

Este foi o primeiro resultado:

O assistente produziu corretamente as variações de cores, porém a paleta de cores não era exatamente o que eu esperava. Fiz um novo pedido a ele:

It's a great first version! Some adjustments: In the midday hours, instead of using nearly white tones, I would like to use nearly yellow ones; In the afternoon hours, I would like to transition from nearly yellow tones to darker orange ones; the remaining tones are great and can remain the same;

A segunda interação trouxe o resultado que eu esperava:

A imagem foi gerada em SVG, por isso solicitei ao Claude que criasse um script em Python para converter as cores da imagem para uma lista de valores em JavaScript. Com os códigos das cores em mãos, em alguns segundos o assistente criou uma função que recebia a hora como entrada e retornava a cor correspondente. Além disso, as cores eram boas mas não seguiam uma paleta consistente, por isso pedi para que todas as cores fossem substituídas por tons pastéis.

Ajustes de interface - formato das horas

Pra finalizar a extensão, pedi ao assistente que me sugerisse alterações no código permitindo que os usuários alternassem a exibição das horas entre os formatos AM/PM e 24h. Este foi o único momento onde ele se perdeu um pouco - a abordagem que ele escolheu para implementar este pedido foi alterar todo o mecanismo de armazenamento dos fusos horários para que a hora retornada fosse compatível com o formato escolhido pelo usuário. Entretanto, este é um problema de exibição, ou seja, o fuso horário deve ser armazenado sempre no formato 24h e, caso necessário, o valor deve ser convertido apenas para exibição.

Utilizando uma flag armazenada nas opções da extensão, foi fácil implementar uma lógica simples para exibição. Apesar de enferrujado, minha persona de programador guarda alguns truques na manga.

Icones

O Claude não possui a capacidade de gerar imagens como o Midjourney ou o DALL-E, mas nem por isso ele deixa de ser útil. Uma aplicação interessante de um assistente de IA é a criação de prompts eficientes para serem utilizados em outros assistentes. Uma vez que o Claude conhecia todo o contexto que eu estava trabalhando, pedi a ele que criasse um prompt para atualizar meus ícones:

I have to create icons for my extension in different sizes (according to Google's specifications), and I'm planning to use DALL-E to generate these icons. Considering the nature of my extension and that it uses pastel tones to represent the hours of the day, what would be a good prompt to give to DALL-E to create those icons?

A dinâmica de interação com o DALL-E é semelhante ao Claude, mas existem particularidades para a geração de imagens que não vou explorar neste texto. Para fins de simplificação, depois de algumas interações e ajustes, consegui uma imagem satisfatória para os ícones. Com o auxílio de uma ferramenta online, redimensionei-a para os tamanhos específicos que a extensão requer.

Conclusões

Depois de 8h adicionais de trabalho, consegui chegar na versão final e que está publicada na Chrome Store. Foi uma jornada produtiva de interação com o Claude, que consolidou minha impressão da importância de uma ferramenta como esta para o aumento da produtividade. Todavia, também percebi que uma interação eficaz com um assistente de IA (seja ele qual for) requer uma curva de aprendizado - é uma ferramenta poderosa porém complexa, que te entrega aquilo que você pede, para o bem e para o mal. Se suas requisições são simples e superficiais, os artefatos obtidos serão proporcionais às suas entradas; interações complexas e com nível alto de detalhamento têm o potencial de entregar resultados bastante satisfatórios. Existem bons cursos que introduzem o assunto de prompt engineering e ensinam maneiras eficazes de interagir com estas novas ferramentas.

Ainda sobre o desenvolvimento, fiquei curioso para saber em quanto tempo um especialista em front-end faria o mesmo trabalho usando um assistente de IA (e também sem utilizá-lo). Levei 12h para obter o resultado publicado (sendo 4h para o MVP), e conversando com algumas pessoas, tivemos a impressão que uma pessoa experiente com JavaScript e front-end no geral levaria no máximo 30 minutos para obter o mesmo resultado com IA.

Uma barreira que certamente é limitante na adoção destas ferramentas é o preço. Minha conta é gratuita no Claude (durante todo o tempo, utilizei a versão 3.7 do modelo, porém enquanto eu escrevia este texto a Anthropic decidiu restringir o acesso apenas para usuários pagos pelo excesso de demanda), e por isso há limitações na quantidade de mensagens que ele aceita por chat. Outros assistentes implementam restrições semelhantes, de tal modo que não impedem sua utilização, porém reservam para os usuários que pagam algum dinheiro as melhores ferramentas. Para contornar a limitação do plano gratuito, tive que criar vários chats com o Claude e, no início de cada um deles, enviar mensagens para configurar o contexto da conversa. Isso foi um pouco chato depois de algumas repetições - um plano pago seria ótimo e potencialmente eu terminaria este trabalho ainda mais rápido.

Depois desta experiência simples com o Claude, e associado com tudo o que acompanho sobre produtividade e eficiência na área de desenvolvimento de software, estou convencido que as empresas desta indústria que não estão oferecendo uma conta não gratuita de algum assistente para seus funcionários estão perdendo tempo e dinheiro. Uma conta de um assistente deveria ser parte do kit de equipamentos de novos funcionários, tal como notebook, teclado, mouse, monitor. Quanto mais cedo os profissionais tiverem contato e familiaridade com esta ferramenta, mais cedo haverá resultados excepcionais a partir das experimentações e da criatividade das pessoas.