Vibe coding na prática com Claude Code: SEO, emojis e tráfego orgânico do zero
Esse é o relato honesto da criação do Emoji Creator, o meu primeiro projeto de vibe coding ponta a ponta com Claude Code, SEO programático, scraping e mais de 13 mil emojis no ar.
Semprei gostei de criar reactions customizadas pro Slack/Teams nas empresas que trabalhei. Aquelas figurinhas animadas, contextualizadas pra cultura do time, para algum projeto específico. Fazia isso na mão e de vez em quando em alguns outros sites que encontrava no Google.
Aí veio a pergunta natural: por que não ter meu próprio site pra isso?
Mais do que resolver o problema, eu queria usar esse projeto como laboratório. Queria aprender a usar o Claude Code de verdade, não só para escrever código, mas para pensar junto comigo no que construir, como priorizar e como estruturar algo que tivesse chance real de funcionar.
O site basicamente é um sistema que você cria gifs com overlay. O usuário faz upload de uma imagem e o site aplica efeitos renderizado frame a frame via canvas usando gifuct-js.
Então criei algumas animações clássicas como efeito de tremer, um fogo animado, uma grade de prisão na frente da pessoa, um efeito de polimento e brilho, etc.
O começo: arquitetura sem gastar um centavo
A primeira decisão foi clara: não quero pagar nada por infraestrutura.
Pedi pro Claude sugestões de arquitetura. Ele deu algumas opções. Eu rejeitei tudo que tinha custo. Ele ajustou. Chegamos juntos em algo com Cloudflare Pages, 100% no free-tier.
Isso foi fundamental! Eu tenho visto vários amigos que começam a fazer todo o projeto sem pensar nisso e, de repente, precisam pagar algum host que custa US$ 5 - US$ 10. É pouca coisa, mas de projeto em projeto você vai gastando uma fortuna.
Recomendo que você sempre defina onde vai hospedar seu site no começo do projeto, dessa maneira você já sabe das limitações do servidor e facilita a escolha da arquitetura (e ainda ajuda você a economizar uma grana caso seja algo importante).
Por que começar pelo SEO, não pelo código
Antes de escrever uma linha de código, eu queria entender se tinha demanda real.
Conectei o Claude Code ao Semrush, passei alguns concorrentes que eu já conhecia e pedi uma análise completa: palavras-chave, volume de busca, dificuldade de ranqueamento, o que eles estavam fazendo bem.
O retorno foi uma estratégia de SEO clara:
- Quais páginas criar
- Quais termos tinham chance real de ranquear
- Quais eram competitivos demais pra quem está começando
Eu conheço SEO, então dei algumas correções de rota. Mas o grosso do trabalho analítico foi feito pelo Claude. O que antes levaria dias de pesquisa manual saiu em horas.
Com a estratégia definida, pedi pro Claude transformar aquilo em boas práticas técnicas: breadcrumbs, meta descriptions, meta titles, estrutura de URLs, FAQ contextualizada para cada página.
Criei páginas específicas de criação de emoji pro Discord, Slack, Twitch e Teams. Mesmo site, texto e imagens diferentes, estrutura igual. Simples de manter, mais superfície para ranquear.
Essa foi a V1. Subiu. Sitemap gerado. Indexação no Google configurada.
O motor de efeitos que transformou o site numa ferramenta
Aqui é onde o projeto ficou interessante.
Eu precisava de mais overlays, mas ficar pedindo pro Claude Code era quase brincar de batalha naval… 3-5 erros para ter um acerto.
Então construí o Builder Engine, um sistema interno que faz renderização via canvas com overlays procedurais, controles de velocidade (slow, normal, fast), direção (forward, reverse, boomerang) e export de GIF. Dessa maneira eu consegui customizar overlays para colocar no gerador de emoji de maneira mais prática
Como construí o produto: do diretório ao motor de efeitos
Do criador ao diretório de packs
Navegando, encontrei outro site de emoji, não de criação, mas de download de packs prontos. Pensei: posso criar um diretório de packs. Mas antes de construir qualquer coisa, voltei pro Claude para uma nova rodada de análise.
Ele mapeou quais packs tinham mais busca, quais eram mais fáceis de ranquear, quais eram competitivos demais. Me devolveu uma lista priorizada do que construir.
Com isso, construí um scraper que varreu várias bases de dados públicas de emojis, pedi pro Claude Cowork categorizar tudo em pastas contextualizadas, e as páginas de cada pack foram geradas automaticamente. Hoje o site tem mais de 13 mil emojis.
Criação de páginas específicas para cada emoji para capturar long tail
Aqui vai uma versão mais rica, mantendo seu tom de builder contando a história:
Uma das alavancas mais poderosas de SEO é criar páginas que respondam buscas muito específicas - o chamado long tail. No caso do Emoji Creator, isso significava ter uma página dedicada para cada emoji dentro de cada pack. Cada página seria uma porta de entrada via Google para alguém buscando exatamente aquele emoji.
Mas aqui tem um detalhe que muita gente erra: criar páginas finas - com pouco conteúdo ou conteúdo genérico - é pior do que não criar nada. O Google simplesmente ignora, ou pior, penaliza o domínio inteiro por thin content. Então o desafio não era só gerar as páginas, era garantir que cada uma tivesse conteúdo genuinamente útil e diferenciado.
Precisei montar um pipeline que, para cada emoji inserido em um pack, gerasse automaticamente uma página com texto rico: contexto de uso, variações, significado cultural, sugestões de combinação.
E isso multiplicado por mais de 13 mil emojis, traduzido para 6 idiomas. É o tipo de coisa que seria inviável manualmente, mas que com o setup certo de automação vira uma máquina de indexação.
O resultado é que cada página também funciona como um nó na rede de link building interno - conectando emojis relacionados, packs e categorias, o que reforça a autoridade do domínio como um todo.
Exemplo de página com link building interno de um emoji do Pepe
Multi-idioma desde o dia zero
Uma decisão que tomei cedo e que valeu muito: quero tráfego de outros países.
Defini seis idiomas desde o início: português, inglês, espanhol, alemão, japonês e coreano.
Cada página criada, cada pack novo, cada blog post, tudo traduzido automaticamente. Um sitemap por idioma. Tudo indexado corretamente no Google.
É o tipo de decisão que parece trabalhosa no começo, mas que escala sozinha depois. Com essa abordagem já tenho acesso de inúmeros países e em diferentes idiomas.
Desafios reais: deploys que quebraram, limites que eu não sabia que existiam
Vibe coding não é "pede pro Claude e funciona". Tem infra que quebra, limites de plataforma que você descobre na hora, e CI que bloqueia deploy e por aí vai.
Durante todo esse processo esbarrei em vários problemas - e sei que muitos pela falta de experiência já que nunca fui desenvolvedor de software. Deploy que não subia. Build que quebrava por erro de TypeScript. Testes que travavam o pipeline. Variáveis de ambiente que sumiam no meio do build. Páginas que quebravam depois de migrar pra geração estática.
Cada vez que eu achava que tinha estabilizado, aparecia mais um.
O pior dia foi 6 de março. Cinco fixes em sequência, todos causados pelo mesmo gatilho: um pack com mais 3.145 emojis que estourou o limite de 26MB do Cloudflare Pages. Um limite que eu não sabia que existia até bater nele.
Esse estouro causou efeito cascata, quebrou o CI, os arquivos de emoji sumiram do build, as meta tags de páginas em outros idiomas pararam de funcionar, e os testes voltaram a bloquear o deploy.
Cada problema desses foi resolvido com o Claude, eu entendendo o erro, ele sugerindo o fix, eu validando se fazia sentido antes de aplicar. Às vezes ele acertava de primeira. Às vezes eu precisava dar mais contexto, corrigir a direção, testar na mão.
Esse é o vibe coding honesto. A IA acelera muito. Mas a infra ainda quebra, os limites da plataforma ainda existem, e alguém ainda precisa estar no controle quando tudo vai por água abaixo.
Conclusão
A maior lição desse projeto não é técnica e sim de método: dados de mercado e clareza do que construir antes de fazer algum código.
Antes de decidir o que construir, eu entendi o que tinha demanda. Antes de criar páginas, eu sabia quais termos tinham chance de ranquear. Antes de coletar emojis, eu sabia quais packs as pessoas buscavam. IA não substitui essa lógica ela acelera a execução quando você já sabe pra onde ir.
Você vai entender como validar ideias, identificar oportunidades reais e transformar insights em projetos que fazem sentido, tudo isso colocando a IA como aliada na execução, e não como substituta do raciocínio.
FAQ | Perguntas frequentes sobre Vibe coding sendo usado na prática
1. Vibe coding funciona para quem não sabe programar?
Depende do projeto. Para sites estáticos, landing pages e ferramentas simples, sim, o Claude consegue guiar a maior parte da implementação. Para projetos com infra mais complexa, como CI/CD, banco de dados e deploy automatizado, é importante ter pelo menos noções básicas de como as peças se conectam. O Claude ajuda muito, mas não substitui o raciocínio de quem está no controle.
2. Quanto custou pra construir o Emoji Creator?
A infraestrutura é 100% gratuita: Cloudflare Pages pro deploy, GitHub pra versionamento, Cloudflare D1 pro banco de dados. O único custo real foi o tempo de uso do Claude Code durante o desenvolvimento.
3. Quanto tempo levou pra construir?
Esse foi o projeto mais demorado da minha jornada com vibe coding por ser o primeiro. Foram várias semanas, incluindo os dias de debugging de CI. Hoje eu faria muito mais rápido. Estava aprendendo a usar as ferramentas ao mesmo tempo que construía, testando arquiteturas, errando e corrigindo. Projetos seguintes saíram bem mais rápido.
4. O projeto teve mais coisas implementadas?
Sim, gradualmente vou adicionando coisas novas pensando em SEO e sempre analisando o volume de busca para priorizar. Por exemplo, notei que há um volume de busca relevante para pessoas que querem copiar e colar emojis - então criei a página “Copiar e Colar Emojis”.
Outro exemplo é a página de emojis mais populares, no qual as pessoas também buscam baixarem sempre o que está mais na moda.
