Pitch: Revivendo um projeto abandonado: como a IA resolveu em 30 segundos um problema que me travou por horas

TL;DR: esse texto é sobre como a IA me ajudou a destravar o projeto acima. Se quiser criar o seu próprio card para colocar no seu GitHub acesse -> https://codetrainer.pepinelli.dev/

Um tempo atrás, inspirado pelo github-readme-stats, tive a ideia de criar um card com meus status do GitHub e as tecnologias com que trabalho, para colocar no meu perfil. Quando pensei em incluir as badges do GitHub, me veio na hora à cabeça o cartão de treinador Pokémon, onde os treinadores exibem suas insígnias. Era perfeito, um cartão de visitas para mostrar minha vasta gama de tecnologias que eu domino:

Busquei uma referência nos jogos e a carteira do Pokémon Fire Red batia exatamente com o que tinha em mente:

Tem o nome, id do treinador, status da jornada e, o mais importante, as insignias. Era perfeito para o que eu queria. Puxei o figma e fiz a primeira versão:

Adicionei as cores e logos das insignias e tecnologias e ficou do jeito que queria (sim, eu troquei o nome do projeto ao longo do caminho):

UI pronta, só faltava partir para a implementação. Minha ideia era ter uma API com um único endpoint que recebesse o username do GitHub e retornasse o card em SVG. Simples, certo?

Fiz a API e comecei a fazer a primeira versão do card, tinha apenas o background e o próximo passo seria adicionar a fonte no estilo Pokémon, aí começou o problema. Eu precisava incluir a fonte junto com o SVG, tentei vários métodos que encontrei na internet para resolver isso, mas nada funcionava, a fonte simplesmente não carregava.

Isso foi em fevereiro de 2025, na época lembro que todos estavam falando sobre o Opus 3 e o GPT-4o que tinha sido lançado, resolvi dar uma chance pra essa tal de IA e coloquei ela pra resolver o problema da fonte. Ela tentou de várias formas, eu perdi algumas boas horas e... nada. Saí com a conclusão de que “essa IA não serve pra nada”. Logo depois surgiram outras prioridades, e o projeto foi abandonado.

Pouco mais de um ano depois, a nossa área mudou completamente. Tem empresa pedindo explicitamente que os devs não escrevam código na mão. A maioria dos desenvolvedores mudou a percepção sobre a IA, que passou de um autocomplete chique para um agente que escreve código que poderia ir direto para produção. Comigo não foi diferente. Hoje uso agentes no dia a dia, tanto no trabalho quanto nos projetos pessoais.

Um dia, com 2% da minha cota semanal do Claude sobrando, fiquei pensando no que fazer com aquele restinho e lembrei do meu querido cartão. Joguei o mesmo problema da fonte pro Claude Opus 5.5 e, em uns 30 segundos, estava resolvido.

Fiquei incrédulo. A solução nem era tão complexa, mas eu com certeza levaria um bom tempo pra chegar nela, se é que chegaria.

E qual era o problema, afinal?

O problema nunca foi o meu código. Como o GitHub exibe as imagens do README por dentro de uma tag , o SVG não pode carregar nada externo, então a fonte precisa ir embutida em base64, e isso eu já tinha feito certo. O Claude, em vez de ficar mexendo no meu código, isolou a fonte e carregou ela sozinha num Chromium headless, que cuspiu isso aqui:

OTS parsing error: cmap: Range glyph reference too high (105 > 104)
cmap: Failed to parse table

Foi aí que ele me explicou o que eu nunca tinha ouvido falar: o Chrome e o Firefox passam toda fonte por um sanitizador chamado OTS (OpenType Sanitizer), e se qualquer tabela estiver inválida, o navegador descarta a fonte inteira sem avisar e cai pro monospace. O Figma e o instalador de fontes do sistema não são tão rigorosos, por isso a fonte funcionava no design e nunca na web.

O defeito estava na tabela cmap, que mapeia os caracteres para os glifos: o último intervalo, que pela especificação deveria apontar pro glifo 0 (aquele de “caractere não encontrado”), apontava pro glifo 105, numa fonte que só tem glifos de 0 a 104. A correção que ele fez foi trocar um único valor no binário (de 106 pra 1) e recalcular os checksums do arquivo. Nenhum glifo mudou, a fonte continua idêntica, só sumiu o ponteiro inválido.

Eu nunca teria pensado em abrir o binário da fonte, porque estava procurando o erro no lugar errado o tempo todo.

Eu desisti muito rápido da primeira vez? Talvez, mas mesmo usando esses agentes todo dia, esse foi um daqueles momentos que deixam claro o quanto a IA evoluiu.

Se gostou da ideia e quer criar o seu próprio card, só acessar -> https://codetrainer.pepinelli.dev/

E se gostou mesmo deixe uma estrela no repositório! Vou ficar muito feliz.
https://github.com/lpepinelli/CodeTrainerCard