Claude Code के साथ vibe coding से बना bookshelf प्रोजेक्ट
(balajmarius.com)- लगभग 500 किताबों को अपने-आप वर्गीकृत और विज़ुअलाइज़ करने के लिए Claude Code का उपयोग करने वाला एक व्यक्तिगत प्रोजेक्ट
- जहाँ मौजूदा ISBN scanner या Goodreads Romanian editions को पहचान नहीं पाए, उस समस्या को OpenAI Vision API और Claude द्वारा लिखी गई scripts से हल किया गया
- 90% accuracy के साथ metadata extraction के बाद, बाकी को manually ठीक किया गया और Open Library·SerpAPI के जरिए cover images अपने-आप जुटाई गईं
- Framer Motion का उपयोग करके scroll-based animation और page count के आधार पर किताब की मोटाई दिखाने से असली bookshelf जैसा interaction बनाया गया
- यह AI और उपयोगकर्ता के सहयोग की ऐसी संरचना दिखाता है जहाँ AI execution संभालता है और उपयोगकर्ता सौंदर्यबोध व चयन को, और इस बात पर ज़ोर देता है कि ‘execution cost कम होती जा रही है, लेकिन taste अब भी इंसान का क्षेत्र है’
पूरा बना हुआ Bookshelf - https://balajmarius.com/bookshelf देखें
प्रोजेक्ट अवलोकन
- लगभग 500 किताबें होने के बावजूद उनकी सूची व्यवस्थित न होने की स्थिति में, AI tools की मदद से स्वचालित वर्गीकरण और visualization system बनाया गया
- साधारण spreadsheet के बजाय, Claude Code के माध्यम से execution steps को automate करके लंबे समय से टल रहा यह व्यक्तिगत प्रोजेक्ट पूरा किया गया
- इस प्रोजेक्ट का मुख्य बिंदु तकनीकी पूर्णता से ज़्यादा execution bottleneck को हटाना था
समस्या की पहचान
- ISBN scanner apps और Goodreads Romanian editions या दुर्लभ प्रकाशनों को पहचान नहीं पाए, जिससे data अधूरा रहा
- अधूरा data उल्टा और भ्रम पैदा करता रहा, इसलिए प्रोजेक्ट बार-बार रुकता गया
- ज़रूरत किसी perfect app की नहीं, बल्कि ऐसी system architecture की थी जो अपूर्णता को सह सके
डेटा संग्रह और प्रोसेसिंग
- किताबों के cover और spine की 470 तस्वीरों के आधार पर data तैयार किया गया
- Claude द्वारा लिखी गई script हर image को OpenAI Vision API पर भेजती है, author·title·publisher निकालती है, और परिणाम
JSONfiles में सहेजती है - लगभग 90% accuracy हासिल हुई, जबकि बाकी गलतियाँ lighting, damage और resolution की वजह से थीं
- बचे हुए 10% को manually ठीक किया गया, और बाद में नई किताबें जोड़ने पर वही pipeline अपने-आप चलती है
कवर इमेज सुधार
- Open Library API से covers लाए गए, लेकिन उनमें से लगभग आधे low quality या गलत images थे
- Claude ने quality scoring और error flag system जोड़ा, और failure की स्थिति में SerpAPI के जरिए Google image search से विकल्प लिया
- लगभग 460 किताबों में से सिर्फ 10 को manual correction से ठीक करना पड़ा, जिससे automation की दक्षता बनी रही
bookshelf UI का कार्यान्वयन
- साधारण cover grid के बजाय, असली bookshelf जैसी spine-केंद्रित visual presentation बनाई गई
- Claude ने color extraction (color quantization) और contrast text color calculation किया
- Open Library के page count data का उपयोग करके किताब की मोटाई दिखाई गई, और थोड़ा variation जोड़कर उसे अधिक वास्तविक बनाया गया
- नतीजतन, असली bookshelf जैसी visual texture हासिल हुई
animation और interaction
- Framer Motion के साथ scroll करने पर किताबों की spine झुकती हुई दिखे, इसके लिए scroll-based animation जोड़ा गया
- शुरुआत में React state updates की वजह से रुक-रुक कर चलने की समस्या थी, लेकिन इसे motion values और spring animation से ठीक किया गया
- सुधार के बाद movement स्मूथ हो गया, और experiment की लागत कम होने से बार-बार कोशिश करना संभव हुआ
अनावश्यक फीचर हटाना
- infinite scroll feature जोड़ा गया था, लेकिन container height mismatch और scroll errors की वजह से user experience खराब हुआ
- तकनीकी रूप से यह काम कर रहा था, लेकिन ज़रूरी न होने के कारण इसे हटा दिया गया
- “काम करने वाला लेकिन अनावश्यक code” हटाने का निर्णय इंसान की भूमिका है — इस बात पर ज़ोर दिया गया
मोबाइल सपोर्ट और stack view
- मोबाइल पर horizontal scrolling असुविधाजनक होने के कारण vertical stack view जोड़ा गया
- Claude ने मौजूदा code का विश्लेषण करके animation timing, color extraction, scroll opacity handling आदि को फिर से इस्तेमाल किया
- बिना अलग से समझाए एक पूरा नया component बना दिया गया, जिससे AI की code understanding और reconstruction क्षमता दिखी
इंसान की भूमिका और निष्कर्ष
- Claude ने सारा code लिखा, लेकिन उपयोगकर्ता ने निम्न निर्णय लिए
- 90% accuracy स्वीकार करना
- 10 covers को manually ठीक करना
- spine-केंद्रित design चुनना
- अनावश्यक features हटाना
- animation की संवेदनात्मक पूर्णता की पुष्टि करना
- अंतिम परिणाम 460 किताबों को अपने-आप वर्गीकृत और विज़ुअलाइज़ करने वाली web-based bookshelf है
- यह ऐसा सहयोग मॉडल दिखाता है जहाँ AI execution संभालता है और इंसान taste और judgment
- निष्कर्षतः “execution cost लगातार कम हो रही है, लेकिन taste अब भी इंसान का क्षेत्र है”
2 टिप्पणियां
दावा किया जा रहा है कि सिर्फ 10 चीज़ें ही हाथ से करनी पड़ीं, लेकिन यह बस आत्मसंतोष भर है। उन 10 चीज़ों को ढूंढने के लिए पूरी तरह से inspection करनी पड़ी। wag the dog
Hacker News की राय
अभी का vibe coding छोटे पैमाने के प्रोजेक्ट्स के लिए बिल्कुल सही है
प्रोजेक्ट बड़ा होते ही context management मुश्किल हो जाता है, और LLM बेवजह बहुत ज़्यादा code generate कर देता है या सूक्ष्म bugs बना देता है
ऐसे में फिर से brainstorming mode में लौटकर सिर्फ design में LLM की मदद लेना, और असली code खुद लिखना या skeleton बनाकर LLM से भरवाना बेहतर होता है
LLM अभी मौजूदा code में छोटे बदलाव करने या मौजूदा structure का उपयोग करने में कमज़ोर है। ज़्यादातर यह नई abstraction जोड़ने की कोशिश करता है
मैं module structure खुद design करता हूँ, और मुझे साफ़ पता होता है कि नतीजा क्या चाहिए। अगर सारे code को बारीकी से review किया जाए, और अच्छे prompts और context management (जैसे sample code देना,
agent.mdguide आदि) रखा जाए, तो इसे काफ़ी हद तक control किया जा सकता हैcodebase बड़ा होने पर modules के बीच tight coupling performance को गिराता है
इसका समाधान है यह सिद्धांत: “implementation नहीं, interface के मुताबिक programming करो”
हर module की boundary साफ़ रखो, और ज़रूरी हिस्से ही expose करने वाले interfaces को अलग files में रखो, ताकि Claude या teammates सिर्फ वही interfaces इस्तेमाल करें
इससे context कम होता है और Claude बेहतर काम करता है
प्रोजेक्ट और बड़ा हो तो interfaces भी बहुत बढ़ सकते हैं, इसलिए तब बड़े units में अलग करना या changes की scope घटाना जैसी management करनी पड़ती है
अब हालत यह है कि काफ़ी बड़े प्रोजेक्ट्स में भी इन्हें मिलाकर इस्तेमाल किया जा सकता है
“बेहतर app नहीं, बल्कि अपूर्णता को सहने वाला system चाहिए था” — यह पंक्ति असरदार लगी
Claude ने idea नहीं बनाया, बल्कि implementation संभाली, और मैंने taste संभाला — इस तरह की writing style अच्छी लगी
आजकल emails में भी “हमने पहिया फिर से नहीं बनाया। हम ही पहिया हैं” जैसी पंक्तियाँ अक्सर दिखती हैं
भारी-भरकम शब्दों से बचना और एक जैसे sentence structure दोहराना, यह इंसानी आदत जैसा लगा
AI आमतौर पर sentence patterns को random तरह से मिलाता है, लेकिन इसमें उल्टा एक consistent frame बना रहा
ऐसा लगा जैसे कोई अभी editing sense में बहुत तराशा हुआ नहीं है, लेकिन जानबूझकर अच्छा लिखने की कोशिश कर रहा है
जानना चाहूँगा कि क्या दूसरों को भी इसमें AI वाली गंध आई
हाँ, LinkedIn पर ऐसी writing इतनी ज़्यादा हो गई है कि कल आख़िरकार मैं फट पड़ा और इस पर post लिख दी
शायद sense of value और mood का कोई सूक्ष्म मिश्रण AI detection को प्रभावित करता है
अभी तक मैंने vibe coding से सफल हुआ कोई बड़ा प्रोजेक्ट नहीं देखा
ज़्यादातर चीज़ें वही छोटे programs हैं जो training data में पहले से मौजूद हैं
अगर यह सच में क्रांतिकारी है, तो कोई नया compression algorithm या travelling salesman problem का optimal solution बनाकर दिखाए
AI coding tools को उसी क्षेत्र पर ध्यान देना चाहिए जिसमें वे अच्छे हैं
मैं ऐसे tools से अक्सर छोटे business automation programs बनाता हूँ
इसकी वजह से अब मैं वे काम कर पा रहा हूँ जो पहले मुमकिन नहीं थे, और मेरी productivity 10 गुना बढ़ गई है
Perfect Software वाले लेख की तरह, किसी के लिए perfect app वही है जो उसकी पसंद और उद्देश्य के मुताबिक हो
LLM की वजह से अब ऐसा व्यक्तिगत जरूरतों के हिसाब से बना perfect software आसानी से बनाया जा सकता है
competition 1, competition 2
मेरे score ने दूसरे participants को improvement के लिए प्रेरित किया
अगर AI ऐसे उबाऊ काम हटा दे, तो इंसान creative कामों पर ध्यान दे सकते हैं
छोटे problems हल करने वाला यह vibe coding समय का कहीं ज़्यादा क़ीमती उपयोग है
मैंने भी कुछ दिन पहले इसी idea पर Claude से bookshelf app बनाया था
nindalf.com/books
इसकी वजह से मेरी reading बढ़ी, और highlights व notes देखना आसान हो गया
Claude के UI suggestions मेरे खुद के बनाए हुए से काफ़ी बेहतर थे, और backend भी लगभग वैसा ही था
हाँ, कभी-कभी यह अजीब validation logic पर अड़ जाता था, लेकिन जब मैंने खुद ठीक किया तो इसने मान लिया, “आप सही हैं!” ऐसा कम ही हुआ
मैंने भी ऐसा ही bookshelf app बनाया है, लेकिन audiobook notes manage करने का अभी तक अच्छा तरीका नहीं मिला
तुम्हारा version भी दिलचस्प है
मैंने भी कुछ ऐसा try किया था, लेकिन मेरे मामले में यह Claude की failure case थी
मैं andrewblinn.com पर bookshelf image को clickable बनाना चाहता था
लेकिन Claude बार-बार Goodreads links गलत बनाता रहा और invalid IDs जोड़ता रहा
spine recognition भी सटीक नहीं थी, इसलिए आखिरकार Figma में manual काम करना पड़ा
Claude ने जो automation सुझाई वह बहुत धीमी और महंगी थी
मैं भी हर साल पढ़ी गई किताबों के लिए HTML में एक static bookshelf page बनाता रहा हूँ
पहले Delicious Library को recreate करने पर एक पोस्ट भी लिखी थी
इसकी सच में ज़रूरत नहीं थी, लेकिन किताबें सजाना मज़ेदार था
“460 किताबें scale की समस्या नहीं हैं। काम कर रहे code को कब हटाना है, यह AI तय नहीं कर सकता” — इस बात से सहमति है
मैंने भी 900 ratings और 550 books data वाला app बनाया है, और तय किया है कि infinite scroll या complex search तब तक नहीं डालूँगा जब तक browser संभाल पा रहा है
अभी के लिए “find in page” ही काफ़ी है
“90% accuracy काफ़ी है” — यह बात अच्छी लगी
भले ही LLM नई errors पैदा करे, दुनिया में वैसे भी error-tolerant systems बहुत हैं
यह नज़रिया AI-विरोधी सोच रखने वालों के लिए भी मददगार हो सकता है
मैंने भी moviesonthe.computer पर movie watching log app vibe coding से बनाया
“मेरी अपनी Letterboxd clone” जैसी साफ़ idea से शुरू करने पर चीज़ें जल्दी आगे बढ़ीं
ऐसी personalized app बनाने की क्षमता बहुत बड़ी ताकत है
लेकिन मौजूदा tools अभी non-developers को सोचने का तरीका खुद सिखाने में कमज़ोर हैं
जैसे तुमने कहा, programming background वाले लोग ऐसे projects को ज़्यादा आसानी से prompt कर सकते हैं
सच कहूँ तो इस व्यक्ति ने जो बनाया उसकी usability बहुत खराब है
शायद उसे खुद उपलब्धि का एहसास हुआ हो, लेकिन असल में यह productivity से ज़्यादा entertainment toy जैसा है
फिर भी ऐसी कोशिशों से सीखने लायक बातें हैं
लेकिन अगर tool निजी इस्तेमाल का हो, तो मज़ा ही उसका उद्देश्य हो सकता है
मैं भी बचपन में BASIC में मज़े के लिए coding करता था। वह productive नहीं था, फिर भी पूरी तरह क़ीमती था