Để khoảng 20 sub-agent làm lại mọi màn hình trong game

Web Dev Cody kể cách Opus điều phối sub-agent, Codex chấm điểm và vẽ mockup, làm lại mọi màn hình game Survive the Night rồi đóng gói thành skill.

Đã duyệt độc lập · cập nhật 31/10/2026 · 13 min

1. Một workflow agentic để làm lại mọi giao diện của Survive the Night

Cody Seibert (kênh Web Dev Cody) mở đầu bằng việc muốn chia sẻ một trong những workflow agentic anh đang dùng để cải thiện mọi user interface trong Survive the Night, game chạy trên web mà anh đang làm. Theo lời anh trong video đăng ngày 31/10/2026, video đi theo ba phần. Trước hết anh chơi thử game một chút để cho người xem thấy những thay đổi anh đã làm. Sau đó anh chiếu một video marketing cho thấy trước và sau của tất cả các bản cập nhật. Cuối cùng là cả một workflow giải thích anh đã làm gì với Claude Code và Codex để tạo ra những thay đổi đó.

Main menu của Survive the Night với các nút Quick Join, Friends, Browse Games, Create Game, Perks, Loadout, Recipes, Achievements; góc phải là camera của người dẫn
Main menu mới của Survive the Night trong video đăng ngày 31/10/2026: dòng chữ "Scavenge by day. Board up by night. Fix the car. Get out.", nút Quick Join lớn, rồi Friends, Browse Games, Create Game và hàng ô Perks, Loadout, Recipes, Achievements.

2. Perks và loadout: cây kỹ năng và đồ trang bị trước khi vào trận

Anh lướt nhanh qua các menu chính. Ví dụ, nếu bạn đã đăng nhập thì bạn có thể lên level. Khi lên level, bạn mở khoá được nhiều perk khác nhau, và các perk này cho bạn một chút bonus, một chút tăng sức để chơi dễ hơn (theo phần demo trong video đăng ngày 31/10/2026). Có nhiều nhánh class khác nhau để mở dần trong lúc chơi: survivor, support, movement, gunner và scavenger. Và tất nhiên, bạn có thể chuyển sang chế độ xem cả cây (whole tree view) nếu muốn.

Menu Perks: nhánh Gunner với các perk theo level 2, 6, 12, 14, 20 và ô Selected Perk Quick Hands
Tab Perks trong demo của video đăng ngày 31/10/2026: cột trái là năm nhánh Survivor, Support, Movement, Gunner, Scavenger và ô Whole Tree; giữa là nhánh Gunner xếp theo level, mỗi perk có ảnh vẽ riêng; bên phải là perk đang chọn, Quick Hands, ghi "Reload 15% faster".

Tiếp theo là menu loadout. Theo lời anh trong video đăng ngày 31/10/2026, khi chơi và hạ được boss, bạn có cơ hội nhận một món đồ unique hoặc legendary, hoặc, để xem nào, còn có rare và common. Những món này bạn trang bị được trước khi vào game, và chúng cho bạn một chút bonus, ví dụ giảm sát thương nhận vào (damage taken), dùng item nhanh hơn, và vân vân.

3. Recipes, skull và trang achievements

Chuyển sang recipes. Theo phần demo trong video đăng ngày 31/10/2026, menu này giờ liệt kê mọi item bạn có thể craft trong game. Muốn craft thì trước hết bạn phải mở khoá chúng. Cách để có skull, về cơ bản, là chơi qua các ván: mỗi lần bạn hạ boss, hoặc sống sót qua một số level hay wave nhất định, game thưởng thêm skull, và bạn dùng skull đó mở khoá recipe để tiến xa hơn trong game.

Menu Recipes: các nhóm Melee và Firearms, mỗi món có ảnh vẽ và giá bằng skull; bên phải là chi tiết Revolver với nút Learn for 60
Tab Recipes trong demo của video đăng ngày 31/10/2026: dòng "Learn a recipe once with Zombie Skulls and craft it in every run", góc phải ghi 230 Zombie Skulls; mỗi vũ khí là một ảnh vẽ, món đã học có nhãn Learned, món chưa học ghi giá skull; khung bên phải mô tả Revolver và nguyên liệu cần để craft.

Cuối cùng là trang achievements, nơi bạn xem qua mọi thành tựu. Có những achievement về combat, có cái về khám phá các địa điểm khác nhau, và nhiều achievement có nhiều bậc (tier). Ví dụ với "Lifer", anh nói nếu bạn chơi hơn 30 ngày thì nhận được huy chương vàng; trên màn hình, thẻ Lifer ghi "Play on 30 different days" (demo trong video đăng ngày 31/10/2026). Ngoài ra còn có "Field Medic", trên màn hình ghi "Revive 25 teammates".

4. Menu tạo game, friends list, account và nhân vật

Anh nói đây mới chỉ là một vài chỗ chỉnh UI; anh và nhóm về cơ bản đã chỉnh mọi thứ (video đăng ngày 31/10/2026). Menu create game giờ có một ảnh chụp nhỏ do AI tạo cho từng game, hay đúng hơn là từng game mode. Khi bạn bấm chọn, ví dụ Endless Horde, bước tiếp theo của wizard là chọn zone bạn muốn chơi. Bước cuối, bạn chỉ định độ khó, tên game và số người chơi tối đa.

Hộp thoại New Game: ba bước Mode, Map, Settings; chọn độ khó Ember, Nightfall, Blackout, số người chơi và ai được vào
Bước cuối của wizard New Game trong demo của video đăng ngày 31/10/2026: ba mức độ khó Ember, Nightfall, Blackout, ô đặt tên game, số người chơi từ 2 tới 16, chọn Anyone hay Invite Only; khung phải tóm tắt game sắp tạo, Endless Horde ở Harlan Valley, kèm ảnh chụp của map.

Có một friends list ở đây để bạn mời người khác vào danh sách bạn bè. Có menu account cho biết bạn đã giết bao nhiêu con, khi nào bạn thua, và vân vân. Bạn đổi được tên, và còn tuỳ biến được nhân vật ngay ở đó: anh mở thử và cho thấy có thể đổi nhân vật sang các món đồ khác nhau nếu muốn (demo trong video đăng ngày 31/10/2026).

Anh nhắc lại: Opus và Claude về cơ bản đã refactor mọi thứ trong game này, mọi user interface, mọi HUD (theo lời anh trong video đăng ngày 31/10/2026). Rồi anh vào một game thật nhanh để cho xem. Anh bấm quick join; có thể đã có vài người trong game để chơi cùng.

5. Vào trận: HUD mới và inventory

Anh nói không biết người xem có nhớ HUD của game trước không, nhưng theo anh, mọi thành phần trong HUD này đều đã được cải thiện (video đăng ngày 31/10/2026). Phía trên là boss, có thanh máu riêng. Góc dưới bên trái là máu của bạn. Anh nói thêm: ồ, con boss giờ chạy nhanh hơn nhiều. Ở góc này là zombie. Còn có inventory, nhưng anh nói chắc phải đợi chết rồi mới cho xem được, vì con boss này sắp giết anh, nên anh tránh sang một bên trước đã.

Sau đó anh mở inventory. Theo anh, phần này cũng đã được làm lại hoàn toàn (video đăng ngày 31/10/2026): bạn trang bị các item khác nhau, salvage item, và craft ngay ở đây. Nếu muốn tìm một vũ khí khác để craft, hoặc chẳng hạn craft lại cây đuốc, bạn làm ở khung này. Trong game, bạn cũng phải mở khoá những thứ này trước: có vài món anh không craft được vì chưa mở khoá, nhưng anh có thể học chúng ngay trong game nếu muốn. Ví dụ muốn làm energy drink thì anh chỉ việc học món đó.

Màn hình Inventory: Equipped Gear với 5 ô hotbar, Backpack 9/24, khung Crafting bên phải với Padded Jacket
Inventory mới trong demo của video đăng ngày 31/10/2026: trên là Equipped Gear (pistol, knife, hammer), giữa là Backpack 9/24 với các item có ảnh vẽ; bên phải là khung Crafting, món Padded Jacket còn thiếu nguyên liệu và một món khoá cần 150 skull để học.

6. Map HUD, leaderboard và friends list

Một điểm khác anh chỉ ra là map HUD cũng đã được refactor (video đăng ngày 31/10/2026). Giờ có hình ảnh cho mọi quest item cần để qua level. Bạn thấy đồng đội đang ở đâu, và có thể bấm vào từng đồng đội để đi thẳng tới chỗ người đó. Còn perks và achievements thì cũng có trên main page.

Anh nghĩ menu cuối cần nói tới là leaderboard, ở góc này. Ở đó có friends list với những ảnh nhỏ khá hay tuỳ theo nhân vật mỗi người chọn. Anh dùng Codex để tạo những ảnh này, và bạn có thể bấm vào từng người để xem thêm thông tin về từng người (demo trong video đăng ngày 31/10/2026). Và cuối cùng là friends list, nơi bạn nhắn tin cho những người có thể đang chơi.

Anh nói có thể còn một hai menu nữa, hoặc phần notifications, mà anh chưa demo được cho tới khi thực sự chơi qua game. Nhưng đó là phần tổng quan về tất cả các bản cập nhật HUD (video đăng ngày 31/10/2026). Giờ anh sẽ cho xem trước đây trông như thế nào, bằng cách xem nhanh video marketing.

7. Video marketing trước và sau do Claude Opus 5.5 làm

Anh nói anh làm cả video marketing này bằng Claude Opus 5.5 (video đăng ngày 31/10/2026). Về cơ bản anh chỉ bảo: tôi cần bạn chụp ảnh trước và sau của mọi thứ bạn đã thay đổi, dựa trên phiên Claude mà bạn đã chạy. Anh cho xem nhanh video đó, và hứa sau đó sẽ đi qua workflow để người xem tự làm được, nếu ai vẫn còn quan tâm hay vẫn còn xem.

Trong video marketing, anh bình luận từng cảnh (demo trong video đăng ngày 31/10/2026):

  • Main menu (demo trong video đăng ngày 31/10/2026).
  • Daily rewards, phần anh quên chưa cho xem: mỗi ngày đăng nhập một lần, bạn nhận một ít skull và dùng nó để mua item (demo trong video đăng ngày 31/10/2026).
  • Lobby, mà anh thấy trông khá ổn (demo trong video đăng ngày 31/10/2026).
  • Menu tạo game mới, phần anh đã cho xem (demo trong video đăng ngày 31/10/2026).
  • Tất cả những bức tranh vẽ riêng (custom painted pictures) anh đã cho thấy trong game (demo trong video đăng ngày 31/10/2026).
  • Menu crafting được làm lại, phần anh cũng quên hẳn chưa cho xem (demo trong video đăng ngày 31/10/2026).
  • HUD trong trận được cập nhật, pause menu được cập nhật (demo trong video đăng ngày 31/10/2026).
  • Bestiary, anh chưa cho xem, nên phải quay lại cho mọi người xem sau (demo trong video đăng ngày 31/10/2026).
  • Khi bạn chết, game cho biết cái gì đã giết bạn, trong ví dụ này là con boss. Màn hình kết thúc có con boss đã hạ bạn, rồi màn hình level-up (demo trong video đăng ngày 31/10/2026).

Anh chốt lại: đó là tổng quan về tất cả những thứ đã đổi trong bản cập nhật gần đây (video đăng ngày 31/10/2026).

Phiên Claudeđã chạy Ảnh chụp trướcvà sau mỗi thay đổi Video marketingtrước / sau Claude Opus 5.5 làm, theo một yêu cầu ngắn của anh
Hình 7.1Cách anh kể việc làm video marketing trong video đăng ngày 31/10/2026: Claude Opus 5.5 dựa vào phiên Claude đã chạy để chụp trước và sau của mọi thứ đã đổi.

8. Endless Horde, quartermaster và Bestiary

Có hai menu nữa anh nói mình quên hẳn chưa cho xem. Anh và nhóm đã thêm một game mode mới tên Endless Horde: về cơ bản bạn cố sống sót càng lâu càng tốt, và zombie cứ thế kéo đến, đêm này qua đêm khác (theo lời anh trong video đăng ngày 31/10/2026). Chơi xong và hạ được zombie, bạn nhận một thứ mà anh nghĩ là gọi là Scrip; trong video marketing, quầy quartermaster cũng ghi "Run Scrip".

Scrip là tiền để giao dịch với quartermaster, một nhân vật cũng có menu riêng, nơi bạn quay lại mua frag grenade, mua đạn (demo trong video đăng ngày 31/10/2026). Bạn chỉ phải đi bộ tới chỗ ông ta, và anh thấy hơi phiền vì ông ta chỉ spawn ở một khu nhất định, đêm nào bạn cũng phải đi bộ quay lại. Anh nói thực ra đó là một ý hay: anh không biết vị trí spawn có bị hard-code ở sát mép map hay không. Có lẽ anh có thể cho ông ta spawn ngẫu nhiên khắp map để ngẫu nhiên hơn.

Tab Map của Harlan Valley: bản đồ đảo, điểm Trader ở mép trái, khung Team ghi On your own và phần Key
Map Harlan Valley trong một ván Endless Horde (demo trong video đăng ngày 31/10/2026): điểm Trader nằm sát mép trái của map, đúng chỗ anh nói người chơi phải đi bộ quay lại mỗi đêm; khung Team ghi "On your own".

Menu cuối cùng anh muốn cho xem là Bestiary, nơi hiện mọi loại kẻ địch bạn có thể gặp trong game. Có walker, runner, zombie dog, và nhiều con khác bên dưới mà anh không tiết lộ, để người chơi tự chơi và tự tìm ra. Khi bấm vào runner, bạn xem được nó ở dạng 3D để thấy model trong game trông thế nào, điều anh thấy khá hay (demo trong video đăng ngày 31/10/2026).

Bestiary: lưới thẻ Walker, Runner, Zombie Dog, Bat, Spitter, Boomer, Leaper, Crawler, Shade, Roper; bên phải là chi tiết Runner với nút View in 3D
Bestiary trong demo của video đăng ngày 31/10/2026: mỗi loại kẻ địch là một ảnh vẽ kèm mức Danger và cách hạ ("Head", "Legs"); khung phải mô tả Runner và có nút View in 3D.

Theo anh, đó về cơ bản là tất cả những cải tiến của UI và HUD (video đăng ngày 31/10/2026). Phần anh nghĩ người xem sẽ muốn ở lại xem là workflow, và anh chuyển sang đó ngay.

9. Bức tranh chung: Opus điều phối, Codex lo hình ảnh

Nhìn chung, anh dùng Opus làm orchestrator, hay coordinator, và dùng Codex để làm hình ảnh, hay để review và tạo mockup bằng hình (theo lời anh trong video đăng ngày 31/10/2026). Anh bắt đầu với Claude Code và nói: tôi cần bạn đi qua từng UI, từng user interface trong game của tôi. Tôi muốn bạn kick off một sub-agent, rồi chụp lại màn hình đó trông như thế nào lúc này. Tôi muốn bạn đưa ảnh đó cho Codex, và tôi muốn Codex brainstorm (ideate) để tìm cách cải thiện user interface đó. Rồi cũng để Codex tạo một ảnh mockup.

Sau khi Codex làm xong phần lớn, nó chuyển kết quả lại cho Claude Code, và Claude Code implement. Rồi về cơ bản hai bên chuyền qua chuyền lại, làm nhiều vòng lặp cho tới khi mọi menu trông thật đẹp (theo lời anh trong video đăng ngày 31/10/2026).

Trang HTML 'Redoing every screen with Opus and Codex' với bốn con số 30+, 18, 286, 6½ h và ba vai Codex, Claude Opus, Me
Trang HTML tổng kết workflow trong video đăng ngày 31/10/2026: bốn con số (30+ màn hình và mảnh HUD làm lại, 18 PR, 286 bức tranh vẽ, 6½ giờ từ 8:06 tối tới 2:31 sáng), ba vai Codex, Claude Opus và "Me", rồi dòng thời gian "Prove it by hand, turn it into a skill, fan it out".

Theo trang HTML anh cho xem (video đăng ngày 31/10/2026), mỗi bên giữ một vai:

  • Codex: review một ảnh chụp màn hình, cho điểm và một danh sách sửa có đánh số, rồi vẽ một mockup và các ảnh item (theo trang HTML trong video đăng ngày 31/10/2026).
  • Claude Opus: quyết định nhận đề xuất nào, build theo house style, test, mở PR và chạy các sub-agent (theo trang HTML trong video đăng ngày 31/10/2026).
  • Anh: gửi mục tiêu, xem mọi ảnh chụp, phản bác khi chưa ưng, và merge (theo trang HTML trong video đăng ngày 31/10/2026).

Còn file HTML này, anh nói anh đã nhờ Codex xem lại các phiên làm việc cũ của mình và tạo ra trang HTML giúp anh đi qua workflow. Đó là cách file HTML được tạo ra (video đăng ngày 31/10/2026).

10. Làm tay một menu trước, rồi biến thành skill

Điều chính anh muốn người xem mang về là anh bắt đầu với một menu trước (video đăng ngày 31/10/2026). Lúc đầu anh làm khá nhiều bước bằng tay: chụp màn hình, mở Codex, đi hết quy trình đó. Rồi khi đã tìm ra một workflow chạy rất tốt cho việc redesign HUD hay user interface của một game, anh mới bảo: giờ làm đúng quy trình này cho từng UI trong game của tôi.

Lúc đó nó kick off, anh nghĩ là khoảng 20 sub-agent khác nhau, tất cả chạy trên máy anh, chụp màn hình, thử lặp, thử cải thiện (theo lời anh trong video đăng ngày 31/10/2026; trang HTML anh cho xem ghi "21 sub-agents ran in all"). Cuối cùng anh bảo: khi xong hết thì biến nó thành một skill, để sau này nếu anh làm một user interface hay một HUD mới, anh chỉ việc dùng lại skill đó và đi đúng workflow cũ.

Theo anh, skill đó sẽ dùng Claude Code, dùng Codex, tạo ảnh, cắt sprite sheet, và biết chính xác cách làm lại những gì nó đã làm (video đăng ngày 31/10/2026). Và ở bước cuối, anh nói: làm một video marketing để tôi demo trên X. Anh đã đăng video đó lên X.

8:06 tối10:09 tối11:17 tối11:48 tối - 2:31 sánghôm sau Một menulàm tayLoadout Làm lạitương tựRecipes... Viết thànhskillhud-design Mọi màn hìnhcòn lạisub-agent Releasevà videođăng lên X Mốc giờ theo trang HTML trong video đăng ngày 31/10/2026
Hình 10.1Dòng thời gian "Prove it by hand, turn it into a skill, fan it out" trên trang HTML trong video đăng ngày 31/10/2026: Loadout làm tay lúc 8:06 tối, các menu tương tự lúc 10:09, skill hud-design lúc 11:17, mọi màn hình còn lại từ 11:48 tối tới 2:31 sáng, release và video hôm sau.

Trên trang HTML (video đăng ngày 31/10/2026), từng mốc có một dòng giải thích. Ở menu đầu, anh gửi một mockup của menu Loadout, Opus build lại, và Codex vẽ cả 76 item trên sprite sheet. Ở mốc thứ hai, Recipes làm theo "a similar approach", còn Perks, Achievements và Inventory được giao cho sub-agent kèm ảnh tham chiếu và phần review của anh. Ở mốc skill, vòng lặp được viết ra: Codex critique, Codex mockup, Opus build, lặp lại; một style guide và một stylesheet dùng chung, đã thử trên Auction House. Ở mốc "every screen left", trong lúc skill đang được viết, Opus khảo sát các màn hình chưa ai đụng tới và gom chúng thành 11 nhóm, mỗi nhóm một sub-agent, chạy thành hai đợt. Mốc cuối: 17 PR squash-merge vào một nhánh release, chơi thử local, rồi merge; một skill cắt ra các video showcase cho X, và Bestiary bị sót được làm tiếp sau đó.

11. Vòng lặp: chụp, chấm điểm, mockup, build, lặp lại

Anh cho xem một sơ đồ thật của workflow (video đăng ngày 31/10/2026). Về cơ bản anh bắt đầu bằng một ảnh chụp màn hình, rồi bảo Codex critique nó. Sau đó anh bảo Codex tạo một ảnh mockup cho thấy nó hình dung HUD của anh, hay modal của anh, có thể khá hơn một chút ra sao. Rồi anh bảo Opus implement và cũng chấm điểm kết quả.

Theo lời anh, về cơ bản nó làm hill climbing: critique, rồi quay lại quy trình chụp màn hình, lặp đi lặp lại cho tới khi vượt qua "người gác cổng" (gatekeeper) và đủ tốt (video đăng ngày 31/10/2026). Sau đó anh và agent chạy browser test, tạo pull request, và cuối cùng làm video.

Sơ đồ 'Shoot, critique, mockup, build, again': Screenshot, Critique, Mockup, Implement, ô quyết định Scores still rising?, Browser test, Pull request, và cột Taste and direction
Headless Chrome chụp màn hình, Codex review (4 điểm, danh sách sửa có đánh số, đọc code của chính màn hình đó), Codex vẽ mockup 1536×1024, Opus implement; còn tăng điểm thì sang vòng mới, hết tăng hoặc sau khoảng 3 vòng thì Opus test trên browser và mở pull request; cột phải là phần "taste and direction" của anh.

Đoạn chữ dưới sơ đồ (video đăng ngày 31/10/2026) ghi rằng Codex không bao giờ sửa code: critique và mockup của nó chỉ là đầu vào. Opus nhận những gì critique và mockup cùng đồng ý, trong giới hạn dữ liệu thật của game. Một đề xuất cần thêm một hệ thống game mới thì quay về anh dưới dạng câu hỏi. Vòng lặp dừng khi điểm ngừng tăng, khi critique chuyển sang chuyện khẩu vị, hoặc sau khoảng ba vòng. Mockup được ghi rõ là "a direction, not a spec", một hướng đi chứ không phải bản đặc tả.

12. Một sub-agent cho mỗi nhóm màn hình, một nhánh để merge

Tiếp theo là phần tổng quan khi chia việc ra các sub-agent (video đăng ngày 31/10/2026). Anh có một phiên orchestrator chính, chỉ một phiên đó thôi. Nó kick off cả loạt sub-agent khác nhau, mỗi user interface trong game một PR. Tất cả các PR đó đều chạy workflow anh vừa cho xem ở trên, mỗi cái chạy riêng, vào những thời điểm khác nhau.

Có cái mất lâu hơn nhiều: theo anh, inventory mất thời gian lâu hơn nhiều so với màn hình mời người chơi hay friends list (video đăng ngày 31/10/2026). Cuối cùng anh đẩy tất cả các pull request đó vào một nhánh, nhánh refactor UI của anh, rồi merge nhánh đó vào main.

Sơ đồ 'One sub-agent per screen group': Main session của orchestrator, hai batch gồm 11 nhóm g0 tới g10 mỗi nhóm một PR, rồi Release #335 One branch và Me Play, merge
Phiên chính của Opus khảo sát mọi màn hình chưa đụng tới và chia thành 11 nhóm (menu cards, main menu, death screens, map tab, HUD corners, lobby, daily reward, player list...), mỗi nhóm một sub-agent, một git worktree, một PR; batch 1 lúc 11:48 tối, batch 2 lúc 1:01 sáng; tất cả gom vào release #335 trước khi anh chơi thử và merge vào main.

Đoạn chữ dưới sơ đồ (video đăng ngày 31/10/2026) ghi: mọi sub-agent nhận cùng một dạng brief gồm các màn hình của nó, skill, style guide, một git worktree và branch mới, và lệnh "one PR, never merge". Mỗi màn hình giữ style trong một file riêng, nhưng 9 trong 17 PR vẫn đụng nhau ở đâu đó, chủ yếu trong UI sandbox dùng chung và các danh sách test; nhánh release là nơi các xung đột đó được sửa, một lần. Đi kèm còn vài PR phụ: gỡ các schematic cũ ở mọi chỗ, sửa port chụp màn hình, và skill làm video.

13. Những prompt anh đã gõ

Anh cho xem một vài prompt (video đăng ngày 31/10/2026). Anh đưa cho nó một mục tiêu, kèm ảnh mockup. Trang HTML ghi các prompt dưới tiêu đề "What I typed (typos fixed)". Prompt lúc 8:06 tối, mục "Give it a target", trên màn hình là:

[mockup screenshot] Improve the loadout menu UI to look like this, then use Codex to generate a tilesheet for all items, cut them out and use them for these items. Don't stop until it looks close to the modal I sent you.

Anh nói đây là thứ anh thật sự đã prompt. Theo anh (video đăng ngày 31/10/2026), bạn càng giỏi viết prompt và càng hiểu các model này làm được gì, có khả năng tới đâu, thì sau này bạn càng prompt được đúng kiểu như thế này.

Prompt thứ hai trên trang HTML (video đăng ngày 31/10/2026), lúc 10:09 tối, mục "Repeat the pattern": làm theo cách tương tự để refactor trang recipes, dùng tab giống như đã làm cho loadout, rồi tạo ảnh để dùng thay cho icon, cải thiện UX thật sự, cho xem screenshot trong lúc làm, xong thì tạo PR. Trên màn hình là:

Do a similar approach to refactor the recipes page to use similar tabs like we did for loadout, and then generate images to use instead of the icons... really improve the UX... show screenshots along the way, make PR when done.

Anh đã yêu cầu "show screenshots along the way", và về cơ bản nó cứ liên tục mở ảnh trên máy Mac của anh để anh thấy nó thật sự đang tiến triển (demo trong video đăng ngày 31/10/2026). Theo anh, điều tệ nhất bạn có thể làm là kick off một trong những việc này rồi đợi hai tiếng, quay lại thì thấy nó chẳng tiến được bao nhiêu. Nên việc để nó gửi cho bạn một kiểu phản hồi nào đó trong lúc chạy, để bạn chỉ cần liếc qua khi nó đang làm, đã rất, rất hữu ích cho kiểu refactor này (theo anh, video đăng ngày 31/10/2026).

Trang HTML (video đăng ngày 31/10/2026) còn ghi bốn prompt nữa mà anh không đọc lên. Lúc 10:50 tối, mục "Push back":

The perk menu still doesn't feel as good as the other menus; I was expecting custom images like you did for the recipes menu. Send a subagent to try and improve it more in regards to design.

Lúc 11:17 tối, mục "Make it a skill, then fan out", được trang HTML trong video đăng ngày 31/10/2026 ghi chú là "The prompt that turned one-off work into a repeatable process":

Using a sub agent, create a HUD skill... use the intelligent Codex models to get feedback on a UI, then use Codex to generate an improved image using the feedback, then pass that back to Claude to implement the feedback in an improvement loop... make sure this skill includes the consistent styling so all HUDs look similar. After the skill is created, explore the HUDs I haven't touched yet, then do a round of improvements... with real images instead of placeholder icons. Open progress screenshots along the way, make a PR for each separate HUD improvement.

Lúc 12:08 sáng, mục "Correct the course" (trang HTML trong video đăng ngày 31/10/2026):

I am seeing schematics showing up in the map; we no longer have schematics in game, we refactored to recipes, so make sure however you are redesigning the map HUD we do it without schematics in mind.

Và tối hôm sau, mục "Catch the miss", với ghi chú trên trang HTML (video đăng ngày 31/10/2026) rằng đây là màn hình duy nhất mà đợt khảo sát bỏ sót, được làm xong trong một PR riêng với chế độ xem 3D khi bấm vào:

Did you ever fix the bestiary page with the zombie images?... I think still showing the 3D render of the enemy might be useful maybe? Maybe if clicked on it?

14. Bảng điểm sau mỗi vòng và những gì giúp workflow chạy được

Anh nhắc lại rằng trong workflow, ở mỗi vòng nó phải chấm điểm, và cho xem điểm hoạt động ra sao (video đăng ngày 31/10/2026). Anh kéo xuống tới Auction House: việc đầu tiên nó làm là review màn hình như hiện trạng và cho điểm từ 1 tới 10. Anh nói có thể thấy là về cơ bản màn hình đó dở tệ: visual hierarchy tệ, usability tệ, phần visual cũng vậy.

Còn điểm thứ tư thì anh nói anh không biết đó là gì, phải tìm hiểu xem điểm thứ tư là gì; có thể là một thứ đặc thù cho UI của game. Dòng chú thích dưới bảng trên trang HTML ghi rằng điểm thứ tư là điểm Codex tự chọn cho từng màn hình, ví dụ tốc độ khi bị áp lực với Bestiary (video đăng ngày 31/10/2026). Nhưng về cơ bản, sau vòng đầu, nó đã đẩy được mọi điểm lên cao hơn nhiều, và đó là cách menu trở nên đẹp hơn.

Bảng 'What a few rounds buy': điểm Visual, Usability, Hierarchy, Fourth score của Auction House và Bestiary trước và sau từng vòng
Bảng điểm của Codex (thang 10) trên trang HTML trong video đăng ngày 31/10/2026: Auction House từ 6.5 / 4.5 / 4 / 4 lên 8.8 / 6.8 / 7.4 / 6.5 sau vòng 1; Bestiary từ 6.5 / 5.5 / 5 / 4.5 lên 8 / 6.5 / 6 / 5.5 sau vòng 1 và 8 / 7 / 6.5 / 6 sau vòng 2. Chú thích ghi vòng đầu làm phần lớn việc, các vòng sau thêm một điểm hoặc ít hơn.

Cuối cùng, cái gì làm nó chạy được? Anh đọc mục đầu: bắt đầu với một mục tiêu (start with a target). Theo anh (video đăng ngày 31/10/2026), đây có lẽ là thành phần then chốt của cả quy trình: bạn cần là con người trong vòng lặp (human in the loop), tự làm vòng đầu để chắc chắn user interface trông đúng như bạn nghĩ nó nên trông cho game của mình. Rồi bạn chốt lại (lock it in) và để nó refactor mọi thứ trong codebase sao cho khớp với cùng phong cách đó.

Anh nói anh đã nói về những điều còn lại rồi nên không nhắc lại. Trên trang HTML (video đăng ngày 31/10/2026), mục "What made it work" có thêm các thẻ sau:

  • Start with a target: một mockup hoặc một bản review có điểm thì hơn câu "make it better"; màn hình đầu đến từ mockup của anh, ba màn hình tiếp theo từ các bản review của anh (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Split the jobs: Codex là người critique và người vẽ giỏi; Opus quyết định, build và hiểu code; không bên nào tự chấm bài của chính mình (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Write the style down once: một style guide và một stylesheet dùng chung là lý do 11 agent chạy song song cho ra cùng một diện mạo; mỗi màn hình chỉ thêm một stylesheet nhỏ của riêng nó (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Feed it the real code: Codex đọc các file dựng nên màn hình, nên lời khuyên của nó gọi đúng item thật và số thật thay vì bịa ra feature (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Prove by hand, then automate: hai menu làm tay cho thấy cái gì chạy được; chỉ sau đó nó mới thành skill, được thử trên một màn hình trước khi fan out (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Watch it as it happens: ảnh chụp của mỗi vòng mở trên máy Mac của anh; phản bác sớm ("doesn't feel as good yet") rẻ hơn phản bác sau khi có PR (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Batch the release: squash mọi PR vào một nhánh release, sửa xung đột ở đó một lần, chơi thử local, rồi merge (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • A mockup is a direction: ảnh của Codex có thể sai chữ và sai chi tiết, có ảnh vẽ con Brute với mặt của Boomer; lấy bố cục, kích thước và điểm nhấn, còn giữ dữ liệu thật của game (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Check the list at the end: đợt khảo sát bỏ sót Bestiary, và các schematic cũ lọt vào một map đã làm lại; một lượt rà cuối qua mọi màn hình bắt được cả hai (thẻ trên trang HTML, video đăng ngày 31/10/2026).
  • Mind the machine: dev server của hai agent dùng chung một port khiến ảnh chụp hiện sai branch; mỗi worktree khoảng 300 MB nên ổ đĩa xuống thấp; mọi browser đi qua một launcher an toàn (thẻ trên trang HTML, video đăng ngày 31/10/2026).
Phần 'What made it work' trên trang HTML: mười thẻ từ Start with a target tới Mind the machine
Mười thẻ "What made it work" trên trang HTML trong video đăng ngày 31/10/2026; anh chỉ đọc thẻ đầu tiên, "Start with a target", còn lại anh nói đã nói ở trên.

Ngoài ra, theo anh, còn có cả loạt file skill và file script đã được dùng để dựng nên tất cả việc này (video đăng ngày 31/10/2026). Trang HTML có một mục "The toolkit" nằm trong thư mục .claude/skills/hud-design của repo.

15. Con số cuối cùng, và câu hỏi có cần Codex hay không

Đó về cơ bản là workflow anh đã làm. Theo số đo của anh (video đăng ngày 31/10/2026), từ prompt đầu tiên tới lúc xong hẳn mất khoảng sáu tiếng rưỡi. Nó tạo ra 286 bức tranh vẽ. Có 30 màn hình và mảnh HUD khác nhau được làm lại (trên trang HTML ghi "30+"), và 18 PR cho màn hình, mỗi màn hình hoặc mỗi nhóm một PR; đôi khi nó gom nhiều thứ vào cùng một pull request.

6,5 giờprompt đầu tới lúc xong 286bức tranh vẽ 30màn hình và mảnh HUD 18PR cho màn hình Số anh nêu trong video đăng ngày 31/10/2026 (trang HTML ghi 30+)
Hình 15.1Bốn con số anh nêu cho đợt làm lại UI, theo video đăng ngày 31/10/2026.

Anh mong người xem thích video. Theo anh (video đăng ngày 31/10/2026), đây là thứ quan trọng bạn cần học lúc này với tư cách một engineer, hay một "agentic coder", tuỳ bạn gọi ngành này là gì: hiểu các model này làm được gì, biết dùng model nào hay harness nào cho việc nào, rồi nối tất cả lại với nhau bằng một kiểu orchestrator ở tầng cao hơn. Trong trường hợp của anh, anh dùng Opus, vì theo anh Opus là model tốt nhất hiện có, "một model tuyệt vời" (nhận định của anh trong video đăng ngày 31/10/2026).

Rồi anh tự đặt câu hỏi (video đăng ngày 31/10/2026): nếu anh chỉ dùng Opus và cho nó quyền truy cập một dịch vụ API trung gian cho model, liệu nó có làm được y như vậy không? Anh có cần Codex không? Anh nói anh không biết, có khi anh còn chẳng cần Codex; Opus có lẽ đã làm được cả việc này. Chỉ là từ kinh nghiệm trước đây, anh thấy Codex khá giỏi tạo ảnh và cũng khá giỏi phân tích ảnh, nên anh dùng nó vì đó là thứ anh đã quen.

Cách anh đã làmThí nghiệm anh nêu Opus: orchestrator, build, testCodex: tạo ảnh, phân tích ảnh,critique, mockupvì Codex là thứ anh đã quen Chỉ dùng Opuscùng một cách tiếp cậnxem nó đi được bao xaanh chưa biết kết quả
Hình 15.2Cách chia việc anh dùng, và thí nghiệm anh nói có thể thử sau này, theo video đăng ngày 31/10/2026.

Theo anh, một thí nghiệm hay cho tương lai có lẽ là thử đúng cách tiếp cận này nhưng chỉ dùng Opus, để xem nó đi được bao xa (video đăng ngày 31/10/2026). Anh kết thúc: đó là tất cả những gì anh muốn chia sẻ, mong mọi người thích, chúc một ngày tốt lành, và "happy prompting".

Nguồn và liên kết 6 nguồn

  1. Tên gốc: I Let 20 AI Agents Redesign Every Screen in my Game
  2. Sự kiện: YouTube
  3. Video gốc: https://www.youtube.com/watch?v=v7IbHqEfdes youtube.com
  4. Kênh YouTube Web Dev Cody (Cody Seibert): youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw youtube.com
  5. Tài liệu Claude Code về skill, gồm file SKILL.md và cách Claude dùng skill (đọc ngày 31/10/2026): code.claude.com/docs/en/skills code.claude.com
  6. Tài liệu Claude Code về subagent, mỗi subagent chạy trong context window riêng (đọc ngày 31/10/2026): code.claude.com/docs/en/sub-agents code.claude.com