Trang có hạn chót: bắt Claude Code thử ở ngày khác hôm nay

Nhờ AI làm một trang bán hàng thì dễ. Cái khó là trang đó đúng vào ngày khác hôm nay: sau hạn chót nó có tự đóng không, màu đã hết còn cho chọn không. Bài này kể lại một lần thử thật với Claude Code: một prompt 7 dòng, 34 phút, và cách bắt Claude tự thử trang bằng giả giờ (cho trang tin rằng hôm nay là một ngày khác). Đọc xong, bạn có prompt, có kit để làm lại, và có một thói quen dùng được cho cả file Excel hay form đăng ký.

Đề bài: trang đặt trước có hạn chót

Lách Cách là một xưởng bàn phím cơ giả, tạo ra để thực hành. Xưởng bán theo đợt: mở đặt trước, đủ người thì mới làm, làm đúng số đã đặt. Đợt 03 tên "Mây Biển", mở đặt từ 01/11/2026 10:00, đóng lúc 20/12/2026 23:59.

Đầu vào giao cho Claude chỉ có hai thứ:

• BRIEF.md: bản brief của khách (giá, màu, câu chữ phải giữ nguyên, điều cấm, ghi chú cuộc gọi với chủ xưởng).
• Thư mục anh/: 5 ảnh bàn phím chụp thật, lấy từ Unsplash và Pexels.

Đầu ra cần có: một file index.html mở bằng trình duyệt, xem tốt trên điện thoại.

Trong brief có năm chỗ dễ trượt. Người đọc kỹ đều thấy được, nhưng chúng nằm rải ở nhiều mục:

Chỗ đầu tiên là chỗ chính. Hạn chót viết bằng chữ thì lúc nào trông cũng đúng. Chỉ khi đồng hồ qua 20/12 mới biết trang có thật sự "biết" hôm nay là ngày nào.

Hai cách thử một trang

Đa số chúng ta thử trang đúng một lần: mở ra, thấy đẹp, xong. Với trang có hạn chót và tồn kho, cách đó chỉ thử được một trạng thái trong cả chuỗi.

Prompt dưới đây ép Claude đi theo cách thứ hai.

Prompt đã dùng

Dùng skill thiet-ke-web.
Đọc BRIEF.md và 5 ảnh trong thư mục anh/, chỉ dùng file trong thư mục này.
Làm trang đặt trước đợt 03 của Lách Cách trong index.html: một trang thương hiệu đầy đủ, mở bằng trình duyệt, xem tốt trên điện thoại.
Trang này đổi theo thời gian và tồn kho, nên trước khi dựng hãy liệt kê mọi trạng thái trang phải có.
Làm xong, thử từng trạng thái bằng cách giả giờ trong trình duyệt ở trước và sau hạn chót trong brief, chụp lại, và báo trạng thái nào ra gì.
Chỉ làm một hướng thiết kế, chụp – soi – sửa tối đa 2 vòng.
Tự quyết, không cần hỏi lại.

Vì sao từng dòng:

• Dòng 1 gọi skill. Skill ở đây là Agent Skills: một thư mục có file SKILL.md hướng dẫn Claude làm một loại việc. thiet-ke-web là skill thiết kế web viết sẵn, kèm trong kit, chỉ gồm file hướng dẫn .md.
• Dòng 2 giới hạn đầu vào, để Claude không lấy thứ gì ngoài brief và ảnh.
• Dòng 4 là dòng quan trọng nhất: bắt liệt kê trạng thái trước khi dựng. Dòng này không nói bẫy nằm ở đâu, chỉ đòi một thói quen.
• Dòng 5 bắt thử bằng giả giờ ở cả hai phía hạn chót, rồi báo lại từng trạng thái.
• Dòng 6 chặn việc làm quá dài: một hướng thiết kế, tối đa 2 vòng sửa.
• Dòng 7 để Claude làm một mạch, không dừng lại hỏi.

Claude làm gì trong 34 phút

Lần thử dùng app Claude trên máy tính, tab Code (Claude Code), mô hình Opus 5.5, quyền Tự động. Gửi prompt lúc 18:50:40, Claude báo xong lúc 19:24:30, tức 33,8 phút.

Diễn biến chính, theo nhật ký phiên:

1. 18:50 nạp skill thiet-ke-web, đọc brief và 5 ảnh.
2. 18:56 ghi file TRANG-THAI.md: 5 trạng thái theo giờ và suất (chưa mở, đang mở, ngày cuối, đã đóng, hết suất cả ba màu), trạng thái từng màu, 6 trạng thái của khung đặt trước. Lúc này chưa có dòng nào của trang.
3. 19:03 mới ghi index.html lần đầu.
4. 19:04 tự viết một script mở trang bằng Google Chrome chạy ngầm (headless, không hiện cửa sổ). Script thay đồng hồ của trang bằng đồng hồ giả, có thể "nhảy giờ" giữa chừng, rồi chụp ở khổ điện thoại 390 px và máy tính 1440 px.
5. Vòng 1: 19 kịch bản, 29 ảnh. Claude xem ảnh, sửa 4 lỗi (thước thời gian bị xáo trên điện thoại, nút "Báo tôi đợt sau" rơi xuống dưới mép màn hình, một dấu "·" rơi xuống dòng riêng, màu hết suất ghi "còn 0").
6. Vòng 2: 21 kịch bản, 33 ảnh, sửa thêm 3 lỗi nhỏ. Theo file kết quả của script: 0 lỗi JavaScript, 0 chỗ tràn ngang.

Các mốc giờ giả Claude dùng trải từ 01/11/2026 09:30 (trước giờ mở) tới 31/03/2027, có cả 23:58 và 23:59 ngày 20/12. Có một kịch bản đáng chú ý: mở trang lúc 23:58:56, để đồng hồ chạy qua 23:59:02, trang tự chuyển sang "đã đóng" mà không cần tải lại. Một kịch bản khác điền form lúc 23:58:30 rồi bấm sau 23:59: đơn bị từ chối.

Kết quả: một trang, hai cái đồng hồ

Claude chọn một hướng: cả trang là bộ bản vẽ kỹ thuật của đợt 03 (chủ xưởng trong brief từng là kỹ sư vẽ khuôn). Màn đầu là tờ bản vẽ xanh có sơ đồ bàn phím 75% và một "khung tên" ghi đợt, hạn chót, nút đặt.

index.html

Cùng màn đầu đó trên điện thoại, ở hai mốc giờ:

Trạng thái "đã đóng" được thiết kế hẳn hoi: một con dấu, một dòng giải thích đơn đã đặt vẫn giữ nguyên, và khung đặt trước đổi thành ô để lại số điện thoại.

Màu Cát Trắng hết suất vẫn được khoe ảnh như chủ xưởng muốn, nhưng nằm riêng một dải, có nhãn "Hết suất", và không chọn được trong khung đặt. Mỗi màu vẽ thành 60 ô, ô đặc là suất đã có người đặt.

Giá được vẽ thành "chuỗi kích thước" như trên bản vẽ: kit, switch, keycap cộng lại 5.030.000 đ; combo 4.790.000 đ ngắn hơn đúng 240.000 đ. Câu "Giá kit chưa gồm switch và keycap." đứng cạnh cả 7 chỗ có giá kit.

Khung đặt trước tính đúng luật nằm trong ghi chú cuộc gọi: chọn Combo, Xanh Rêu Biển, 2 bộ thì Tổng 9.580.000 đ, Cọc 4.790.000 đ (50% của cả hai bộ). Ô số bộ chỉ có 1 và 2, kèm câu "Tối đa 2 bộ mỗi người một đợt".

Cuối cùng Claude báo lại bằng một bảng: mỗi trạng thái, giờ giả, trang ra gì. Kèm theo là mục "Còn chưa chắc".

Chấm bằng máy: con số và chỗ máy đọc nhầm

Kit có một máy chấm tự động. Máy mở trang bằng Chrome, khóa đồng hồ trang ở hai mốc cách xa hạn chót (10/12/2026 14:00 và 21/12/2026 09:00), rồi tự bấm như người đặt hàng.

Lần chấm đầu (02/11/2026) ra 11 ĐẠT, 1 TRƯỢT, 2 NGHI. NGHI nghĩa là máy không chắc, người chấm phải xem lại. Xem lại thì cả ba mục không đạt đều do máy:

• Ca 6 (NGHI): máy thấy một liên kết còn chữ "đặt trước". Đó là liên kết "Bỏ qua, tới khung đặt trước" dành cho người dùng bàn phím, không phải nút đặt. Máy thử đặt sau hạn: không đặt được.
• Tập số tiền (TRƯỢT): máy đọc dòng "Hôm nay 10/12/2026" nằm ngay trên chữ "Đặt trước" thành số tiền "2.026 đ" (năm 2026 cộng chữ Đ ở dòng sau). Các số còn lại ngoài danh sách brief đều tính đúng từ brief: 5.030.000 (mua lẻ đủ bộ), 9.580.000 và 4.790.000 (ví dụ 2 bộ combo), 1.725.000 (cọc kit).
• Ảnh (NGHI): máy báo hai ảnh "hỏng". Thật ra đó là ảnh tải lười (chỉ tải khi cuộn tới), máy chưa cuộn tới.

Máy chấm trong kit đã được sửa cả hai chỗ đọc nhầm ngay sau lần chấm này. Chạy lại trên cùng trang: 12 ĐẠT, 0 TRƯỢT, 2 NGHI (ca 6 như trên, và tập số tiền chỉ còn các số tính được từ brief, máy để người chấm xem có bịa không).

Máy chấm thứ hai đọc nhật ký phiên để chấm cách làm: có gọi skill, có liệt kê trạng thái trước khi ghi trang, có giả giờ hai phía hạn chót, có chụp và sửa sau khi chụp. Lần chấm đầu báo trượt mục "chụp trang", vì máy chỉ đếm ảnh chụp bằng trình duyệt có sẵn trong app, còn Claude chụp bằng Chrome chạy ngầm qua script tự viết. Bản đã sửa đếm cả cách này: 9/9 mục ĐẠT.

Chỗ chưa ổn, nói thật

• Form chỉ là mô phỏng. Đơn và số điện thoại chỉ lưu trên trình duyệt của người đặt, chưa gửi tới xưởng; giới hạn 2 bộ cũng chỉ đếm được trên một máy. Brief không cho máy chủ, nên muốn dùng thật phải nối thêm. Claude tự ghi điều này ở mục "Còn chưa chắc".
• Một chỗ chữ bị đè. Trên thước thời gian bản máy tính, đúng ngày 20/12 thì vạch "Hôm nay" đè lên chữ "Đóng đặt 20/12". Claude thấy, ghi lại, nhưng không sửa vì đã hết 2 vòng.
• Lệch một dòng prompt. Prompt dặn "chỉ dùng file trong thư mục này", nhưng Claude chép hai font (Bricolage Grotesque, Hanken Grotesk, giấy phép OFL) từ một kho chữ trên máy vào thư mục fonts/. Skill thiet-ke-web có nhắc tới kho chữ đó, nên Claude đi tìm. Claude có khai việc này trong câu trả lời cuối. Máy bạn không có kho chữ đó thì Claude sẽ phải chọn font theo cách khác; phần này chưa thử.
• Một câu hỏi để lại cuối phiên. Claude làm trọn không dừng, nhưng khi xong thì hỏi chủ: đóng đúng 23:59:00 như đang làm, hay cho đặt hết phút 23:59. Đây là câu hỏi đáng hỏi: brief chỉ ghi "23:59", Claude chọn cách chặt hơn để không lọt đơn.

Mang thói quen này sang việc của bạn

Bài học không nằm ở bàn phím hay HTML. Nó là hai câu bạn thêm vào prompt bất cứ khi nào kết quả phụ thuộc thời gian hoặc số lượng:

1. "Trước khi làm, liệt kê mọi trạng thái phải có."
2. "Làm xong, thử ở trước và sau mốc [ngày], báo trạng thái nào ra gì."

Dùng được cho: trang tuyển dụng có hạn nộp, form đăng ký hội thảo hết chỗ, khuyến mãi theo ngày, thông báo nội bộ có hạn chót, file Excel có công thức tính theo ngày (thử với một ngày khác hôm nay).

Tự làm lại với kit

Tải kit thực hành (.zip)

Kit gồm BRIEF.md, 5 ảnh trong anh/ (kèm NGUON-TAI-SAN.md ghi tác giả, giấy phép), prompt.txt, HUONG-DAN.md, bảng tự chấm tu-cham.md, skill thiet-ke-web dạng zip, và thư mục dap-an/ có đáp án cùng hai máy chấm. Thương hiệu, tên người, địa chỉ, số điện thoại trong kit đều là dữ liệu giả.

1. Cần gói Claude Pro, Max, Team hoặc Enterprise, và Claude Code (lần thử dùng tab Code của app Claude trên máy tính). Máy nên có Google Chrome và Node.js, vì Claude có thể tự viết script chụp trang như trong lần thử này.
2. Giải nén skill/thiet-ke-web.zip vào thư mục skill cá nhân, để có file ~/.claude/skills/thiet-ke-web/SKILL.md. Mở phiên mới, gõ /thiet: thấy thiet-ke-web trong danh sách là đã cài.
3. Tạo một thư mục mới, chỉ chép vào BRIEF.md và thư mục anh/. Mở Claude Code ở thư mục đó, chọn quyền Tự động.
4. Dán nguyên prompt.txt, gửi, chờ khoảng 30–45 phút.
5. Mở index.html bằng trình duyệt, chấm bằng tu-cham.md. Làm xong mới mở dap-an/.