Browser, Computer Use và imagegen: khi agent cần nhìn

English title: Browser, Computer Use, and Image Generation

Cập nhật: 29/06/2026. Đây là bài 8 trong chuỗi Codex Power 10 - 10 bài hướng dẫn dùng các năng lực mạnh của Codex theo cách có kiểm soát.

Bạn sẽ biết khi nào cần yêu cầu Codex nhìn giao diện thật, khi nào dùng ảnh sinh, và khi nào nên kết xuất infographic bằng HTML/CSS để giữ chữ đúng.

Bảng Nhớ Nhanh

Dùng bài này khi: kết quả phụ thuộc vào giao diện, ảnh, trình duyệt, ứng dụng desktop hoặc minh họa trực quan.

Không dùng bài này khi: bạn chỉ cần sửa logic backend có test rõ và không cần nhìn UI.

Xong bài khi: có ảnh chụp hoặc ảnh kết xuất, alt text, file tồn tại và cổng kiểm visual rõ.

Ghi nhớ: Bài thực hành này không cố làm bạn nhớ hết tính năng. Nó giúp bạn dựng một vòng làm việc có mục tiêu, có biên và có bằng chứng.

Trước Khi Bắt Đầu

• Biết ảnh cần truyền cảm xúc hay truyền thông tin chính xác.
• Có danh sách viewport cần kiểm: mobile, desktop, hoặc cả hai.
• Có quy tắc chữ trong ảnh: dài bao nhiêu, có tiếng Việt có dấu hay không.

Cẩn trọng: Nếu môi trường hoặc quyền đang mơ hồ, hãy dừng một nhịp để kiểm tra. Agent chạy nhanh trong bối cảnh sai sẽ tạo ra diff rất thuyết phục nhưng khó dùng.

Ý Tưởng Trong 3 Phút

Code có thể build pass nhưng giao diện vẫn vỡ: chữ tràn nút, ảnh che nội dung, mobile lệch cột. Ngược lại, một bài viết có thể đúng nội dung nhưng thiếu minh họa khiến người đọc bỏ qua. Visual loop giải quyết cả hai.

Có hai loại ảnh: ảnh để gợi cảm xúc và ảnh để truyền thông tin chính xác. Ảnh sinh rất mạnh cho loại đầu. Infographic nhiều chữ nên được kết xuất bằng bố cục kiểm soát được.

• Browser giúp Codex quan sát trạng thái thật: kích thước viewport, console, ảnh chụp, tương tác.
• Computer Use phù hợp khi cần thao tác ứng dụng không có API tiện lợi, nhưng nên có bước xác nhận vì rủi ro cao hơn.
• Imagegen nên dùng cho minh họa không chữ hoặc rất ít chữ. Với tiếng Việt dài, nguy cơ sai dấu và méo ký tự vẫn cần quản trị.
• Infographic nhiều chữ nên có bản kê: thông điệp, loại bố cục, text, đường dẫn ảnh và cổng kiểm tra.

Công Thức 1: Chạy Quy Trình Chính

Khi dùng: kết quả phụ thuộc vào giao diện, ảnh, trình duyệt, ứng dụng desktop hoặc minh họa trực quan.

1. Với UI, yêu cầu Codex chụp ít nhất một viewport desktop và một viewport mobile.
2. Với bài viết, tách hero illustration khỏi infographic có chữ.
3. Dùng imagegen cho hero không chữ, có phong cách và biểu tượng rõ.
4. Dùng HTML/CSS hoặc SVG cho infographic cần chữ chính xác, rồi kiểm ảnh cuối.

Công Thức 2: Đóng Cổng Kiểm Chứng

Một phiên tốt không cần lúc nào cũng dài. Điều cần giữ là nhịp: giao việc rõ, để Codex đọc đúng, cho nó thực hiện trong phạm vi nhỏ, rồi bắt nó tự chứng minh kết quả.

Prompt Mẫu

Goal: Kiểm giao diện bài viết ở mobile và tạo infographic có chữ đúng tiếng Việt.
Context: URL preview, slug bài viết, thông điệp chính và ảnh hiện có.
Constraints: Hero không chữ, infographic nhiều chữ phải kết xuất bằng HTML/CSS hoặc SVG.
Done-when: Có screenshot desktop/mobile, ảnh nằm trong public/generated, build pass.

Ví Dụ Tối Thiểu: Visual brief tách hero và infographic

Hero: illustration không chữ, thể hiện agent đang kiểm giao diện.
Infographic: 4 bước, tiếng Việt có dấu, kết xuất bằng SVG.
Gate: kiểm ảnh ở 390px và 1440px, không tràn chữ, file tồn tại.

Khi Có Lỗi

Nếu gặp một trong các lỗi trên, cách sửa thường không phải là viết prompt dài hơn. Cách sửa là thêm đúng mảnh còn thiếu: một đường dẫn ngữ cảnh, một ràng buộc phạm vi, hoặc một tiêu chí nghiệm thu.

Quy Trình Trong Đội

Quy trình xuất bản nên có visual gate: mỗi bài có hero, ít nhất một infographic, alt text rõ, và ảnh có tồn tại trong thư mục deploy. Bài này đang dogfood chính quy trình đó.

Với đội mới bắt đầu, đừng đưa Codex vào khâu rủi ro nhất ngay. Hãy bắt đầu ở nơi có phản hồi nhanh: viết test, tạo bản nháp, rà link, chuẩn hóa tài liệu, tạo ảnh minh họa, hoặc chuẩn bị diff nhỏ để con người rà soát.

Bài Tập 30 Phút

1. Chọn một repo, bài viết hoặc màn hình thật để thực hành.
2. Viết một câu mục tiêu cho bài 8, tránh yêu cầu chung chung.
3. Liệt kê đúng ba nguồn context mà Codex nên đọc trước.
4. Ghi hai ràng buộc không được vượt.
5. Viết Done-when bằng bằng chứng có thể kiểm tra.
6. Chạy prompt trong Codex CLI hoặc Codex App.
7. Dừng sau plan đầu tiên và xem Codex có hiểu đúng không.
8. Cho Codex làm phần nhỏ nhất có thể.
9. Đóng gate: Render, Viewport, Chính tả, Liên quan.
10. Ghi lại một điều nên đưa vào prompt hoặc AGENTS.md cho lần sau.

10 Điều Cần Nhớ

1. UI cần nhìn thật, không chỉ đọc code.
2. Browser preview giúp comment đúng vùng giao diện.
3. Browser Use phù hợp cho trang local hoặc file-backed.
4. Computer Use nên hẹp vì tác động ngoài workspace.
5. Imagegen mạnh cho hero và minh họa ít chữ.
6. Infographic nhiều chữ nên kết xuất bằng bố cục kiểm soát.
7. Alt text là một phần của sản phẩm, không phải phụ kiện.
8. Viewport mobile cần kiểm riêng.
9. Ảnh đẹp phải phục vụ luận điểm.
10. Visual gate nên nằm trong Done-when.

Nguồn tham khảo chính: OpenAI Codex documentation. Bài tiếp: Automations: để Codex quay lại đúng lúc.