Proyek rak buku vibe coding dengan Claude Code
(balajmarius.com)- Contoh proyek pribadi yang memanfaatkan Claude Code untuk mengklasifikasikan dan memvisualisasikan sekitar 500 buku secara otomatis
- Masalah yang sebelumnya gagal diatasi oleh pemindai ISBN maupun Goodreads karena tidak bisa mengenali edisi berbahasa Rumania, diselesaikan dengan skrip berbasis OpenAI Vision API dan Claude
- Setelah mencapai akurasi 90% dalam ekstraksi metadata, sisanya diperbaiki secara manual, lalu gambar sampul dikumpulkan otomatis melalui Open Library dan SerpAPI
- Menghadirkan interaksi seperti rak buku sungguhan melalui animasi berbasis scroll dengan Framer Motion serta representasi ketebalan buku berdasarkan jumlah halaman
- Menunjukkan struktur kolaborasi di mana AI menangani eksekusi dan pengguna menangani penilaian estetika serta pilihan, sambil menekankan bahwa "biaya eksekusi menurun, tetapi selera tetap menjadi ranah manusia"
Lihat Bookshelf - https://balajmarius.com/bookshelf yang sudah jadi
Gambaran proyek
- Meski memiliki sekitar 500 buku, daftar koleksinya tidak pernah benar-benar terkelola, sehingga dibuatlah sistem klasifikasi dan visualisasi otomatis dengan bantuan alat AI
- Alih-alih spreadsheet sederhana, tahapan eksekusi diotomatisasi melalui Claude Code untuk menuntaskan proyek pribadi yang sudah lama tertunda
- Inti proyek ini bukan pada kesempurnaan teknis, melainkan pada menghilangkan bottleneck eksekusi
Identifikasi masalah
- Aplikasi pemindai ISBN dan Goodreads tidak mampu mengenali edisi berbahasa Rumania atau publikasi langka, sehingga datanya tidak lengkap
- Data yang tidak lengkap justru menambah kebingungan dan membuat proyek berulang kali terhenti
- Yang dibutuhkan bukan aplikasi yang sempurna, melainkan struktur sistem yang mampu mentoleransi ketidaksempurnaan
Pengumpulan dan pemrosesan data
- Data dibangun berdasarkan 470 foto yang memotret sampul dan punggung buku
- Skrip yang ditulis Claude mengirim tiap gambar ke OpenAI Vision API untuk mengekstrak penulis, judul, dan penerbit, lalu menyimpan hasilnya ke file
JSON - Mencapai sekitar akurasi 90%, sementara sisa kesalahan muncul akibat masalah pencahayaan, kerusakan, atau resolusi
- Sisa 10% diperbaiki secara manual, lalu pipeline yang sama dijalankan otomatis saat ada buku baru ditambahkan
Penyempurnaan gambar sampul
- Sampul diambil melalui Open Library API, tetapi separuhnya berkualitas rendah atau gambar yang salah
- Claude menambahkan sistem penilaian kualitas dan penanda error, lalu jika gagal, diganti dengan pencarian Google Images melalui SerpAPI
- Dari sekitar 460 buku, hanya 10 yang perlu diperbaiki manual, sehingga efisiensi otomatisasi tetap terjaga
Implementasi UI rak buku
- Alih-alih grid sampul sederhana, dibuat representasi visual yang berfokus pada punggung buku seperti rak buku sungguhan
- Claude melakukan ekstraksi warna (color quantization) dan perhitungan warna teks yang kontras
- Dengan memanfaatkan data jumlah halaman dari Open Library, ketebalan buku turut direpresentasikan, lalu ditambah sedikit variasi untuk memperkuat kesan realistis
- Hasilnya adalah tekstur visual yang mirip rak buku asli
Animasi dan interaksi
- Menambahkan animasi berbasis scroll dengan Framer Motion, sehingga punggung buku tampak miring saat digulir
- Awalnya terjadi gejala patah-patah akibat update state React, tetapi kemudian diperbaiki dengan motion values dan animasi spring
- Setelah diperbaiki, gerakannya menjadi halus, dan biaya eksperimen cukup rendah sehingga percobaan berulang menjadi memungkinkan
Menghapus fitur yang tidak perlu
- Fitur infinite scroll sempat ditambahkan, tetapi menurunkan pengalaman pengguna karena ketidaksesuaian tinggi kontainer dan error pada scroll
- Secara teknis fitur itu berjalan, tetapi tidak diperlukan sehingga dihapus
- Ini menegaskan bahwa keputusan untuk menghapus kode yang bekerja tetapi tidak diperlukan adalah peran manusia
Dukungan mobile dan stack view
- Karena scroll horizontal tidak nyaman di mobile, ditambahkan stack view vertikal
- Claude menganalisis kode yang ada lalu memanfaatkan kembali timing animasi, ekstraksi warna, dan pemrosesan transparansi scroll
- Tanpa penjelasan terpisah, Claude menghasilkan komponen baru yang utuh, memperlihatkan kemampuan AI dalam memahami dan menyusun ulang kode
Peran manusia dan kesimpulan
- Meski Claude menulis seluruh kode, pengguna tetap menentukan hal-hal berikut
- menerima akurasi 90%
- memperbaiki 10 sampul secara manual
- memilih desain yang berfokus pada punggung buku
- menghapus fitur yang tidak diperlukan
- memastikan kualitas rasa dari animasi
- Hasil akhirnya adalah rak buku berbasis web yang secara otomatis mengklasifikasikan dan memvisualisasikan 460 buku
- Proyek ini menunjukkan model kolaborasi di mana AI menangani eksekusi, sementara manusia menangani selera dan penilaian
- Kesimpulannya, "biaya eksekusi akan terus turun, tetapi selera tetap menjadi milik manusia"
2 komentar
Mereka mengklaim hanya perlu 10 hal yang dikerjakan manual, tetapi itu tak lebih dari sekadar pembenaran diri. Untuk menemukan 10 hal itu, tetap diperlukan pemeriksaan menyeluruh. Ekor mengibas-ngibaskan anjing.
Opini Hacker News
Saat ini vibe coding memang pas untuk proyek berskala kecil
Saat proyek membesar, pengelolaan konteks menjadi sulit, dan LLM mudah menghasilkan terlalu banyak kode yang tidak perlu atau membuat bug yang subtil
Dalam situasi seperti itu, lebih baik kembali ke mode brainstorming, gunakan bantuan LLM hanya untuk desain, lalu tulis kode sebenarnya sendiri atau buat kerangkanya dan biarkan LLM mengisinya
LLM juga masih lemah dalam sedikit memodifikasi kode yang ada atau memanfaatkan struktur yang sudah ada. Biasanya malah cenderung menambahkan abstraksi baru
Saya merancang sendiri struktur modulnya dan tahu jelas hasil yang saya inginkan. Jika semua kode ditinjau dengan detail, ditambah prompt yang baik dan pengelolaan konteks yang rapi (misalnya memberi contoh kode, panduan agent.md, dan sebagainya), semuanya masih cukup bisa dikendalikan
Saat codebase membesar, tight coupling antarmodul akan menurunkan kualitas
Solusinya adalah prinsip “program terhadap interface, bukan implementasi”
Perjelas batas tiap modul, pisahkan interface yang hanya mengekspos bagian yang diperlukan ke file terpisah, lalu biarkan Claude atau rekan kerja hanya menggunakan interface itu
Dengan begitu konteks berkurang dan Claude bisa bekerja lebih baik
Jika proyek makin besar dan jumlah interface sendiri mulai banyak, itu harus dikelola lagi dengan memisah pada unit yang lebih besar atau memperkecil lingkup perubahan
Dan sekarang semuanya sudah di level yang bisa dicampur bahkan pada proyek yang cukup besar
Kalimat “yang dibutuhkan bukan aplikasi yang lebih baik, melainkan sistem yang tahan terhadap ketidaksempurnaan” terasa berkesan
Gaya penulisannya keren, seperti mengatakan Claude bukan yang mencetuskan ide, melainkan yang mengerjakan implementasi, sementara saya bertanggung jawab atas selera
Belakangan ini di email juga sering muncul kalimat seperti “kami tidak menciptakan ulang roda. Kami adalah rodanya”
Tidak memakai kata-kata bombastis, dan mengulang struktur kalimat yang sama justru terasa seperti kebiasaan manusia
AI biasanya mencampur pola kalimat secara acak, sedangkan ini malah mempertahankan kerangka yang konsisten
Rasanya seperti seseorang yang insting editornya belum terlalu matang tapi sengaja ingin menulis dengan gaya keren
Saya jadi penasaran apakah orang lain juga merasakan ini sebagai aroma AI
Meski begitu, di LinkedIn gaya seperti itu sudah terlalu banyak sampai kemarin saya akhirnya meledak dan menulis posting soal itu
Mungkin kombinasi halus antara kesan bernilai dan atmosfer ikut memengaruhi deteksi AI
Saya masih belum pernah melihat proyek besar yang sukses dengan vibe coding
Kebanyakan hanyalah program kecil yang sebenarnya sudah ada dalam data latih
Kalau memang benar-benar revolusioner, saya ingin melihatnya membuat algoritme kompresi baru atau solusi optimal untuk traveling salesman problem
Alat coding AI sebaiknya fokus pada bidang yang memang dikuasainya
Saya sering membuat program otomasi kecil untuk bisnis dengan alat seperti ini
Berkat itu saya bisa melakukan hal-hal yang dulu mustahil, dan produktivitas saya meningkat 10 kali lipat
Seperti dalam tulisan Perfect Software, aplikasi yang sempurna bagi seseorang adalah aplikasi yang cocok dengan selera dan tujuannya
Berkat LLM, kini jadi mudah membuat software sempurna yang dipersonalisasi seperti ini
Kompetisi 1, Kompetisi 2
Skor saya mendorong peserta lain untuk terus melakukan perbaikan
Jika AI bisa menghilangkan pekerjaan membosankan seperti ini, manusia bisa fokus pada hal yang kreatif
Vibe coding untuk menyelesaikan masalah kecil seperti ini adalah penggunaan waktu yang jauh lebih bernilai
Beberapa hari lalu saya juga membuat aplikasi rak buku dengan Claude dengan ide yang sama
nindalf.com/books
Berkat itu saya jadi lebih banyak membaca, dan melihat highlight serta catatan jadi lebih nyaman
Usulan UI dari Claude jauh lebih baik daripada yang saya buat sendiri, dan backend-nya juga hampir sama
Hanya saja kadang ia ngotot pada logika validasi yang aneh, dan ketika saya perbaiki sendiri dia mengakui, “Anda benar!” Untung kasus seperti itu jarang
Saya juga membuat aplikasi rak buku serupa, tapi untuk mengelola catatan audiobook saya belum menemukan cara yang bagus
Versi Anda juga menarik
Saya juga pernah mencoba hal yang mirip, tapi dalam kasus saya ini adalah contoh kegagalan Claude
Saya ingin membuat gambar rak buku di andrewblinn.com bisa diklik
Tapi Claude sering membuat tautan Goodreads yang salah dan menempelkan ID yang tidak valid
Pengenalan punggung buku juga tidak akurat, jadi akhirnya saya kerjakan manual dengan Figma
Otomasi yang disarankan Claude terlalu lambat dan mahal
Saya juga tiap tahun pernah membuat halaman rak buku statis dalam HTML dari buku-buku yang saya baca
Dulu saya juga pernah menulis tentang mencoba membuat ulang Delicious Library
Sebenarnya tidak benar-benar perlu, tapi menata buku terasa menyenangkan
Saya setuju dengan kalimat “460 buku bukan masalah skala. Mengetahui kapan harus menghapus kode yang sebenarnya berfungsi bukan sesuatu yang bisa dilakukan AI sebagai pengganti”
Saya juga membuat aplikasi dengan data 900 rating dan 550 buku, dan memutuskan tidak menambahkan infinite scroll atau pencarian kompleks sampai browser benar-benar tidak kuat lagi
Untuk sekarang, “cari di halaman” saja sudah cukup
Saya suka kalimat “akurasi 90% sudah cukup”
Walaupun LLM membuat jenis kesalahan baru, di dunia ini memang sudah banyak sistem yang toleran terhadap kesalahan
Sikap seperti ini rasanya juga bisa membantu orang yang punya sudut pandang anti-AI
Saya juga membuat aplikasi catatan tontonan film dengan vibe coding di moviesonthe.computer
Karena saya memulai dengan ide yang jelas, yaitu “klon Letterboxd versi saya sendiri”, pengerjaannya jadi cepat
Kemampuan membuat aplikasi yang dipersonalisasi seperti ini adalah kekuatan yang luar biasa
Hanya saja, alat saat ini masih kurang untuk mengajarkan cara berpikirnya sendiri kepada non-developer
Seperti yang Anda bilang, orang dengan latar belakang pemrograman bisa memberi prompt untuk proyek seperti ini dengan lebih mudah
Sejujurnya, dari sisi usability, hasil yang dibuat orang ini buruk sekali
Mungkin dia merasa puas secara pribadi, tapi dalam praktiknya ini lebih mirip mainan hiburan daripada alat yang produktif
Meski begitu, tetap ada hal yang bisa dipelajari dari percobaan seperti ini
Tapi jika ini alat pribadi, bisa jadi kesenangannya sendiri memang tujuannya
Waktu kecil saya juga ngoding BASIC hanya untuk senang-senang. Itu tidak produktif, tapi tetap sangat berharga