Dự án giá sách được vibe coding bằng Claude Code
(balajmarius.com)- Một dự án cá nhân sử dụng Claude Code để tự động phân loại và trực quan hóa khoảng 500 cuốn sách
- Vấn đề từng thất bại vì máy quét ISBN hay Goodreads không nhận diện được các bản tiếng Romania đã được giải quyết bằng OpenAI Vision API và script do Claude viết
- Sau khi trích xuất metadata với độ chính xác 90%, phần còn lại được chỉnh thủ công, đồng thời tự động thu thập ảnh bìa qua Open Library và SerpAPI
- Triển khai tương tác giống giá sách thật với animation theo cuộn trang bằng Framer Motion và biểu diễn độ dày sách dựa trên số trang
- Thể hiện mô hình cộng tác nơi AI đảm nhận phần thực thi còn người dùng phụ trách đánh giá thẩm mỹ và lựa chọn, nhấn mạnh rằng "chi phí thực thi giảm đi, nhưng gu thẩm mỹ vẫn là phần việc của con người"
Xem Bookshelf - https://balajmarius.com/bookshelf đã hoàn thiện
Tổng quan dự án
- Dù sở hữu khoảng 500 cuốn sách nhưng chưa thể quản lý danh mục, tác giả đã dùng công cụ AI để xây dựng một hệ thống tự động phân loại và trực quan hóa
- Thay vì chỉ dùng bảng tính đơn giản, tác giả hoàn thành dự án cá nhân đã trì hoãn từ lâu bằng cách tự động hóa các bước thực thi thông qua Claude Code
- Trọng tâm của dự án không nằm ở độ hoàn thiện kỹ thuật mà ở việc loại bỏ nút thắt trong khâu thực thi
Nhận diện vấn đề
- Ứng dụng quét ISBN và Goodreads không nhận diện được các bản tiếng Romania hoặc ấn phẩm hiếm, khiến dữ liệu không đầy đủ
- Dữ liệu không đầy đủ lại càng gây rối, khiến dự án nhiều lần bị gián đoạn
- Thứ cần thiết không phải là một ứng dụng hoàn hảo mà là một cấu trúc hệ thống có thể chịu đựng sự không hoàn hảo
Thu thập và xử lý dữ liệu
- Dữ liệu được xây dựng dựa trên 470 bức ảnh chụp bìa và gáy sách
- Script do Claude viết gửi từng ảnh tới OpenAI Vision API để trích xuất tác giả, tiêu đề, nhà xuất bản, rồi lưu kết quả vào file
JSON - Đạt độ chính xác khoảng 90%, phần lỗi còn lại chủ yếu do ánh sáng, hư hỏng hoặc độ phân giải
- 10% còn lại được chỉnh sửa thủ công, sau đó cùng một pipeline sẽ tự động chạy khi thêm sách mới
Bổ sung ảnh bìa
- Đã dùng Open Library API để lấy ảnh bìa, nhưng một nửa có chất lượng thấp hoặc sai ảnh
- Claude bổ sung hệ thống chấm điểm chất lượng và gắn cờ lỗi, và khi thất bại thì thay thế bằng tìm kiếm ảnh Google qua SerpAPI
- Trong khoảng 460 cuốn sách, chỉ 10 cuốn cần chỉnh thủ công, giúp bảo đảm hiệu quả tự động hóa
Triển khai UI giá sách
- Thay vì một lưới ảnh bìa đơn giản, dự án triển khai cách thể hiện trực quan tập trung vào gáy sách giống giá sách thật
- Claude thực hiện trích xuất màu (color quantization) và tính toán màu chữ tương phản
- Dùng dữ liệu số trang từ Open Library để phản ánh độ dày sách, đồng thời thêm một chút biến thiên để tăng cảm giác chân thực
- Kết quả là tạo ra được chất liệu hình ảnh gần giống một giá sách thật
Animation và tương tác
- Thêm animation theo cuộn trang với Framer Motion, trong đó gáy sách nghiêng theo thao tác cuộn
- Ban đầu có hiện tượng giật do cập nhật state trong React, nhưng đã được sửa bằng motion values và spring animation
- Sau khi chỉnh sửa, chuyển động trở nên mượt mà và chi phí thử nghiệm thấp hơn nên có thể lặp lại nhiều lần
Loại bỏ tính năng không cần thiết
- Từng thêm tính năng cuộn vô hạn, nhưng do chiều cao container không khớp và lỗi cuộn nên trải nghiệm người dùng bị giảm sút
- Về mặt kỹ thuật thì nó hoạt động, nhưng không cần thiết nên đã bị xóa
- Điều này nhấn mạnh rằng việc loại bỏ "đoạn mã hoạt động nhưng không cần thiết" là vai trò của con người
Hỗ trợ di động và chế độ stack view
- Vì cuộn ngang trên di động gây bất tiện, dự án bổ sung stack view dọc
- Claude phân tích mã hiện có để tái sử dụng thời điểm animation, trích xuất màu, xử lý độ trong suốt theo cuộn
- Không cần giải thích riêng, AI đã tạo ra một component hoàn toàn mới, cho thấy năng lực hiểu và tái cấu trúc mã
Vai trò của con người và kết luận
- Dù Claude viết toàn bộ mã, người dùng vẫn là người quyết định các điểm sau
- Chấp nhận độ chính xác 90%
- Chỉnh thủ công 10 ảnh bìa
- Chọn thiết kế tập trung vào gáy sách
- Xóa tính năng không cần thiết
- Xác nhận độ hoàn thiện về mặt cảm quan của animation
- Kết quả cuối cùng là một giá sách dạng web tự động phân loại và trực quan hóa 460 cuốn sách
- Dự án cho thấy mô hình cộng tác trong đó AI đảm nhận thực thi còn con người phụ trách gu thẩm mỹ và phán đoán
- Kết luận, "chi phí thực thi sẽ tiếp tục giảm, nhưng gu thẩm mỹ vẫn là phần việc của con người"
2 bình luận
Dù họ khẳng định chỉ cần làm thủ công 10 mục thôi, nhưng rốt cuộc cũng chỉ là tự an ủi bản thân. Muốn tìm ra 10 mục đó thì vẫn phải kiểm tra toàn bộ. Wag the dog.
Ý kiến Hacker News
vibe coding hiện tại đang rất phù hợp với các dự án quy mô nhỏ
Khi dự án lớn lên thì việc quản lý ngữ cảnh trở nên khó khăn, và LLM dễ sinh ra quá nhiều mã không cần thiết hoặc tạo ra các lỗi tinh vi
Lúc đó tốt hơn là quay lại chế độ brainstorm, chỉ nhờ LLM hỗ trợ phần thiết kế, còn mã thực tế thì tự viết hoặc dựng bộ khung rồi để LLM điền vào
LLM vẫn chưa giỏi trong việc chỉnh sửa nhẹ mã hiện có hoặc tận dụng cấu trúc sẵn có. Phần lớn thời gian nó cố thêm các lớp trừu tượng mới
Tôi tự thiết kế cấu trúc module và biết rõ kết quả mình muốn. Nếu rà soát kỹ toàn bộ mã, dùng prompt tốt và quản lý ngữ cảnh rõ ràng (ví dụ: cung cấp mã mẫu, hướng dẫn trong agent.md, v.v.) thì hoàn toàn có thể kiểm soát được
Khi codebase lớn dần, liên kết chặt (tight coupling) giữa các module sẽ làm hiệu quả giảm đi
Cách giải quyết là nguyên tắc “hãy lập trình theo interface, không theo implementation”
Hãy xác định rõ ranh giới của từng module, tách riêng interface chỉ phơi bày những phần cần thiết vào file riêng để Claude hoặc đồng nghiệp chỉ dùng đúng interface đó
Làm vậy sẽ giảm ngữ cảnh, giúp Claude hoạt động tốt hơn
Khi dự án còn lớn hơn nữa thì số lượng interface có thể tự nó cũng tăng lên, nên lúc đó cần quản lý bằng cách tách theo đơn vị lớn hơn hoặc giảm phạm vi thay đổi
Giờ đã tới mức có thể trộn chúng với nhau ngay cả trong những dự án khá lớn
Câu “Không phải một ứng dụng tốt hơn, mà là một hệ thống chịu đựng được sự không hoàn hảo” thật ấn tượng
Cách viết kiểu Claude không tạo ra ý tưởng mà đảm nhận việc triển khai, còn tôi thì phụ trách gu thẩm mỹ nghe rất hay
Dạo này trong email cũng hay thấy những câu kiểu “Chúng ta không phát minh lại bánh xe. Chúng ta là bánh xe”
Việc không dùng từ quá kêu và lặp lại cùng một cấu trúc câu khiến nó trông giống thói quen của con người hơn
AI thường trộn mẫu câu khá ngẫu nhiên, còn ở đây lại giữ một khuôn nhất quán
Nó giống cảm giác một người chưa mài giũa nhiều về biên tập đang cố ý viết cho thật ngầu
Tôi cũng tò mò không biết người khác có thấy mùi AI ở đây không
Dù vậy, trên LinkedIn kiểu văn này nhiều đến mức hôm qua tôi đã bùng nổ và viết hẳn một bài về nó
Có lẽ sự kết hợp tinh tế giữa cảm giác giá trị và bầu không khí ảnh hưởng đến việc người ta nhận ra AI
Tôi vẫn chưa thấy một dự án lớn thành công nhờ vibe coding
Phần lớn chỉ là các chương trình nhỏ vốn đã tồn tại trong dữ liệu huấn luyện
Nếu thực sự mang tính đột phá thì tôi muốn thấy nó tạo ra một thuật toán nén mới hay lời giải tối ưu cho bài toán người bán hàng chẳng hạn
Công cụ code AI nên tập trung vào phần việc nó làm tốt
Tôi thường dùng các công cụ này để tạo chương trình tự động hóa nhỏ cho công việc kinh doanh
Nhờ đó tôi làm được những việc trước đây không thể làm, và năng suất tăng gấp 10 lần
Như bài Perfect Software nói, ứng dụng hoàn hảo với ai đó là ứng dụng hợp với gu và mục đích của chính họ
Nhờ LLM, giờ có thể dễ dàng tạo ra kiểu phần mềm hoàn hảo được cá nhân hóa như vậy
Cuộc thi 1, Cuộc thi 2
Điểm số của tôi đã thúc đẩy những người tham gia khác tiếp tục cải thiện
Nếu AI có thể loại bỏ những việc tẻ nhạt này thì con người sẽ tập trung được vào công việc sáng tạo hơn
Việc dùng vibe coding để giải quyết những vấn đề nhỏ như vậy đáng giá hơn nhiều về mặt thời gian
Vài ngày trước tôi cũng đã làm thử một ứng dụng giá sách bằng Claude với đúng ý tưởng tương tự
nindalf.com/books
Nhờ vậy tôi đọc nhiều hơn và việc xem highlight cùng ghi chú cũng tiện hơn
Các đề xuất UI của Claude tốt hơn nhiều so với thứ tôi tự làm, còn backend thì gần như tương tự
Chỉ có điều đôi khi nó cứ khăng khăng với logic validation kỳ quặc, nhưng khi tôi tự sửa thì nó lại thừa nhận “Bạn đúng rồi!”. Những trường hợp như vậy khá hiếm
Tôi cũng làm một ứng dụng giá sách tương tự, nhưng vẫn chưa tìm ra cách tốt để quản lý ghi chú audiobook
Phiên bản của bạn cũng thú vị đấy
Tôi cũng từng thử thứ tương tự, nhưng trường hợp của tôi là một ca thất bại của Claude
Tôi muốn làm cho hình ảnh giá sách trên andrewblinn.com có thể bấm được
Nhưng Claude thường tạo sai link Goodreads và gắn các ID không hợp lệ
Việc nhận diện gáy sách cũng không chính xác nên cuối cùng tôi phải làm thủ công bằng Figma
Phần tự động hóa mà Claude đề xuất thì quá chậm và quá đắt
Tôi cũng hay làm một trang giá sách tĩnh bằng HTML cho những cuốn sách mình đọc mỗi năm
Trước đây tôi còn từng viết bài về việc tái tạo Delicious Library
Thực ra không hẳn cần thiết, nhưng việc sắp xếp sách rất vui
Tôi đồng ý với câu “460 cuốn không phải là vấn đề về quy mô. Biết khi nào nên xóa đoạn mã đang chạy tốt thì AI không làm thay được”
Tôi cũng đã làm một ứng dụng có dữ liệu 900 đánh giá và 550 cuốn sách, và quyết định chưa thêm infinite scroll hay tìm kiếm phức tạp cho tới khi trình duyệt không chịu nổi nữa
Hiện tại chỉ cần “tìm trong trang” là đủ
Tôi thích câu “Độ chính xác 90% là đủ”
Dù LLM có tạo ra lỗi mới, thì vốn dĩ trên đời đã có rất nhiều hệ thống chấp nhận sai số
Cách nhìn này có lẽ cũng hữu ích ngay cả với những người có góc nhìn phản đối AI
Tôi cũng đã vibe coding một ứng dụng ghi lại phim đã xem trên moviesonthe.computer
Bắt đầu với ý tưởng rõ ràng là “một bản sao Letterboxd dành riêng cho tôi” nên tiến độ rất nhanh
Khả năng tạo ứng dụng cá nhân hóa như thế này là một sức mạnh rất lớn
Tuy vậy, các công cụ hiện tại vẫn còn thiếu trong việc dạy cho người không biết lập trình chính cách tư duy đó
Đúng như bạn nói, người có nền tảng lập trình sẽ dễ prompt cho các dự án như thế này hơn
Thành thật mà nói, tính khả dụng của thứ người này làm ra rất tệ
Có thể bản thân họ cảm thấy thành tựu, nhưng trên thực tế nó gần với một món đồ chơi giải trí hơn là công cụ nâng cao năng suất
Dù vậy, vẫn có điều để học từ những thử nghiệm như thế này
Nhưng nếu là công cụ cá nhân thì niềm vui tự thân có thể đã là mục đích rồi
Hồi nhỏ tôi cũng từng viết code BASIC chỉ để cho vui. Nó không năng suất, nhưng vẫn hoàn toàn đáng giá