Proyecto de biblioteca codificado al estilo vibe con Claude Code
(balajmarius.com)- Caso de un proyecto personal que utilizó Claude Code para clasificar y visualizar automáticamente unas 500 libros
- El problema, que antes había fracasado porque escáneres de ISBN y Goodreads no reconocían ediciones en rumano, se resolvió con la OpenAI Vision API y scripts de Claude
- Tras extraer metadatos con una precisión del 90%, el resto se corrigió manualmente y las portadas se recopilaron automáticamente mediante Open Library y SerpAPI
- Se implementó una interacción similar a una biblioteca real con animaciones basadas en el scroll usando Framer Motion y una representación del grosor de los libros basada en la cantidad de páginas
- Muestra una estructura de colaboración en la que la IA se encarga de la ejecución y el usuario de las decisiones estéticas y de selección, destacando que “el costo de ejecutar baja, pero el gusto sigue siendo humano”
Ver la versión terminada de Bookshelf - https://balajmarius.com/bookshelf
Resumen del proyecto
- Aunque tenía alrededor de 500 libros, no llevaba un registro de ellos, así que construyó un sistema de clasificación y visualización automática con herramientas de IA
- En lugar de una hoja de cálculo simple, automatizó las etapas de ejecución con Claude Code y completó un proyecto personal que había pospuesto durante mucho tiempo
- El núcleo del proyecto no estaba en la perfección técnica, sino en eliminar los cuellos de botella de la ejecución
Identificación del problema
- Las apps de escaneo de ISBN y Goodreads no reconocían ediciones en rumano ni publicaciones raras, por lo que los datos quedaban incompletos
- Los datos incompletos generaban todavía más confusión, lo que hacía que el proyecto se interrumpiera repetidamente
- Lo que se necesitaba no era una app perfecta, sino una estructura de sistema capaz de tolerar la imperfección
Recolección y procesamiento de datos
- Los datos se construyeron a partir de 470 fotos de portadas y lomos de libros
- Un script escrito por Claude enviaba cada imagen a la OpenAI Vision API para extraer autor, título y editorial, y guardaba el resultado en archivos
JSON - Se alcanzó una precisión cercana al 90%; los errores restantes se debían a problemas de iluminación, daños o resolución
- El 10% restante se corrigió manualmente, y después el mismo pipeline se ejecuta automáticamente cada vez que se agregan libros nuevos
Mejora de imágenes de portada
- Se obtuvieron portadas con la Open Library API, pero la mitad tenía baja calidad o eran imágenes incorrectas
- Claude añadió un sistema de puntuación de calidad y marcado de errores, y cuando fallaba, se reemplazaba con búsqueda de imágenes de Google mediante SerpAPI
- De unos 460 libros, solo 10 requirieron corrección manual, lo que permitió mantener la eficiencia de la automatización
Implementación de la UI de biblioteca
- En lugar de una simple cuadrícula de portadas, se implementó una representación visual centrada en los lomos para que se sintiera como una biblioteca real
- Claude realizó la extracción de colores (color quantization) y el cálculo del color de texto con contraste
- Usando los datos de cantidad de páginas de Open Library, se reflejó el grosor de los libros y se añadieron pequeñas variaciones para reforzar el realismo
- Como resultado, se logró una textura visual similar a la de una biblioteca real
Animación e interacción
- Con Framer Motion se añadió una animación basada en el scroll en la que los lomos se inclinan al desplazarse
- Al principio había tirones por las actualizaciones de estado de React, pero se corrigió usando motion values y animaciones spring
- Tras el ajuste, se obtuvo un movimiento fluido y el menor costo de experimentar permitió repetir intentos con facilidad
Eliminación de funciones innecesarias
- Se añadió una función de scroll infinito, pero las diferencias en la altura del contenedor y errores de desplazamiento empeoraban la experiencia de usuario
- Técnicamente funcionaba, pero como no era necesaria, se eliminó
- Se enfatiza que decidir quitar “código que funciona pero es innecesario” es tarea humana
Adaptación móvil y vista en pila
- Como el desplazamiento horizontal era incómodo en móvil, se añadió una vista vertical en pila
- Claude analizó el código existente y reutilizó elementos como la temporización de animaciones, la extracción de color y el manejo de opacidad durante el scroll
- Generó un componente completamente nuevo sin explicaciones adicionales, mostrando la capacidad de la IA para entender y reestructurar código
El rol humano y conclusión
- Aunque Claude escribió todo el código, el usuario fue quien decidió lo siguiente
- aceptar una precisión del 90%
- corregir manualmente 10 portadas
- elegir un diseño centrado en los lomos
- eliminar funciones innecesarias
- validar la terminación sensorial de la animación
- El resultado final es una biblioteca web que clasifica y visualiza automáticamente 460 libros
- Muestra un modelo de colaboración en el que la IA se encarga de la ejecución y el ser humano de el gusto y el criterio
- En conclusión, “el costo de ejecutar seguirá bajando, pero el gusto sigue siendo humano”
2 comentarios
Afirman que solo hicieron falta 10 intervenciones manuales, pero no pasa de ser una justificación para sentirse bien. Para encontrar esas 10, hizo falta una inspección completa. Menea al perro.
Opiniones en Hacker News
En este momento, el vibe coding está justo en el punto ideal para proyectos pequeños
Cuando el proyecto crece, se vuelve difícil la gestión del contexto, y es fácil que el LLM genere demasiado código innecesario o introduzca bugs sutiles
En esos casos, conviene volver al modo de lluvia de ideas y usar al LLM solo para el diseño, mientras que el código real lo escribes tú o armas el esqueleto para que el LLM lo complete
Los LLM todavía son débiles para modificar un poco código existente o aprovechar una estructura ya hecha. Casi siempre intentan agregar nuevas abstracciones
Yo diseño personalmente la estructura modular y tengo claro cuál debe ser el resultado. Si revisas todo el código con detalle y haces una buena gestión de prompts y contexto (por ejemplo, dando código de muestra o una guía
agent.md), se puede controlar bastante bienCuando el codebase crece, el acoplamiento fuerte (tight coupling) entre módulos perjudica el rendimiento
La solución es el principio de “programar contra interfaces, no contra implementaciones”
Si defines claramente los límites de cada módulo y separas en archivos aparte las interfaces que exponen solo lo necesario, puedes hacer que Claude o tus colegas usen únicamente esas interfaces
Así reduces el contexto y Claude funciona mejor
Si el proyecto crece aún más, también puede aumentar la cantidad de interfaces, así que en ese punto hay que gestionarlo separando en unidades más grandes o reduciendo el alcance de los cambios
Ya estamos en un nivel donde se pueden mezclar estos enfoques incluso en proyectos bastante grandes
Me gustó la frase: “No necesitaba una app mejor, necesitaba un sistema que tolerara la imperfección”
También estuvo bueno ese estilo de escritura de decir que Claude no generó la idea, sino que se encargó de la implementación, mientras yo me encargué del gusto
Últimamente también se ven mucho en correos frases como “No reinventamos la rueda. Nosotros somos la rueda”
El hecho de no usar palabras grandilocuentes y repetir la misma estructura de frases se siente como un hábito humano
La IA normalmente mezcla patrones de frase de forma más aleatoria, pero aquí mantiene un marco bastante consistente
Me dio la impresión de alguien con sensibilidad editorial todavía poco pulida que intenta escribir con estilo a propósito
Me pregunto si a otras personas sí les dio esa vibra de IA
Aunque en LinkedIn ya hay tanto de ese tono que ayer terminé explotando y publiqué algo al respecto
Supongo que una combinación sutil de sensación de valor y atmósfera influye en cómo detectamos texto de IA
Todavía no he visto ningún proyecto grande exitoso hecho con vibe coding
La mayoría son programas pequeños que ya existen en los datos de entrenamiento
Si de verdad es tan revolucionario, me gustaría ver que produzca un nuevo algoritmo de compresión o la solución óptima al problema del viajante
Las herramientas de programación con IA deberían enfocarse en lo que hacen bien
Yo uso estas herramientas con frecuencia para crear pequeños programas de automatización para negocios
Gracias a eso ahora puedo hacer cosas que antes eran imposibles, y mi productividad aumentó unas 10 veces
Como dice el texto Perfect Software, la app perfecta para alguien es la que se ajusta a sus gustos y objetivos
Gracias a los LLM, ahora es fácil crear este tipo de software perfecto y personalizado
Competencia 1, Competencia 2
Mi puntaje impulsó mejoras entre los demás participantes
Si la IA elimina este tipo de trabajo aburrido, los humanos pueden enfocarse en lo creativo
Usar el tiempo en este tipo de vibe coding para resolver problemas pequeños es mucho más valioso
Yo también hice hace unos días una app de estantería de libros con Claude con una idea parecida
nindalf.com/books
Gracias a eso aumentó mi lectura y me quedó más cómodo ver highlights y notas
Las sugerencias de UI de Claude fueron mucho mejores que lo que yo habría hecho, y el backend también quedó casi igual a como lo habría hecho yo
Eso sí, a veces insistía con lógicas de validación extrañas, pero cuando yo las corregía, admitía: “¡Tienes razón!”. Eso pasó pocas veces
Yo también hice una app de estantería parecida, pero todavía no encuentro una buena forma de gestionar notas de audiolibros
Tu versión también está interesante
Yo también intenté algo parecido, pero en mi caso fue un ejemplo de fracaso con Claude
Quería hacer clicables las imágenes de la estantería en andrewblinn.com
Pero Claude generaba mal los enlaces de Goodreads con frecuencia y les pegaba IDs inválidos
El reconocimiento de los lomos de los libros tampoco fue preciso, así que al final lo hice a mano en Figma
La automatización que propuso Claude era demasiado lenta y cara
Yo también suelo hacer una página estática de estantería en HTML con los libros que leí cada año
Antes incluso escribí sobre intentar recrear Delicious Library
No era algo realmente necesario, pero era divertido organizar libros
Coincido con eso de que “460 libros no es un problema de escala. Saber cuándo borrar código que funciona no es algo que la IA pueda hacer por ti”
Yo también hice una app con datos de 900 calificaciones y 550 libros, y decidí no meter scroll infinito ni búsquedas complejas mientras el navegador aguante
Por ahora con “buscar en la página” es suficiente
Me gustó la idea de que “90% de precisión es suficiente”
Aunque los LLM creen errores nuevos, el mundo ya está lleno de sistemas tolerantes a errores
Creo que esta actitud también podría servirle a la gente que tiene una visión anti-IA
Yo también hice una app para registrar películas vistas con vibe coding en moviesonthe.computer
Como empecé con una idea clara de “mi propio clon de Letterboxd”, todo avanzó rápido
Esta capacidad de crear apps personalizadas es algo poderosísimo
Eso sí, las herramientas actuales todavía se quedan cortas para enseñarle la forma de pensar a alguien que no es desarrollador
Como dices, para alguien con background de programación es mucho más fácil plantear este tipo de proyectos con prompts
Si soy sincero, la usabilidad de lo que hizo esta persona es pésima
Puede que él sienta satisfacción por haberlo logrado, pero en la práctica se parece más a un juguete de entretenimiento que a algo productivo
Aun así, sí hay cosas que aprender de estos intentos
Pero si es una herramienta personal, la diversión en sí misma también puede ser el objetivo
Yo también programaba por diversión en BASIC cuando era niño. No era productivo, pero igual valía la pena