Dựng UI với AI: cho Opus ra năm phương án và bắt mọi PR có screenshot

1. Splash screen của Survive the Night: kết quả của nhiều vòng prompt

Cody nói anh muốn làm một video ngắn để chia sẻ các chiến lược của anh khi dựng một user interface, hay một HUD, tốt hơn bằng Opus 5.5 (theo video đăng ngày 07/10/2026). Thứ người xem đang thấy trên màn hình là splash screen của Survive the Night, game của anh (survivethenightgame.com).

Anh nói rõ: splash screen này là kết quả của một quá trình lặp (iterative process), anh không prompt ra nó ngay từ đầu (theo video đăng ngày 07/10/2026). Anh nói rằng nếu bạn đã có nhiều kinh nghiệm làm game, nếu bạn là một game designer, có lẽ trong đầu bạn đã sẵn câu hỏi "làm sao để có một splash screen thật cuốn hút". Còn với anh, phải mất nhiều lần prompt mới tới được chỗ này: phía sau là một đoạn 3D walkthrough của chính game, phía trước là HUD, nơi bạn có thể browse các game đang chạy, xem perks, xem achievements, leaderboard và nhiều thứ khác.

2. Menu Escape trong một game không thể pause

Game có rất nhiều HUD khác nhau, và Cody nói anh sẽ không nói hết. Thứ anh muốn nói là: khi đã vào một game, cái menu hiện lên khi bạn bấm Escape. Menu này trước đây nằm ở dưới cùng màn hình và trông không đẹp lắm. Sau vài vòng lặp với Opus, anh cho nó sinh ra năm ví dụ, tức năm prototype khác nhau, rồi chọn cái tốt nhất trong số đó. Anh hứa sẽ cho xem ngay sau đây (theo video đăng ngày 07/10/2026).

Nhưng trước hết, anh muốn nêu một điều khi dựng user interface: bạn muốn nó nhất quán (consistent). Và khi làm game, sẽ tốt nếu bạn giữ được phần gameplay vẫn nằm trong tầm nhìn, vì game này không pause khi menu bật lên (cách game chạy theo video đăng ngày 07/10/2026). Đó là một quyết định thiết kế của game: "này, mình đang chơi một game multiplayer với nhiều người, mình không thể cứ thế pause game". Hệ quả là zombie vẫn có thể lao tới và tấn công bạn trong lúc menu đang mở.

3. Spawn một con zombie để thử: menu mở mà vẫn thấy game

Để minh hoạ, Cody spawn nhanh một con zombie. Anh gõ "zombie" rồi chọn spawn một con walker thường, và người xem thấy con zombie bắt đầu đi về phía anh. Rồi anh mở menu Escape: anh vẫn thấy zombie đang tiến tới, vẫn thấy màn hình chuyển sang đỏ khi nó tấn công, và thanh máu vẫn hiện rõ ở dưới cùng (theo video đăng ngày 07/10/2026).

Cody nói anh đã không nghĩ tới kiểu menu này cho tới khi bắt đầu tự chơi thử game. Lúc đó anh mới nhận ra: "biết không, có lẽ mình cần thấy được chuyện gì đang diễn ra trong game", nhất là khi không thể pause (theo video đăng ngày 07/10/2026).

4. Bảo Opus ideate: năm phương án, mỗi phương án một GitHub issue

Anh lùi lại một bước để cho xem chiến lược anh đã dùng để có được menu đó. Trên GitHub có một issue tên là escape menu redesign. Quay lại danh sách tất cả các issue, anh giải thích việc mình đã làm: trong Opus, anh nói đại ý "này, tôi cần bạn redesign cái escape menu, và đưa cho tôi năm iteration khác nhau cho cách bạn sẽ tiếp cận việc này". Anh không prompt gì nhiều hơn thế. Anh chỉ nói: "tôi cần bạn ideate cho tôi, cho tôi xem thật nhiều thứ" (theo video đăng ngày 07/10/2026).

Và Opus đã tạo ra năm GitHub issue khác nhau, mỗi issue kèm screenshot khác nhau của phương án đó (theo video đăng ngày 07/10/2026).

5. Phương án 5: cuốn sổ tay của người sống sót

Thứ đầu tiên Cody cho xem là phương án số năm. Đây là một cách tiếp cận kiểu immersive: một trang giấy như cuốn nhật ký bạn có thể mang theo khi đang sống sót qua một trận zombie apocalypse. Trên đó cũng có game code, cũng có danh sách những người chơi khác đang ở trong game (theo video đăng ngày 07/10/2026).

Nhưng khi nhìn kỹ, Cody nhận ra: một game có thể có tới 16 người chơi (theo video đăng ngày 07/10/2026). Danh sách đó rõ ràng sẽ kéo dài xuống tận dưới màn hình, nên cách này sẽ không chạy tốt. Với anh, nó giống một to-do list hay một quest log hơn. Lần đầu thấy nó, anh thấy đây là một ý tưởng hay và rất immersive, nhưng với anh nó không "hét lên" chữ splash screen.

Điểm thứ hai: nó che mất những gì đang diễn ra trong game. Nếu một con zombie đang tấn công, bạn không thể biết, trừ khi nhìn xuống thanh máu và có thể thấy nó đang tụt, hoặc màn hình chuyển đỏ (theo Cody, video đăng ngày 07/10/2026). Vì vậy anh quyết định đó không thật sự là một cách tiếp cận tốt.

6. Phương án 4: menu toàn màn hình chia tab

Phương án tiếp theo cũng che toàn bộ màn hình. Nhưng Cody thích thanh trên cùng có đủ các mục survivors, perks, achievements, và nói phần game ở đây trông đẹp (theo video đăng ngày 07/10/2026).

Có một việc anh hay làm với các iteration này khi đã bảo Opus sinh ra nhiều ý tưởng: nhìn kỹ từng screenshot và để mình "tiêu hoá" nó một lúc. Anh thích cách phần objectives được hiển thị. Nhưng trong game, objectives vốn đã nằm sẵn trên HUD: nó cho bạn biết đã nhặt hay chưa nhặt những phụ tùng xe nào (cách game chạy theo video đăng ngày 07/10/2026). Bấm Escape chỉ để thấy lại đúng thông tin đó thì có vẻ hơi ngớ ngẩn.

Danh sách tất cả survivor trong game cũng vậy: trong game, bạn có thể bấm Tab để hiện một modal cho thấy mọi người đang chơi cùng bạn (theo video đăng ngày 07/10/2026). Thông tin này thú vị, nhưng nó đúng là mọi thứ trong game vốn luôn được hiển thị cho bạn. Vậy thì bấm Escape để làm gì cho có ích?

7. Phương án 3: thanh dock dọc đáy màn hình, và lúc modal buộc phải che

Tiếp theo là iteration số ba, và Cody nói thật lòng cái này khá tốt, không phải một cách tiếp cận tệ chút nào. Bạn vẫn thấy được toàn bộ game, vẫn biết được có zombie đang lao tới không. Ở dưới cùng, bạn có thể click để xem invites và perks (theo video đăng ngày 07/10/2026).

Có điều, khi bạn click vào một trong các nút đó, một modal sẽ bật lên và che màn hình. Anh click thử, chẳng hạn vào menu settings, và chỉ cho thấy có một modal che màn hình (theo video đăng ngày 07/10/2026). Vậy nên đến một lúc nào đó bạn sẽ phải che tầm nhìn, và bạn không thật sự tránh được điều đó: bạn phải có slider, có toggle button nào đó cho người dùng thấy. Có thể bạn làm nó trong suốt hơn một chút để vẫn nhìn xuyên qua được.

Đó là những thứ anh nghĩ tới khi duyệt qua các phương án: cái này sẽ chạy ra sao nếu mình đang chơi một game survival nhịp nhanh, và bất cứ lúc nào một con zombie cũng có thể lao tới tấn công mình? Anh nói anh thích phương án này lắm, nó là một trong những runner-up của anh (theo video đăng ngày 07/10/2026).

8. Một phương án khác, rồi phương án 1: rail bên trái

Cody mở thêm một phương án khác: lại bấm Escape, và một modal khổng lồ bật lên, chứa gần như cùng những thông tin bạn vốn thấy trong game. Anh nói phương án này có cái hay là cho bạn một cái nhìn lướt nhanh: "okay, mình có vài người bạn, mình có vài perk cần dùng, có thể mình có vài achievement". Nhưng tất cả những thứ còn lại như game code hay danh sách survivor thì nếu cần xem, anh có thể xem ngay trong game (theo Cody, video đăng ngày 07/10/2026).

Cuối cùng là iteration số một, theo anh là phương án đầu tiên Opus đưa ra cho anh: một menu mà bạn bấm Escape để mở, và vẫn thấy được toàn bộ game (theo video đăng ngày 07/10/2026).

9. Yêu cầu mơ hồ, năm hay mười biến thể, và giữ UI nhất quán

Sau năm vòng iteration này, Cody nói bạn hoàn toàn có thể làm mười. Nếu thật sự muốn thử nghiệm, hãy làm mười và đưa thêm cho nó các mục tiêu, tức những mối quan tâm chính của bạn là gì. Anh thừa nhận mình đã không đưa nhiều định hướng khi bảo nó ideate, anh chỉ nói "này, cho tôi năm thiết kế". Nhưng nếu anh có nhắc rằng anh muốn vẫn thấy được game trong lúc đang chơi, anh nghĩ sẽ có nhiều menu trông giống phương án một hơn, và nó sẽ lặp để đưa ra các thiết kế khớp với ý ban đầu của anh (theo Cody, video đăng ngày 07/10/2026).

Dù vậy, đôi khi việc đưa ra những yêu cầu rất high-level, mơ hồ ("fuzzy requirements") rồi xem AI làm gì cho bạn lại có ích (theo Cody, video đăng ngày 07/10/2026). Vì thường khi nhìn qua các biến thể khác nhau, nó sẽ gợi cho bạn thêm ý tưởng về cái gì trông đẹp và cái gì không.

Anh nói anh có thể ghép phương án số năm, nếu anh thật sự thích kiểu notepad đó, vào phương án đã chọn: toàn bộ panel bên trái có thể là một trang notepad chứa các lựa chọn này. Đó là một ý khác. Nhưng một lần nữa, bạn muốn UI nhất quán. Ở home screen, phần nhất quán nằm bên trái và bạn thấy game ở bên phải. Đó là điều anh quyết định: "biết không, mình cũng nên làm như vậy trong màn chơi chính" (theo video đăng ngày 07/10/2026).

10. Giao việc implement trong Nebula: pull request #152

Sau khi chọn được người thắng là phương án số một, Cody nói tất cả những gì anh làm là bảo "này Opus, implement cái này đi". Anh mở Nebula, ứng dụng của chính anh, và theo anh nhớ thì anh đã load một prompt, có lẽ chọn New Worktree, rồi nói implement và tạo một PR. Vậy là xong (theo video đăng ngày 07/10/2026).

Nó tự chạy, và anh quay lại sau khoảng 10 hay 20 phút (theo lời Cody, video đăng ngày 07/10/2026): đã có nguyên một pull request được mở để implement menu đó. Anh tìm lại nó: bấm vào số 152, và người xem thấy nó đã implement đúng menu đó, kèm một loạt screenshot đi qua từng bước xem menu trông ra sao.

11. Bảo Opus tự chụp screenshot cho mỗi pull request

Một điều Cody muốn chỉ ra: khi tạo pull request, bạn nên bảo Opus thêm screenshot. Cái hay là Opus sẽ tự load game của bạn, thật sự chơi qua nó, bấm Escape, mở menu, chụp screenshot cho bạn rồi đưa vào pull request (theo video đăng ngày 07/10/2026). Vậy là bạn thậm chí không cần tự load game lên để test.

Nếu bạn kèm screenshot của bất cứ thứ gì Opus đang thay đổi, bạn sẽ không phải lặn vào checkout branch để xem. Theo anh, đó là thứ sẽ thật sự làm bạn chậm lại. Nếu thấy mình cần checkout một branch để thử một thứ gì đó, bạn cần tìm một cách tốt hơn để mọi thông tin đó có sẵn cho bạn ngay từ đầu, khi tạo pull request hay issue đó (theo Cody, video đăng ngày 07/10/2026).

12. Skill create-pr: không có screenshot thì không có PR

Cody nói anh có một create PR skill, dùng ngay trong project này, và anh cũng khuyên bạn dùng nó cho mọi project. Mở skill ra, về cơ bản nó nói screenshot là bắt buộc. Và skill này kích hoạt mỗi khi anh prompt Claude Code, Codex hay bất kỳ công cụ nào khác để tạo một pull request (theo video đăng ngày 07/10/2026).

Trên màn hình, trong Nebula, anh mở file .claude/skills/create-pr/SKILL.md. Phần đầu file có name: create-pr và một dòng description: mở một pull request cho Survive the Night theo cách chủ game đọc, gồm overview ngắn, không kỹ thuật, screenshot những gì thay đổi, và dùng mỗi khi được bảo tạo, mở hay gửi một PR. Tiếp theo là phần "Create a PR": người đọc là một product owner đang quyết định có merge hay không và chơi gì; họ đọc overview và xem ảnh, họ không đọc code (nội dung file trên màn hình, theo video đăng ngày 07/10/2026).

Bước "1. Read the branch" trong file có đoạn lệnh git sau, đúng như trên màn hình (theo video đăng ngày 07/10/2026):

git fetch origin main
git status --short                      # commit anything left (on this branch, never on main)
git log --oneline origin/main..HEAD
git diff --stat origin/main...HEAD

13. Khi skill kích hoạt cả cho một chỉnh sửa nhỏ: thanh máu của barricade

Dù coi skill này là thứ nền tảng của agentic coding trong năm 2026, Cody nói nó thường kích hoạt cả với những chỉnh sửa nhỏ mà Opus không mất bao lâu để implement (theo video đăng ngày 07/10/2026). Và vì bạn có một skill nói "này, chụp screenshot cho mọi thứ", nó có thể khá phiền.

Anh lấy ví dụ: trong game, nếu bạn xây một bức tường, khi lại gần sẽ thấy một wood barricade với phần trăm máu nằm ngay giữa màn hình. Vấn đề là khi bạn đang cầm súng, nó cản đường bạn. Khi bạn đang thật sự đánh nhau với địch, chúng đang lao tới, bạn đứng gần tường, gần mấy chiếc xe hay đồ vật khác, những modal này bật lên và che tầm nhìn của bạn. Rất, rất phiền (theo Cody, video đăng ngày 07/10/2026).

Cách team xử lý là chỉ cho thấy nhãn này khi bạn đang cầm búa, và theo anh thì cách đó phần nào giải quyết được vấn đề. Nhưng PR skill anh vừa nói sẽ kích hoạt, và Opus sẽ mất thêm chừng năm phút (theo số đo của Cody, video đăng ngày 07/10/2026) để load game, đi qua, chơi game, teleport, chụp screenshot, chỉ để pull request có một tấm ảnh cái modal nhỏ ở giữa màn hình. Anh nói có thể điều đó hữu ích với vài tính năng.

14. Để skill tự kích hoạt hay chỉ gọi khi cần

Nhưng với những tính năng chỉ là chỉnh sửa nhỏ, Cody nói nó rất, rất phiền. Đó là vấn đề anh gặp với skill: chúng thường kích hoạt mọi lúc (theo Cody, video đăng ngày 07/10/2026). Cuối cùng thứ bạn phải làm là nói thêm "đừng chụp screenshot cho PR này". Anh nói có skill thì rất hữu ích, nhưng khi chúng được gọi ở mọi prompt bạn gõ, nó lại gây ra vài vấn đề.

Đó là thứ anh đang cố tìm câu trả lời: skill này có nên chỉ là một file markdown mà anh tự tag thủ công không? Anh nói đây là điều bạn phải ghi nhớ: skill rất tuyệt nếu bạn muốn một thứ áp dụng cho mọi prompt, nhưng thường sẽ có edge case và những lý do khiến bạn không muốn gọi nó. Và việc nói "đừng chụp screenshot" khi chạy PR skill là thứ bạn cứ phải nhớ mà gắn thêm vào (theo Cody, video đăng ngày 07/10/2026).

Cách tiếp cận còn lại: không để skill tự kích hoạt (auto invoke), mà bảo Claude dùng skill đó ở từng bước. Anh tin là bạn có thể vào chính file skill và xoá phần ở trên cùng, để Claude không biết khi nào nên tự gọi nó; khi đó nó chỉ còn là thứ bạn gọi khi thật sự muốn (theo Cody, video đăng ngày 07/10/2026).

15. Pull request từ người đóng góp: torch và campfire đếm giờ cháy

Dù vậy, Cody nói việc có skill này trong repo là rất tốt, vì khi người khác tạo pull request để thêm tính năng hay thay đổi game, họ thường quên thêm screenshot, nhất là khi đổi user interface hay đổi gameplay. Anh nói thẳng: nếu thành thật thì anh sẽ không checkout code của bạn, sẽ không chạy nó ở local, vì việc đó tốn quá nhiều thời gian (theo Cody, video đăng ngày 07/10/2026).

Anh cho xem một ví dụ từ một người đóng góp: người này thêm tính năng cho torch và campfire hiển thị còn cháy được bao lâu. Kéo xuống sẽ thấy: khi bạn hover lên các vật có lửa như torch hay campfire, game cho biết còn lại bao nhiêu thời gian (theo video đăng ngày 07/10/2026).

Anh nói nếu không có những screenshot này, có lẽ anh đã không merge pull request đó nhanh như vậy. Nhưng vì người đóng góp đã clone repo và bảo Opus thêm tính năng này, skill tự động kích hoạt. Pull request có sẵn screenshot cho những thay đổi trên HUD, và anh có thể merge luôn (theo video đăng ngày 07/10/2026).

16. Hai điều mang về: ideation và screenshot trong mọi PR

Cody mong đây là một mẹo hữu ích nếu bạn chưa từng làm theo cách này. Anh tóm lại hai điều đã dạy trong video. Thứ nhất là ideation, thứ anh cho rằng bạn nên tận dụng mọi lúc: bảo Claude Code dựng năm hay mười ví dụ khác nhau về cách một thứ nên hoạt động, rồi quay lại chọn phương án tốt nhất (theo Cody, video đăng ngày 07/10/2026). Thứ hai là một skill bạn nên có cho mọi pull request, để đảm bảo nó luôn sinh ra screenshot.

Theo anh (video đăng ngày 07/10/2026), đây là một trong những thứ quan trọng nhất khi dựng ít nhất là game này, nhưng cũng đúng cho web application và user interface nói chung: những chiến lược mà bạn và team của bạn nên luôn thiết lập sẵn. Anh chúc mọi người một ngày tốt lành và "happy coding".