Tạo trọn bộ game 3D 'Raccoon Heist' chỉ với một câu lệnh trên Claude Fable 5

Ngày 5 tháng 8 năm 2026

Quay lại năm 2024, tôi đã đăng trên Twitter ảnh chụp màn hình một ý tưởng trò chơi do GPT-3 tạo ra cùng một vài "tác phẩm nghệ thuật" khái niệm được tạo bằng DALL-E. Hôm nay, nhân kỷ niệm 4 năm dòng tweet đó, tôi quyết định thử xem Claude Fable 5 (chạy trong Claude Code trên nền tảng web) có thể xây dựng toàn bộ trò chơi từ nội dung của dòng tweet đó hay không. Nó đã làm rất tốt!

Bạn có thể chơi trò chơi tại đây. Dưới đây là video demo ngắn:

Trình duyệt của bạn không hỗ trợ video HTML5.

Cách tôi xây dựng trò chơi này

Đây là dòng tweet ngày 5 tháng 8 năm 2022:

Câu lệnh (prompt) tôi dùng cho GPT-3 hồi đó là:

Viết mô tả sản phẩm chi tiết cho một trò chơi máy tính, trong đó một đội gấu mèo thực hiện các vụ trộm.

Đó là thời kỳ của tính năng hoàn thiện văn bản (text completion), nơi bạn yêu cầu GPT-3 viết tiếp phần còn lại của văn bản. Nó đã hoàn thiện như sau:

Trong “Raccoon Heist”, bạn và đội gấu mèo đạo chích của mình được giao nhiệm vụ thực hiện hàng loạt vụ trộm táo bạo. Từ cướp ngân hàng đến đánh cắp các tác phẩm nghệ thuật vô giá, không có phi vụ nào là quá lớn hay quá nhỏ đối với băng nhóm đầy lông lá của bạn. Bạn sẽ cần sử dụng trí thông minh và kỹ năng của mình để tránh cảnh sát và tẩu thoát an toàn cùng chiến lợi phẩm. Với lối chơi thú vị và dàn nhân vật quyến rũ, “Raccoon Heist” là trò chơi hoàn hảo cho bất kỳ ai đang tìm kiếm một cuộc phiêu lưu nhẹ nhàng.

Câu lệnh tôi dùng cho DALL-E rất ngắn gọn:

Ảnh chụp màn hình từ một trò chơi điện tử nơi một đội gấu mèo thực hiện một vụ trộm

Thử nghiệm hôm nay: liệu tôi có thể đưa những ảnh chụp màn hình đó vào Fable 5 với một câu lệnh yêu cầu nó viết trò chơi, sau đó để mặc nó tự xoay xở và nhận lại một trò chơi hoàn chỉnh hay không?

Thiết lập Claude Code trên web để sử dụng GitHub Pages

Một điều gây khó chịu ở Claude Code trên web là rất khó để kiểm tra những gì nó đang thực hiện trong khi nó vẫn đang làm việc.

Tôi đã sử dụng GitHub Pages để giải quyết hạn chế đó và thấy nó hoạt động rất hiệu quả.

Quy trình của tôi như sau:

Chỉ đơn giản vậy thôi! Trong vòng khoảng 30 giây sau mỗi lần push, nội dung mới nhất sẽ hiển thị tại yourname.github.io/your-repo/.

Nếu bạn thực hiện việc này với một kho lưu trữ (repo) riêng tư, bất kỳ ai đoán được tên kho lưu trữ đều có thể xem nội dung đã xuất bản. Bản thân tôi không quá lo lắng về điều này.

Câu lệnh cho Fable 5

Đây là câu lệnh tôi đã đưa cho Fable 5 (được viết trong ứng dụng ghi chú trên điện thoại—toàn bộ dự án này được thực hiện trên thiết bị di động). Tôi đính kèm theo đó hai hình ảnh từ dòng tweet gốc.

Hãy xây dựng trò chơi 3D này cho trình duyệt.

Kho lưu trữ này được cấu hình để phục vụ các tệp tĩnh, vì vậy hãy đảm bảo có một tệp index.html để tải mọi thứ khác.

Đảm bảo trò chơi thân thiện với thiết bị di động (điều khiển cảm ứng, hoạt động tốt trên màn hình nhỏ).

Bạn có khóa API OpenAI và quyền truy cập vào các API mô hình tạo ảnh của họ, hãy sử dụng nó để tạo kết cấu (textures) cho các mô hình 3D của bạn. Tài liệu tại đây: https://developers.openai.com/api/docs/guides/image-generation - sử dụng gpt-image-2

Hãy làm việc độc lập - đừng yêu cầu tôi đưa ra thêm bất kỳ quyết định thiết kế nào. Hãy đảm bảo trò chơi thú vị, có chút bất ngờ, mang đậm phong cách trộm cắp của gấu mèo và có hình ảnh bắt mắt.

Hãy commit và push thường xuyên nhất có thể để tôi có thể xem trước công việc của bạn - hãy bắt đầu với một tệp index.html hiển thị màn hình tiêu đề, sau đó xây dựng tiếp từ đó.

Hãy cập nhật vào tệp notes.md khi bạn làm việc, bao gồm các thay đổi đó như một phần của mỗi lần commit.

Tôi không đưa ra lựa chọn công nghệ nào. Tôi đã giả định (đúng) rằng nó có thể sẽ sử dụng Three.js dựa trên các thử nghiệm trước đây.

Việc cấp cho Claude quyền truy cập vào khóa OpenAI hóa ra lại rất hiệu quả để lấp đầy những khoảng trống trong khả năng của nó—trong trường hợp này, chúng tôi cần một cách để tạo hình ảnh làm kết cấu. Fable rất giỏi trong việc viết câu lệnh cho các trình tạo ảnh!

Tôi nói “Hãy làm việc độc lập—đừng yêu cầu tôi đưa ra thêm bất kỳ quyết định thiết kế nào” vì tôi muốn xem liệu nó có thể tạo ra một trò chơi hoàn chỉnh, hoạt động được mà không cần thêm bất kỳ sự can thiệp nào từ tôi hay không.

Tôi cũng nói “Hãy commit và push thường xuyên nhất có thể để tôi có thể xem trước công việc của bạn”. Khi bạn sử dụng Claude Code trong ứng dụng Claude trên iPhone, bạn cung cấp cho nó một kho lưu trữ GitHub và nó sẽ làm việc trên một nhánh (branch). Việc bảo nó “push thường xuyên nhất có thể” có nghĩa là các commit sẽ bắt đầu được đẩy vào nhánh đó ngay lập tức.

Tôi thích yêu cầu tạo tệp notes.md như một chút gia vị thêm vào—đây là tệp đã hoàn thiện, và mục ghi chú nó đã tạo khi thêm nhân vật chú chó:

Leo thang mới: từ đêm thứ 3, các sân vườn sẽ có chó bảo vệ tuần tra — một chú chó săn màu nâu low-poly với vòng cổ đỏ có gai và cái đuôi vẫy. Nó đi lang thang giữa các điểm ngẫu nhiên, và trong phạm vi 12 đơn vị, nó sẽ đánh hơi thấy bạn và truy đuổi theo mùi (tầm nhìn không quan trọng — tất cả là nhờ khứu giác, được hiển thị bằng biểu tượng 👃 trên đầu và tiếng sủa). Nó sẽ bỏ cuộc nếu bạn tạo ra khoảng cách 17 đơn vị. Các thông báo khi bị bắt giờ đây cụ thể theo nguồn: bảo vệ / đèn pha / chó săn. Đã xác minh quy trình lang thang → truy đuổi → bị bắt bằng một bài kiểm tra tự động.

Xem lại bản ghi (transcript)

Bạn có thể truy cập phiên làm việc được chia sẻ của Claude Code, và tôi cũng đã sử dụng công cụ claude-code-transcripts của mình để xuất phiên bản HTML của riêng tôi, bạn có thể tìm thấy tại đây.

Fable bắt đầu với một trang index, lấy một bản sao của Three.js, sau đó tự viết tập lệnh gen_textures.py (bản sao tại đây).

Nó đã tạo các kết cấu và kiểm tra ngẫu nhiên để đảm bảo chúng trông ổn. Tệp metal.jpg mà nó tạo cho thùng rác trông như thế này, mặc dù tôi không nghĩ nó được áp dụng chính xác trong trò chơi.