โปรเจกต์ชั้นหนังสือที่ทำแบบ vibe coding ด้วย Claude Code
(balajmarius.com)- กรณีศึกษาโปรเจกต์ส่วนตัวที่ใช้ Claude Code เพื่อ จัดหมวดหมู่และแสดงผลหนังสืออัตโนมัติราว 500 เล่ม
- แก้ปัญหาที่ ISBN scanner หรือ Goodreads ไม่สามารถรู้จำฉบับพิมพ์ภาษาโรมาเนียได้ ด้วยสคริปต์ของ Claude และ OpenAI Vision API
- หลังดึงเมทาดาทาได้ด้วยความแม่นยำ 90% ส่วนที่เหลือแก้ไขด้วยมือ และเก็บภาพปกอัตโนมัติผ่าน Open Library และ SerpAPI
- สร้างอินเทอร์แอกชันคล้ายชั้นหนังสือจริงด้วยแอนิเมชันตามการเลื่อนโดยใช้ Framer Motion และ การแสดงความหนาของหนังสือตามจำนวนหน้า
- แสดงโครงสร้างการทำงานร่วมกันที่ AI รับหน้าที่ลงมือทำ และผู้ใช้รับหน้าที่ ตัดสินใจด้านสุนทรียะและการเลือก พร้อมย้ำว่า ‘ต้นทุนในการลงมือทำลดลง แต่รสนิยมยังคงเป็นหน้าที่ของมนุษย์’
ลองดู Bookshelf - https://balajmarius.com/bookshelf ที่ทำเสร็จแล้ว
ภาพรวมโปรเจกต์
- มีหนังสืออยู่ราว 500 เล่มแต่ยังไม่ได้จัดการรายการ จึงใช้เครื่องมือ AI สร้าง ระบบจัดหมวดหมู่และแสดงผลอัตโนมัติ
- แทนที่จะใช้สเปรดชีตแบบธรรมดา ได้ใช้ Claude Code ทำให้ขั้นตอนการลงมือทำเป็นอัตโนมัติ จนโปรเจกต์ส่วนตัวที่ค้างมานานเสร็จสมบูรณ์
- แกนสำคัญของโปรเจกต์นี้ไม่ใช่ความสมบูรณ์ทางเทคนิค แต่คือการ ขจัดคอขวดของการลงมือทำ
การมองเห็นปัญหา
- แอปสแกน ISBN และ Goodreads ไม่สามารถรู้จำฉบับพิมพ์ภาษาโรมาเนียหรือสิ่งพิมพ์หายากได้ ทำให้ข้อมูลไม่ครบถ้วน
- ข้อมูลที่ไม่ครบกลับสร้างความสับสนมากขึ้น จนโปรเจกต์หยุดชะงักซ้ำแล้วซ้ำเล่า
- สิ่งที่ต้องการไม่ใช่แอปที่สมบูรณ์แบบ แต่คือ โครงสร้างระบบที่ทนต่อความไม่สมบูรณ์ได้
การเก็บและประมวลผลข้อมูล
- สร้างข้อมูลจาก ภาพถ่าย 470 ภาพของปกและสันหนังสือ
- สคริปต์ที่ Claude เขียนจะส่งแต่ละภาพไปยัง OpenAI Vision API เพื่อดึง ผู้เขียน·ชื่อเรื่อง·สำนักพิมพ์ แล้วบันทึกผลเป็นไฟล์
JSON - ทำได้แม่นยำประมาณ 90% โดยข้อผิดพลาดที่เหลือเกิดจากปัญหาแสง ความเสียหาย และความละเอียด
- อีก 10% ที่เหลือแก้ไขด้วยมือ และเมื่อเพิ่มหนังสือใหม่ก็สามารถรัน pipeline เดิมแบบอัตโนมัติได้
การเติมภาพปกให้สมบูรณ์
- ดึงภาพปกจาก Open Library API ได้ แต่ครึ่งหนึ่งมีคุณภาพต่ำหรือเป็นภาพผิดเล่ม
- Claude เพิ่ม ระบบให้คะแนนคุณภาพและการปักธงข้อผิดพลาด และเมื่อไม่สำเร็จก็ใช้ SerpAPI แทนด้วยการค้นหารูปภาพบน Google
- จากหนังสือราว 460 เล่ม มีเพียง 10 เล่มที่ต้องแก้ไขด้วยมือ จึงได้ประสิทธิภาพของการทำอัตโนมัติ
การทำ UI ชั้นหนังสือ
- แทนที่จะทำเป็น กริดปกหนังสือ แบบทั่วไป ได้สร้าง การแสดงผลที่เน้นสันหนังสือ ให้คล้ายชั้นหนังสือจริง
- Claude จัดการ การสกัดสี (color quantization) และ การคำนวณสีตัวอักษรให้ตัดกัน
- ใช้ ข้อมูลจำนวนหน้าจาก Open Library เพื่อสะท้อนความหนาของหนังสือ และเพิ่มค่าความแปรผันเล็กน้อยเพื่อให้ดูสมจริง
- ผลลัพธ์คือได้พื้นผิวทางภาพที่คล้ายชั้นหนังสือจริง
แอนิเมชันและอินเทอร์แอกชัน
- เพิ่ม แอนิเมชันตามการเลื่อน ที่ทำให้สันหนังสือเอียงขณะเลื่อนด้วย Framer Motion
- ตอนแรกมีอาการกระตุกจากการอัปเดตสถานะของ React แต่แก้ด้วย motion values และ spring animation
- หลังปรับแล้วการเคลื่อนไหวลื่นไหลขึ้น และเพราะต้นทุนในการทดลองต่ำลงจึงลองซ้ำได้หลายครั้ง
การตัดฟีเจอร์ที่ไม่จำเป็นออก
- เคยเพิ่ม ฟังก์ชัน infinite scroll แต่ความสูงของคอนเทนเนอร์ไม่สอดคล้องกันและเกิดปัญหาการเลื่อน ทำให้ประสบการณ์ใช้งานแย่ลง
- แม้จะทำงานได้ทางเทคนิค แต่เพราะไม่จำเป็นจึงลบออก
- ตอกย้ำว่า การตัดสินใจลบ “โค้ดที่ทำงานได้แต่ไม่จำเป็น” เป็นบทบาทของมนุษย์
การรองรับมือถือและ stack view
- บนมือถือ การเลื่อนแนวนอนไม่สะดวก จึงเพิ่ม stack view แนวตั้ง
- Claude วิเคราะห์โค้ดเดิมแล้วนำ จังหวะแอนิเมชัน การสกัดสี และการจัดการความโปร่งใสระหว่างการเลื่อน กลับมาใช้ใหม่
- สร้างคอมโพเนนต์ใหม่ที่สมบูรณ์ได้โดยไม่ต้องมีคำอธิบายเพิ่มเติม แสดงให้เห็น ความสามารถของ AI ในการเข้าใจและจัดโครงสร้างโค้ดใหม่
บทบาทของมนุษย์และข้อสรุป
- แม้ Claude จะเขียนโค้ดทั้งหมด แต่ผู้ใช้เป็นผู้ตัดสินใจเรื่องต่อไปนี้
- ยอมรับความแม่นยำ 90%
- แก้ไขภาพปก 10 รายการด้วยมือ
- เลือกดีไซน์ที่เน้นสันหนังสือ
- ลบฟีเจอร์ที่ไม่จำเป็น
- ตรวจสอบความลงตัวเชิงความรู้สึกของแอนิเมชัน
- ผลลัพธ์สุดท้ายคือ ชั้นหนังสือบนเว็บที่จัดหมวดหมู่และแสดงผลหนังสือ 460 เล่มแบบอัตโนมัติ
- แสดงโมเดลการทำงานร่วมกันที่ AI รับหน้าที่ลงมือทำ และมนุษย์รับหน้าที่ รสนิยมและการตัดสินใจ
- สรุปได้ว่า “ต้นทุนในการลงมือทำยังคงลดลงเรื่อย ๆ แต่รสนิยมยังคงเป็นหน้าที่ของมนุษย์”
2 ความคิดเห็น
อ้างว่าต้องทำมือแค่ 10 จุด แต่ก็เป็นแค่การปลอบใจตัวเองเท่านั้น จะหา 10 จุดนั้นเจอก็ต้องตรวจทั้งหมดอยู่ดี Wag the dog
ความคิดเห็นจาก Hacker News
ตอนนี้ vibe coding เหมาะมากกับโปรเจ็กต์ขนาดเล็ก
พอโปรเจ็กต์ใหญ่ขึ้น การจัดการ บริบท จะยากขึ้น และ LLM ก็มีแนวโน้มจะสร้างโค้ดที่ไม่จำเป็นมากเกินไปหรือทำบั๊กแบบละเอียดอ่อนขึ้นมาได้ง่าย
ในกรณีนั้น ควรกลับไปที่โหมดระดมความคิด ให้ LLM ช่วยแค่ออกแบบ แล้วเขียนโค้ดจริงเอง หรือวางโครงไว้ก่อนแล้วให้ LLM เติมรายละเอียดจะดีกว่า
ตอนนี้ LLM ยังไม่เก่งนักในการแก้โค้ดเดิมเพียงเล็กน้อยหรือใช้โครงสร้างที่มีอยู่ มักจะพยายามเพิ่ม abstraction ใหม่เข้าไปมากกว่า
ฉันออกแบบโครงสร้างโมดูลเอง และรู้ชัดว่าผลลัพธ์ที่ต้องการคืออะไร ถ้าตรวจโค้ดทั้งหมดอย่างละเอียด และมี พรอมป์ต์ที่ดีและการจัดการบริบท ที่ดีพอ (เช่น ให้ตัวอย่างโค้ด, ไกด์
agent.mdฯลฯ) ก็ยังควบคุมได้มากพอพอ codebase ใหญ่ขึ้น tight coupling ระหว่างโมดูลจะทำให้ประสิทธิภาพลดลง
วิธีแก้คือยึดหลัก “เขียนโปรแกรมตาม interface ไม่ใช่ implementation”
กำหนดขอบเขตของแต่ละโมดูลให้ชัด และแยก interface ที่เปิดเผยเฉพาะส่วนที่จำเป็นไว้คนละไฟล์ เพื่อให้ Claude หรือเพื่อนร่วมงานใช้แค่ interface นั้นก็พอ
แบบนี้จะลดบริบทลงและทำให้ Claude ทำงานได้ดีขึ้น
ถ้าโปรเจ็กต์ใหญ่ขึ้นอีกจน interface เองมีจำนวนมาก ก็ต้องจัดการโดยแยกเป็นหน่วยที่ใหญ่ขึ้น หรือจำกัดขอบเขตของการเปลี่ยนแปลง
ตอนนี้ไปถึงจุดที่เอาสิ่งเหล่านี้มาผสมใช้กับโปรเจ็กต์ค่อนข้างใหญ่ได้แล้ว
ประโยคที่ว่า “สิ่งที่ต้องการไม่ใช่แอปที่ดีกว่า แต่เป็นระบบที่ทนรับความไม่สมบูรณ์ได้” น่าประทับใจมาก
Claude ไม่ได้เป็นคนคิดไอเดีย แต่ รับหน้าที่ลงมือทำ ส่วนฉัน รับหน้าที่เรื่องรสนิยม สไตล์การเขียนแบบนี้ดูดีมาก
ทุกวันนี้ในอีเมลก็เห็นประโยคทำนอง “เราไม่ได้ประดิษฐ์ล้อขึ้นมาใหม่ เราคือล้อ” บ่อยมาก
มันไม่ได้ใช้คำเวอร์วัง และยังวนใช้โครงสร้างประโยคเดิม ๆ ซึ่งดูเป็นนิสัยของมนุษย์
ปกติ AI มักสลับแพตเทิร์นประโยคไปมาแบบสุ่ม แต่นี่กลับรักษากรอบที่สม่ำเสมอไว้
ให้ความรู้สึกเหมือนคนที่เซนส์ด้านการตัดต่อยังไม่ค่อยขัดเกลา แต่ตั้งใจเขียนให้ดูเท่
อยากรู้เหมือนกันว่าคนอื่นรู้สึกว่านี่มีกลิ่น AI หรือเปล่า
แค่บน LinkedIn มีสำนวนแบบนี้เยอะเกินไป จนเมื่อวานฉันทนไม่ไหวแล้วต้องโพสต์ระบาย
น่าจะเป็นเพราะ การผสมกันอย่างละเอียดอ่อนของคุณค่าและบรรยากาศ ที่ส่งผลต่อการตรวจจับว่าเป็น AI หรือไม่
ยังไม่เคยเห็น โปรเจ็กต์ใหญ่ที่ vibe coding แล้วประสบความสำเร็จ เลย
ส่วนใหญ่เป็นโปรแกรมเล็ก ๆ ที่มีอยู่แล้วในข้อมูลฝึก
ถ้ามันปฏิวัติจริง ก็อยากเห็นมันสร้างอัลกอริทึมบีบอัดแบบใหม่หรือ วิธีแก้ปัญหา salesman ที่ดีที่สุด อะไรทำนองนั้น
เครื่องมือเขียนโค้ด AI ก็ควรโฟกัสกับสิ่งที่มันทำได้ดี
ฉันใช้เครื่องมือพวกนี้ทำ โปรแกรมอัตโนมัติขนาดเล็กสำหรับธุรกิจ อยู่บ่อย ๆ
มันทำให้ฉันทำสิ่งที่เมื่อก่อนเป็นไปไม่ได้ และเพิ่มผลิตภาพได้ถึง 10 เท่า
อย่างในบทความ Perfect Software แอปที่สมบูรณ์แบบสำหรับใครสักคนก็คือแอปที่ตรงกับรสนิยมและจุดประสงค์ของคนนั้น
ด้วย LLM ตอนนี้เราสร้าง ซอฟต์แวร์ที่สมบูรณ์แบบแบบเฉพาะบุคคล ได้ง่ายขึ้นมาก
การแข่งขัน 1, การแข่งขัน 2
คะแนนของฉันช่วยกระตุ้นให้ผู้เข้าร่วมคนอื่นปรับปรุงงานของตัวเอง
ถ้า AI ช่วย กำจัดงานน่าเบื่อพวกนี้ ได้ มนุษย์ก็จะไปโฟกัสกับงานสร้างสรรค์มากขึ้น
การใช้ vibe coding แก้ปัญหาเล็ก ๆ แบบนี้เป็นการใช้เวลาที่มีค่ากว่ามาก
เมื่อไม่กี่วันก่อนฉันก็ลองทำ แอปชั้นหนังสือด้วย Claude จากไอเดียคล้ายกัน
nindalf.com/books
มันช่วยให้ฉันอ่านหนังสือมากขึ้น และดูไฮไลต์กับโน้ตได้สะดวกขึ้น
ข้อเสนอด้าน UI ของ Claude ดีกว่าที่ฉันทำเองมาก และฝั่งแบ็กเอนด์ก็แทบไม่ต่างกัน
แต่บางครั้งมันก็ดื้อกับ logic การตรวจสอบแปลก ๆ ซึ่งพอฉันแก้เอง มันก็ยอมรับว่า “คุณพูดถูก!” กรณีแบบนี้เจอไม่บ่อย
ฉันก็ทำแอปชั้นหนังสือคล้าย ๆ กัน แต่ยังหาวิธีดี ๆ ในการจัดการ โน้ตจากหนังสือเสียง ไม่ได้เลย
เวอร์ชันของคุณก็น่าสนใจดี
ฉันก็เคยลองแบบคล้าย ๆ กัน แต่ของฉันเป็น กรณีที่ Claude ล้มเหลว
ฉันอยากทำให้คลิกภาพชั้นหนังสือได้บน andrewblinn.com
แต่ Claude มักจะสร้าง ลิงก์ Goodreads ผิด และใส่ ID ที่ใช้ไม่ได้
การรู้จำสันปกหนังสือก็ไม่แม่น สุดท้ายเลยต้อง ทำด้วยมือใน Figma
ระบบอัตโนมัติที่ Claude เสนอมาก็ช้าและแพงเกินไป
ฉันเองก็ทำ หน้าชั้นหนังสือแบบสแตติก เป็น HTML ของหนังสือที่อ่านในแต่ละปีอยู่เรื่อย ๆ
ก่อนหน้านี้ยังเคยเขียนเรื่องการทำซ้ำ Delicious Library ด้วย
ถึงจะไม่ได้จำเป็น แต่การจัดหนังสือให้เป็นระเบียบมันสนุกมาก
เห็นด้วยกับคำพูดที่ว่า “460 เล่มไม่ใช่ปัญหาเรื่องสเกล สิ่งที่ AI ทำแทนไม่ได้คือการรู้ว่าเมื่อไรควรลบโค้ดที่ยังใช้งานได้”
ฉันเองก็ทำแอปที่มีข้อมูลคะแนน 900 รายการกับหนังสือ 550 เล่ม และตัดสินใจว่า จะไม่ใส่ infinite scroll หรือระบบค้นหาซับซ้อน จนกว่าบราวเซอร์จะเริ่มไม่ไหว
ตอนนี้แค่ “ค้นหาในหน้า” ก็พอแล้ว
ฉันชอบประโยคที่ว่า “ความแม่นยำ 90% ก็เพียงพอแล้ว”
ถึง LLM จะสร้างข้อผิดพลาดใหม่ขึ้นมา แต่เดิมทีโลกก็มี ระบบที่ยอมรับความผิดพลาดได้ อยู่มากมาย
มุมมองแบบนี้น่าจะช่วยคนที่มีทัศนะแอนตี้ AI ได้เหมือนกัน
ฉันก็ทำ แอปบันทึกการดูหนัง ด้วย vibe coding ที่ moviesonthe.computer
พอเริ่มจากไอเดียชัด ๆ ว่า “โคลน Letterboxd ในแบบของฉันเอง” มันก็ไปได้เร็วมาก
ความสามารถในการสร้างแอปเฉพาะตัว แบบนี้ทรงพลังมาก
แต่เครื่องมือปัจจุบันยังไม่ค่อยเก่งในการ สอนวิธีคิด ให้คนที่ไม่ใช่นักพัฒนา
อย่างที่คุณว่า คนที่ มีพื้นฐานการเขียนโปรแกรม จะพรอมป์ต์โปรเจ็กต์แบบนี้ได้ง่ายกว่า
พูดตรง ๆ เลยว่าผลงานที่คนนี้ทำออกมา ใช้งานได้แย่มาก
เจ้าตัวอาจรู้สึกภูมิใจ แต่ในความเป็นจริงมันใกล้กับ ของเล่นเพื่อความบันเทิง มากกว่าสิ่งที่ช่วยเพิ่มผลิตภาพ
ถึงอย่างนั้นก็ยังมีสิ่งที่เรียนรู้ได้จากความพยายามแบบนี้
แต่ถ้าเป็นเครื่องมือใช้ส่วนตัว ความสนุกเองอาจเป็นเป้าหมาย ก็ได้
ตอนเด็ก ๆ ฉันก็เคยเขียน BASIC เอาสนุก มันอาจไม่ได้สร้างผลิตภาพ แต่ก็มีคุณค่ามากพอ