Codex cho người mới: build và publish một task manager bằng bốn prompt

1. Khoảng trống giữa "đây là code" và "đây là app chạy được"

Mikey mở đầu bằng một câu hỏi: một AI viết code hộ bạn thì có ích gì, nếu sau đó bạn vẫn phải tự mày mò cách chạy nó? Theo anh, đó chính là vấn đề của phần lớn các công cụ AI coding. Bạn nhận được code, tốt thôi, nhưng rồi bạn kẹt ở chỗ phải copy nó vào đúng file, dựng môi trường, chạy thử, và rồi đi tìm hiểu vì sao một nửa số đó còn không chạy.

Với người mới, khoảng trống giữa "đây là code của bạn" và "đây là app đang chạy của bạn" là nơi mọi thứ bắt đầu đổ vỡ. Mikey nói Codex lấp được khoảng trống đó. Nó không chỉ viết code: nó làm việc ngay bên trong project của bạn, tạo các file, chạy app, rồi sửa những gì bị hỏng.

2. Kế hoạch của video: một task manager, bốn prompt, một website thật

Trong bài hướng dẫn Codex cho người mới này, Mikey đem đúng lời hứa đó ra thử. Anh bắt đầu từ một workspace hoàn toàn trống và xây một task manager đầy đủ từ con số không: có category, có bộ lọc, có bộ đếm task trực tiếp, có thiết kế cho mobile, và tất cả chỉ bằng bốn prompt viết bằng tiếng Anh thông thường.

Cuối video, anh publish nó thành một website thật, ngay từ Codex, để bạn ra về với một thứ có thật. Quan trọng hơn, theo Mikey, bạn ra về với một workflow dùng lại được cho bất cứ thứ gì: habit tracker, công cụ quản lý ngân sách, trang đặt lịch, vân vân. Và một khi đã thấy cách nó vận hành, việc build với AI bắt đầu thấy đơn giản.

Mikey cũng giới thiệu ngắn một khóa masterclass của anh về xây SaaS, website, AI agent và app bằng AI, mời người xem tham gia qua phần mô tả video. Rồi anh vào việc: "All right, let's start building."

3. ChatGPT đưa code, Codex làm việc trên chính project

Nếu bạn từng nhờ ChatGPT build một thứ gì đó, Mikey đoán bạn đã có cùng một trải nghiệm. Nó đưa bạn code, đúng. Nó giải thích code làm gì, đúng. Rồi nó để bạn tự tìm xem nên đặt code ở đâu, chạy thế nào, và làm gì khi có thứ bị hỏng.

Codex thay đổi đúng phần đó của quy trình, vì nó làm việc trên chính project. Mikey mô tả Codex là một coding agent đầy đủ: bạn mô tả điều mình muốn bằng tiếng Anh thông thường, rồi nó viết code, sắp xếp các file, test app, và có thể chuẩn bị app để deploy. Bạn không phải copy từng đoạn code sang một công cụ khác hay tự ráp mọi thứ lại với nhau. Codex lo toàn bộ quá trình build thật sự, từ đầu tới cuối.

4. Các cách dùng Codex, và Sites lo phần publish

Có nhiều cách để dùng Codex. Mikey liệt kê: một app desktop cho Mac và Windows, một bản command line, các extension cho code editor, thậm chí cả một app mobile, và bản anh dùng trong video này, chạy thẳng bên trong ChatGPT trên web.

Anh chọn bản web vì đó là chỗ dễ nhất để người mới bắt đầu: không có gì phải cài hay cấu hình. Bạn mở ChatGPT, chuyển sang Codex, rồi bắt đầu mô tả thứ mình muốn build.

Mảnh thứ hai là Sites, tính năng cho phép lấy app đã hoàn thiện rồi publish nó lên mạng. Sites lo phần hosting và deploy, rồi đưa cho bạn một URL thật mà ai cũng mở được trong trình duyệt. Vì vậy bạn không cần tạo một tài khoản hosting riêng, không phải upload file bằng tay, cũng không phải nối thêm một dịch vụ nào khác. Khi app đã sẵn sàng, Sites lấy nó từ bản preview và đưa nó lên internet.

5. Gói cần có, vùng chưa hỗ trợ, và chuyện code thuộc về ai

Theo video đăng ngày 19/09/2026, Mikey nói Codex có sẵn trong gói ChatGPT Plus và các gói cao hơn. Sites khi đó đang ở dạng public beta và vẫn đang được mở dần cho các gói trả phí, nên một số người dùng có thể chưa thấy nó ngay. Sites cũng chưa có ở EEA, Vương quốc Anh và Thụy Sĩ. Người xem ở các khu vực đó vẫn theo được toàn bộ phần build, nhưng bước publish có thể chưa dùng được theo cùng một cách, ít nhất là chưa.

Mikey nêu thêm một khác biệt quan trọng giữa Codex và nhiều công cụ no-code: quyền sở hữu. Codex tạo ra code thật, bạn có thể xem, export, rồi tiếp tục làm ở chỗ khác. Một số nền tảng no-code thì giữ toàn bộ project bên trong hệ thống của họ. Còn project build bằng Codex có thể đi tiếp ra ngoài công cụ đã tạo ra nó.

Đến đây là đủ để hiểu Codex là gì và vì sao anh dùng nó. Giờ là lúc mở nó ra và build thật.

6. Mở Codex trong ChatGPT và làm quen giao diện

Mở một công cụ coding lần đầu có thể hơi đáng sợ, nhất là khi bạn còn không chắc mấy cái panel kia để làm gì. Tin tốt, theo Mikey, là Codex đơn giản hơn nhiều một khi bạn biết mọi thứ nằm ở đâu. Nên trước khi build, anh dựng mọi thứ và đi một vòng xem giao diện.

Anh đã ở sẵn trong ChatGPT. Để vào Codex, anh dùng bộ chuyển (switcher) ở góc trên, nơi có hai lựa chọn Work và Codex. Chọn Codex, và workspace coding mở ra. Anh nhắc lại lý do dùng Codex trên web cho bài này: không có gì phải cài hay cấu hình, nên đây là cách dễ nhất nếu đây là lần build đầu của bạn.

Trước khi viết prompt, anh chỉ nhanh từng vùng:

• Thread panel bên trái: lịch sử project và các cuộc hội thoại trước.
• Prompt box ở giữa: nơi mô tả thứ ta muốn Codex build.
• Diff viewer: hiện code thật mà Codex tạo ra và cập nhật trong lúc làm. Bạn không cần hiểu từng dòng, nhưng nó luôn ở đó khi bạn muốn xem cái gì đã đổi.
• Preview panel: hiện app đang chạy để ta test từng phiên bản sau khi Codex build xong. Suốt bài, ta sẽ đi qua lại giữa prompt và preview.
• Sites: dùng để publish app ở cuối. Để đưa nó vào project, ta gõ @Sites ngay trong prompt rồi bảo Codex publish thứ đã build. Phần đó làm sau; trước mắt chỉ cần biết nó nằm ở đâu trong workflow.

7. Kiểm tra gói ChatGPT của bạn

Mikey dùng ChatGPT Plus cho bài hướng dẫn này. Bạn có thể kiểm tra gói của mình bằng cách bấm vào profile ở góc màn hình. Theo video đăng ngày 19/09/2026, Codex có trong Plus và các gói cao hơn, còn Sites vẫn đang mở dần ở dạng beta, nên nếu nó chưa hiện trong tài khoản của bạn thì có thể nó chưa dành cho bạn, ít nhất là chưa.

Đến đây Codex đã mở, prompt box đã sẵn sàng, và ta đã biết chỗ để xem kết quả. Giờ thì build app.

8. Prompt 1: dựng nền móng của task manager

Đây là lúc phần build thật sự bắt đầu. Mikey đưa cho Codex một prompt rõ ràng và dùng nó để tạo toàn bộ nền móng của task manager. Anh gõ prompt vào ô rồi gửi đi. Đây là toàn văn prompt hiện trên màn hình:

Build a personal task manager web app. Users can add a task by typing it and pressing a button or Enter. Each task can be assigned a category from a dropdown (Work, Personal, Shopping, Other). Each task can be checked off to mark it complete, and completed tasks should show with a strikethrough. Each task has a delete button to remove it. Show all tasks in a clean list. This is a frontend-only app — no login, no accounts, no external services, no database. Keep it simple and functional.

Như bạn thấy, prompt yêu cầu Codex build một task manager cá nhân đơn giản, nơi người dùng thêm task, gán category, đánh dấu task đã xong, rồi xóa task. Nó cũng nói rõ ta chỉ muốn một app front-end, nên không có tài khoản, dịch vụ bên ngoài hay database nào phải dựng.

Gửi xong, Codex bắt đầu làm project: tạo các file, sắp xếp app, rồi build từng phần dựa trên chỉ dẫn ta đưa. Trên màn hình, Codex còn đưa ra một bộ chọn hướng thiết kế; khi bộ chọn đóng mà chưa chọn gì, nó hỏi có nên dùng phương án mạnh nhất là "Crisp Productivity" không, Mikey bấm đồng ý, và Codex áp hướng cool-gray, indigo, thẻ gọn.

Một lát sau, phiên bản thứ nhất hiện ra ngay trong preview panel. Mikey test thử: anh thêm một task tên "Buy groceries" và nó hiện trong danh sách. Anh thêm một task nữa, tick task thứ nhất, rồi xóa task thứ hai.

Mọi thứ ta yêu cầu đã chạy được ngay từ prompt thứ nhất. App hoạt động, nhưng thiết kế còn rất cơ bản: nền trơn, danh sách task gần như không có style, và bố cục vẫn trông như bản nháp sớm. Mikey nói vậy là ổn ở giai đoạn này, vì điều quan trọng là làm cho tính năng chạy trước. Nền móng đã có, giờ có thể tập trung làm cho nó đẹp hơn.

9. Prompt 2: chỉ đúng chỗ xấu thay vì "make it look better"

Liếc qua app là thấy ngay bước tiếp theo. Cấu trúc đã có, nhưng nhìn vẫn như bản nháp thô, nên phải cho Codex chỉ dẫn rõ hơn về việc trang nên trông thế nào.

Mikey cảnh báo: một chỉ dẫn mơ hồ kiểu "make it look better" để lại quá nhiều chỗ cho Codex tự diễn giải. Codex sẽ tự đưa ra lựa chọn của nó, và những lựa chọn đó có thể không khớp với điều bạn hình dung. Tốt hơn là chỉ ra chính xác vấn đề. Trong trường hợp này: nền trắng toát, các task dính vào nhau, gần như không có màu, và cả bố cục nằm hơi sát mép trên của màn hình.

Anh mô tả thẳng những vấn đề đó, đồng thời nói cho Codex biết phần nào bắt buộc phải giữ nguyên. Toàn văn prompt thứ hai:

Improve the visual design of the app without changing how it works. Add a soft colored background instead of plain white. Put each task inside its own card with rounded corners, padding, and a subtle shadow, and add spacing between the cards. Add a clear color scheme with one accent color used for buttons and highlights. Center the app in the page with a comfortable maximum width and a clear title at the top. Make the buttons and the category dropdown look modern and clean. Keep all existing functionality working exactly as it does now — do not remove or change any features.

Thứ ta xin ở đây là một nền màu dịu hơn, mỗi task một thẻ riêng, một màu nhấn rõ ràng, khoảng cách tốt hơn, nút và dropdown gọn gàng hơn. Prompt cũng bảo Codex giữ mọi tính năng đang có chạy đúng như cũ. Mikey nhấn mạnh câu cuối đó thật sự quan trọng, vì ta chỉ muốn đổi vẻ ngoài, không đổi cách app hoạt động. Anh gửi đi và để Codex cập nhật project đang làm.

Codex giữ nguyên nền móng và chỉ áp các thay đổi về giao diện, thay vì build lại app từ đầu. Khác biệt thấy ngay: trang giờ có một bảng màu nhất quán, mỗi task nằm trong thẻ riêng, nội dung được căn giữa với đủ khoảng trống xung quanh. App gọn gàng, ngăn nắp hơn mà vẫn đủ đơn giản cho một task manager.

Anh test lại các thao tác chính: thêm một task, đánh dấu xong, rồi xóa một task khác. Mọi thứ vẫn chạy như cũ, xác nhận Codex chỉ đổi thiết kế mà không ảnh hưởng chức năng. Mikey gói lại cách làm cần nhớ mỗi khi tinh chỉnh một project: giải thích cái gì trông sai, mô tả thay đổi ta muốn, rồi nói rõ phần nào phải giữ nguyên.

10. Prompt 3: bộ đếm task còn lại và bộ lọc ẩn task đã xong

Thiết kế đã xong, giờ chuyển sang những tính năng làm task manager hữu ích hơn nhiều. App đã làm được mọi thứ build trước đó, nhưng khi danh sách dài ra, sẽ khó thấy việc nào còn cần để tâm. Một bộ đếm và một bộ lọc giải quyết chuyện đó mà không làm app phức tạp thêm.

Mikey đưa cho Codex hai bổ sung cụ thể trong chỉ dẫn tiếp theo: một cái theo dõi số task chưa xong, cái còn lại cho phép tạm ẩn các mục đã xong khỏi danh sách. Toàn văn prompt thứ ba:

Add two new features to the app without changing the existing design or breaking any current functionality. First, add a task counter near the top that shows how many tasks are still active (not completed), and update it automatically as tasks are added, completed, or deleted. Second, add a filter toggle that lets the user switch between showing all tasks and hiding completed tasks. When completed tasks are hidden, they should stay in the data and reappear when the filter is turned off — do not delete them. Keep the current styling, layout, and all existing features (adding, categorizing, checking off, and deleting) working exactly as they do now.

Bộ đếm phải tự đổi mỗi khi ta thêm, hoàn thành hoặc xóa một task. Bộ lọc phải ẩn các mục khi được bật, nhưng những task đó phải vẫn được lưu để quay lại khi ta chuyển về danh sách đầy đủ. (Lúc nói, Mikey bảo bộ lọc ẩn "unfinished items"; prompt trên màn hình và phần demo đều là ẩn task đã xong.) Anh cũng nói rất rõ rằng layout, thiết kế và các nút điều khiển gốc phải giữ nguyên. Anh gửi đi, rồi mở preview khi Codex cập nhật xong.

Bắt đầu với bộ đếm: anh thêm một task và con số tăng lên. Thêm một task nữa, rồi đánh dấu một task là xong, và số đếm tự giảm. Tức là nó cập nhật dựa trên các task còn active, không hiển thị một con số cố định.

Tiếp theo là bộ lọc. Danh sách khi đó có cả task active lẫn task đã xong. Anh bật tùy chọn ẩn các mục đã xong, và chỉ còn các task chưa xong hiện ra. Khi tắt đi, các task đã xong xuất hiện lại, vì chúng chưa bao giờ bị xóa.

Thiết kế vẫn y như cũ, và các thao tác gốc vẫn chạy: ta vẫn thêm task, gán category, hoàn thành và xóa task như trước. Nhưng giờ app cho ta cái nhìn rõ hơn về việc gì còn phải làm. Mỗi prompt thêm một lớp mới mà không thay thế phần việc trước nó. Còn một lần cập nhật cuối, rồi app sẵn sàng để publish.

11. Prompt 4: lượt polish cuối và layout responsive

App gần xong, nhưng bước cuối này là để bắt những chi tiết nhỏ dễ bị bỏ qua: khoảng cách, căn hàng, kích thước nút và cách app chạy trên mobile. Từng thứ có vẻ nhỏ, nhưng gộp lại chúng quyết định app trông hoàn chỉnh hay vẫn như bản nháp sớm. Toàn văn chỉ dẫn cuối hiện trên màn hình (giữ nguyên cả chữ "verlaps" như trên màn hình):

Do a final polish pass on the app without breaking any existing features. Refine the small visual details: consistent spacing, aligned elements, comfortable font sizes, and clean button and input styling. Most importantly, make the entire app fully responsive so it works well on mobile screens. On smaller screens, the layout should adapt cleanly — elements stack vertically as needed, cards and buttons resize to fit, tap targets stay large enough to use easily, and nothing overflows, verlaps, or gets cut off. Keep all current features working exactly as they do now: adding tasks, assigning categories, checking off, deleting, the active task counter, and the completed-task filter.

Ở đây ta yêu cầu Codex dọn những chi tiết giao diện còn lại, làm layout responsive hoàn toàn, và giữ mọi tính năng đã thêm. Codex sẽ chỉnh khoảng cách, typography, ô nhập và nút trên toàn trang. Nó cũng đảm bảo layout tự thích nghi trên màn hình nhỏ: các phần tử xếp chồng khi cần, nút điều khiển vẫn dễ bấm, và không có gì chồng lên nhau hay tràn ra ngoài màn hình.

Khi cập nhật xong, Mikey mở preview desktop trước để xem bố cục tổng thể. Nội dung được sắp đều hơn, các nút điều khiển vẫn thẳng hàng, và các phần khác nhau của trang giờ theo cùng một hệ thống giao diện.

Anh chạy lại toàn bộ app một lần trước khi publish. Tạo một task, gán category, thêm một mục khác. Đánh dấu một task xong thì nó bị gạch ngang và bộ đếm active cập nhật. Xóa một task thì nó biến khỏi danh sách, còn bộ lọc ẩn các mục đã xong rồi đưa chúng trở lại khi tắt.

Mọi thứ build qua bốn prompt giờ chạy cùng nhau trong một app responsive. Ta bắt đầu với một mô tả đơn giản, thêm thiết kế và các chức năng bổ sung theo từng chặng, rồi tới được một phiên bản hoàn chỉnh mà không tự viết dòng code nào. Bước duy nhất còn lại là đưa nó lên mạng để ai cũng mở và dùng được.

12. Publish lên một URL công khai bằng Sites

Mikey nói một project chỉ thật sự hữu ích bên ngoài workspace của bạn khi người khác mở được nó. Tới bước này, mọi thứ vẫn chạy bên trong Codex. Bước cuối là biến task manager thành một website công khai.

Sites lo quá trình publish. Anh chỉ cần nhắc tới @Sites trong prompt rồi bảo Codex đưa phiên bản đang có lên mạng. Từ đó, nó chuẩn bị bản build, host app, và tạo một URL công khai, không cần tài khoản hosting riêng, không cần dựng server hay upload file bằng tay. Prompt publish hiện trên màn hình:

@Sites Publish this task manager app as a live website. Build the final version, host it, and deploy it to a live public URL that anyone can open in a browser. Keep all features working exactly as they are now.

Chỉ dẫn này bảo Sites publish task manager trong khi giữ mọi tính năng đã build. Anh gửi đi, và Codex bắt đầu chuẩn bị rồi deploy app. Trên màn hình, Codex kể lại một trục trặc giữa chừng: bản deploy ban đầu báo thành công nhưng runtime công khai không ổn định, host không cung cấp asset binding cho worker, nên nó chuyển sang trả về một bản HTML đóng gói sẵn để trang live không còn phụ thuộc vào binding bị thiếu.

Khi quá trình kết thúc, một URL live có đuôi chatgpt.site hiện ra. Trước khi chia sẻ, Mikey mở phần cài đặt quyền truy cập và chọn "anyone on the internet", để link mở được mà không cần xin quyền. Anh cũng muốn test bên ngoài workspace của Codex: anh copy địa chỉ, mở một tab trình duyệt mới và dán vào. Task manager tải lên như một website thật, không còn nằm trong preview panel.

Anh chạy lại các tính năng chính một lần nữa: thêm một task, gán category, đánh dấu xong. Bộ đếm active cập nhật, bộ lọc ẩn mục đã xong rồi đưa nó trở lại khi chuyển về danh sách đầy đủ. Mọi thứ chạy qua link công khai y như trong preview.

Tóm lại: bắt đầu từ một prompt box trống, ta xây cả task manager bằng chỉ dẫn tiếng Anh thông thường. Codex tạo app, Sites lo phần publish, và project hoàn chỉnh giờ đã live, sẵn sàng để chia sẻ.

13. Điều cần giữ lại: đi từng bước, mỗi prompt một việc

Sau tất cả những điều đó, bạn thật sự nên nhớ gì? Mikey nói chắc chắn không phải từng chữ của mọi prompt. Phần hữu ích là hiểu cách ta đi từ một ý tưởng đơn giản tới một app chạy được, bằng cách xử lý một bước rõ ràng mỗi lần.

Codex làm nhiều hơn là đưa code để copy sang chỗ khác. Nó làm việc trực tiếp trên project, tạo file, dựng giao diện, thêm tính năng, và giúp publish app hoàn chỉnh. Ta mô tả điều mình muốn bằng ngôn ngữ thường, còn Codex lo phần kỹ thuật phía sau.

Phần build diễn ra qua bốn prompt:

1. Prompt thứ nhất tạo task manager cơ bản: thêm task, gán category, đánh dấu hoàn thành và xóa.
2. Prompt thứ hai cải thiện thiết kế giao diện mà vẫn giữ các chức năng đó.
3. Prompt thứ ba thêm bộ đếm task active và bộ lọc task đã xong.
4. Prompt thứ tư dọn các chi tiết nhỏ và đảm bảo layout chạy đúng trên màn hình mobile.

Thứ làm quá trình dễ kiểm soát là ta không bao giờ cố nhét cả project vào một chỉ dẫn khổng lồ. Ta đưa Codex một điểm xuất phát vững, kiểm tra kết quả, rồi quyết định cái gì cần chú ý tiếp theo. Mỗi prompt có một nhiệm vụ cụ thể, nên dễ thấy cái gì đã đổi và xác nhận phần còn lại của app vẫn chạy.

Đó mới là kỹ năng chính cần mang về từ bài này, theo Mikey. Bạn không cần viết một prompt hoàn hảo trước khi bắt đầu. Hãy bắt đầu với một phiên bản cơ bản để Codex build, rồi dùng kết quả để dẫn đường cho chỉ dẫn tiếp theo. Một khi app đã ở trước mặt, nhận ra cái gì cần cải thiện dễ hơn nhiều.

14. Feedback cụ thể và ranh giới rõ ràng

Feedback rõ ràng cũng cho bạn quyền kiểm soát kết quả tốt hơn. Khi bản thiết kế đầu trông hơi trơn, ta chỉ ra đúng các vấn đề thay vì bảo Codex làm cho đẹp hơn theo kiểu nào nó muốn. Vì ta nêu nền trắng, các task không tách nhau, thiếu màu và bố cục chật, Codex có một hướng cụ thể để đi thay vì phải đoán.

Cách đó cũng hiệu quả khi thêm bộ đếm và bộ lọc. Ta giải thích mỗi tính năng phải làm gì: khi nào bộ đếm cập nhật, và task đã xong phải hành xử thế nào khi bị ẩn. Ta cũng bảo Codex giữ nguyên thiết kế và chức năng đang có, và theo Mikey, những ranh giới đó thật sự giúp thêm tính năng mới mà không làm hỏng thứ đang chạy.

15. Đem cùng quy trình sang ý tưởng của bạn

Task manager này chỉ là một trong những project có thể build theo cách này. Mikey gợi ý dùng cùng quy trình cho một habit tracker, một công cụ ngân sách, một sổ ghi chi tiêu, có thể là một app sắp xếp công thức nấu ăn, hay một trang đặt lịch đơn giản. Một ý tưởng tập trung, có mục đích rõ ràng thường là chỗ dễ bắt đầu nhất, vì bạn build phiên bản lõi trước rồi mở rộng dần.

Vậy hãy chọn thứ gì đó bạn thật sự sẽ dùng. Mô tả phiên bản đơn giản nhất, test thứ Codex tạo ra, rồi đi qua từng thay đổi tiếp theo, mỗi lần một cái. Bạn có thể cải thiện thiết kế, thêm tính năng hữu ích, kiểm tra layout mobile, và publish phiên bản cuối khi mọi thứ đã chạy cùng nhau.

Mikey nhắc lại, theo video đăng ngày 19/09/2026: Codex có sẵn trong ChatGPT Plus và các gói cao hơn, nên không cần cài gì thêm trước khi tự thử. Mở ChatGPT, chuyển sang Codex, rồi mô tả phiên bản thứ nhất của app bạn muốn tạo.

Trong video này, anh bắt đầu với một prompt box trống và kết thúc với một task manager hoàn chỉnh chạy trên một URL công khai. Không dòng code nào được viết tay, cũng không có phần dựng hosting riêng nào phải quản lý. Cả app thành hình qua các chỉ dẫn rõ ràng, qua test, và qua vài lần cập nhật có trọng tâm. Giờ hãy lấy cùng quy trình đó dùng cho ý tưởng của riêng bạn. Mikey cảm ơn người xem đã dành thời gian, và hẹn gặp ở lần build sau.