Projeto de estante feito com vibe coding usando Claude Code
(balajmarius.com)- Caso de um projeto pessoal que usou Claude Code para classificar e visualizar automaticamente cerca de 500 livros
- O problema que havia fracassado com scanners de ISBN e o Goodreads, que não reconheciam edições em romeno, foi resolvido com a OpenAI Vision API e scripts do Claude
- Após alcançar 90% de precisão na extração de metadados, o restante foi corrigido manualmente, e as imagens de capa foram coletadas automaticamente via Open Library e SerpAPI
- Implementação de uma interação semelhante a uma estante real com animações baseadas em rolagem usando Framer Motion e representação da espessura dos livros com base no número de páginas
- Mostra uma estrutura colaborativa em que a IA fica responsável pela execução e o usuário por julgamento estético e escolhas, enfatizando que “o custo de execução diminui, mas o gosto continua sendo humano”
Veja a Bookshelf - https://balajmarius.com/bookshelf concluída
Visão geral do projeto
- Embora tivesse cerca de 500 livros, o autor não conseguia gerenciar a lista e, usando ferramentas de IA, construiu um sistema de classificação e visualização automática
- Em vez de uma planilha simples, automatizou as etapas de execução com Claude Code e concluiu um projeto pessoal que vinha adiando havia muito tempo
- O ponto central do projeto não está na perfeição técnica, mas em eliminar gargalos de execução
Identificação do problema
- Apps de scanner de ISBN e o Goodreads não conseguiam reconhecer edições em romeno ou publicações raras, deixando os dados incompletos
- Dados incompletos acabavam gerando ainda mais confusão, fazendo o projeto ser interrompido repetidamente
- O necessário não era um app perfeito, mas sim uma estrutura de sistema capaz de tolerar imperfeições
Coleta e processamento de dados
- Os dados foram montados com base em 470 fotos das capas e lombadas dos livros
- Um script escrito pelo Claude enviava cada imagem para a OpenAI Vision API para extrair autor, título e editora, salvando o resultado em arquivos
JSON - Foi alcançada uma precisão de cerca de 90%, e os erros restantes ocorreram por problemas de iluminação, danos ou resolução
- Os 10% restantes foram corrigidos manualmente e, depois disso, o mesmo pipeline passou a rodar automaticamente sempre que novos livros fossem adicionados
Complemento das imagens de capa
- As capas foram buscadas pela Open Library API, mas metade tinha baixa qualidade ou imagens incorretas
- O Claude adicionou um sistema de pontuação de qualidade e sinalização de erros e, em caso de falha, usou a SerpAPI para substituir com busca de imagens no Google
- De cerca de 460 livros, apenas 10 precisaram de correção manual, garantindo eficiência na automação
Implementação da UI da estante
- Em vez de uma simples grade de capas, foi criada uma representação visual centrada nas lombadas, como em uma estante real
- O Claude fez a extração de cores (color quantization) e o cálculo de cor de texto com contraste adequado
- Usando os dados de número de páginas da Open Library, refletiu a espessura dos livros e adicionou pequenas variações para reforçar o realismo
- Como resultado, foi obtida uma textura visual semelhante à de uma estante de verdade
Animação e interação
- Com Framer Motion, foi adicionada uma animação baseada em rolagem em que as lombadas dos livros se inclinam durante o scroll
- No início havia travamentos causados por atualizações de estado no React, mas isso foi corrigido com motion values e animações spring
- Depois da correção, o movimento ficou suave, e o baixo custo de experimentação permitiu várias tentativas iterativas
Remoção de recursos desnecessários
- Foi adicionada uma rolagem infinita, mas a inconsistência na altura do contêiner e erros de scroll prejudicaram a experiência do usuário
- Tecnicamente funcionava, mas não era necessário, então foi removido
- Reforça que a decisão de remover “código que funciona, mas é desnecessário” é papel do ser humano
Adaptação para mobile e visualização em pilha
- Como a rolagem horizontal era incômoda no mobile, foi adicionada uma visualização vertical em pilha
- O Claude analisou o código existente e reutilizou timing de animação, extração de cores e tratamento de transparência no scroll
- Sem explicações extras, gerou um novo componente completo, confirmando a capacidade da IA de compreender e reorganizar código
O papel humano e a conclusão
- Embora todo o código tenha sido escrito pelo Claude, o usuário decidiu o seguinte
- aceitar 90% de precisão
- corrigir manualmente 10 capas
- escolher um design centrado nas lombadas
- remover recursos desnecessários
- verificar o acabamento sensorial da animação
- O resultado final é uma estante web que classifica e visualiza automaticamente 460 livros
- O projeto mostra um modelo colaborativo em que a IA cuida da execução e o ser humano fica responsável por gosto e julgamento
- Em conclusão, “o custo de execução continua caindo, mas o gosto ainda é responsabilidade humana”
2 comentários
Alega-se que só foram necessárias 10 intervenções manuais, mas isso não passa de autoengano. Para encontrar essas 10, foi preciso fazer uma inspeção completa. O rabo abanando o cachorro
Comentários do Hacker News
O vibe coding de hoje está exatamente no ponto certo para projetos pequenos
Quando o projeto cresce, fica difícil fazer gestão de contexto, e o LLM tende a gerar código demais sem necessidade ou introduzir bugs sutis com facilidade
Nessas horas, é melhor voltar para o modo de brainstorming, usar o LLM só para ajudar no design, e escrever o código você mesmo ou montar o esqueleto e deixar o LLM preencher o resto
O LLM ainda é fraco para fazer pequenas alterações no código existente ou aproveitar a estrutura atual. Na maioria das vezes, ele tenta adicionar novas abstrações
Eu mesmo desenho a estrutura dos módulos e sei claramente qual resultado quero. Se você revisar todo o código com cuidado e fizer uma boa gestão de prompts e contexto (por exemplo, fornecendo código de exemplo, guias em
agent.mdetc.), dá para manter controle suficienteQuando a base de código cresce, o acoplamento forte (tight coupling) entre módulos piora o desempenho
A solução é o princípio de “programe para interfaces, não para implementações”
Se você definir claramente os limites de cada módulo e separar em arquivos próprios as interfaces que expõem apenas o necessário, fazendo com que Claude ou colegas usem só essas interfaces, isso resolve
Assim, o contexto diminui e o Claude funciona melhor
Se o projeto crescer ainda mais, as próprias interfaces podem se multiplicar; nesse caso, é preciso gerenciar isso separando em unidades maiores ou reduzindo o escopo das mudanças
Já estamos num nível em que dá para misturar tudo isso até em projetos relativamente grandes
A frase “não era preciso um app melhor, e sim um sistema que tolerasse imperfeições” me marcou
Gostei desse estilo de escrita em que Claude não criou a ideia, ficou responsável pela implementação, e eu fiquei responsável pelo gosto
Hoje em dia até em e-mails aparece muito frase do tipo “não reinventamos a roda. Nós somos a roda”
O fato de não usar palavras grandiosas e repetir a mesma estrutura de frase me pareceu mais um hábito humano
A IA normalmente mistura padrões de frase de forma mais aleatória, mas aqui ela mantém um molde consistente
Parece alguém com senso de edição ainda pouco lapidado tentando escrever de um jeito intencionalmente estiloso
Fiquei curioso se outras pessoas também sentiram esse cheiro de IA
Só que no LinkedIn esse tipo de estilo está tão comum que ontem acabei explodindo e publiquei um texto sobre isso
Acho que uma combinação sutil de sensação de valor e atmosfera influencia essa detecção de IA
Ainda não vi nenhum grande projeto bem-sucedido feito com vibe coding
A maioria são programas pequenos que já existem nos dados de treinamento
Se isso for realmente inovador, queria ver criar algo como um novo algoritmo de compressão ou uma solução ótima para o problema do caixeiro-viajante
Ferramentas de codificação com IA devem se concentrar no que fazem bem
Eu uso esse tipo de ferramenta com frequência para criar pequenos programas de automação para negócios
Graças a isso consigo fazer coisas que antes eram impossíveis, e minha produtividade aumentou umas 10 vezes
Como no texto Perfect Software, o app perfeito para alguém é aquele que combina com o gosto e o objetivo dessa pessoa
Graças aos LLMs, ficou muito mais fácil criar esse tipo de software perfeito personalizado
Competição 1, Competição 2
Minha pontuação acabou incentivando melhorias por parte de outros participantes
Se a IA eliminar esse tipo de trabalho tedioso, os humanos podem se concentrar em tarefas criativas
Esse vibe coding que resolve problemas pequenos é um uso de tempo muito mais valioso
Eu também fiz há alguns dias um app de estante de livros com Claude com a mesma ideia
nindalf.com/books
Isso me ajudou a ler mais e facilitou ver meus destaques e anotações
As sugestões de UI do Claude foram muito melhores do que as que eu teria feito, e o backend também ficou quase igual ao que eu faria
Só que às vezes ele insistia em uma lógica de validação estranha; quando eu corrigia manualmente, ele reconhecia com um “você tem razão!”. Esses casos eram raros
Eu também fiz um app de estante parecido, mas ainda não encontrei uma boa forma de gerenciar anotações de audiobooks
A sua versão também é interessante
Eu também tentei algo parecido, mas no meu caso foi um exemplo de fracasso do Claude
Eu queria tornar clicáveis as imagens da estante em andrewblinn.com
Mas o Claude frequentemente gerava links errados do Goodreads e colocava IDs inválidos
O reconhecimento das lombadas dos livros também era impreciso, então no fim fiz tudo manualmente no Figma
A automação sugerida pelo Claude era lenta demais e cara demais
Eu também costumava fazer uma página estática de estante em HTML com os livros que li a cada ano
Antigamente até escrevi sobre tentar recriar o Delicious Library
Não era exatamente necessário, mas era gostoso organizar os livros
Concordei com a frase “460 livros não é um problema de escala. Saber quando apagar código que funciona é algo que a IA não consegue fazer no seu lugar”
Eu também fiz um app com 900 avaliações e dados de 550 livros, e decidi não colocar scroll infinito nem busca complexa enquanto o navegador ainda aguentar
Por enquanto, a “busca na página” já é suficiente
Gostei da frase “90% de precisão já basta”
Mesmo que o LLM crie novos erros, o mundo já está cheio de sistemas tolerantes a falhas
Acho que essa atitude pode ajudar até quem tem uma visão anti-IA
Eu também fiz por vibe coding um app de registro de filmes em moviesonthe.computer
Como comecei com uma ideia clara de “meu próprio clone do Letterboxd”, o progresso foi rápido
Essa capacidade de criar apps personalizados é algo extremamente poderoso
Só que as ferramentas atuais ainda deixam a desejar na hora de ensinar a forma de pensar para quem não é desenvolvedor
Como você disse, quem tem background em programação consegue fazer prompts para esse tipo de projeto com muito mais facilidade
Sinceramente, a usabilidade do que essa pessoa fez é péssima
Ela pode ter sentido realização, mas na prática isso está mais para um brinquedo de entretenimento do que algo produtivo
Ainda assim, dá para aprender alguma coisa com esse tipo de tentativa
Mas se for uma ferramenta pessoal, talvez a diversão em si seja o objetivo
Quando eu era criança também programava em BASIC por diversão. Não era produtivo, mas ainda assim tinha valor