Website Playbook là gì
“Website Playbook · Website Playbook” là một phương pháp làm việc dành cho trợ lý AI xây dựng website, phiên bản hiện tại là 2.0.1, chủ yếu được kiểm chứng trong môi trường Codex. Đây không phải là framework website, CMS hay nền tảng lưu trữ, mà là một bộ quy tắc thực thi giúp Agent hiểu đúng yêu cầu, kiểm tra bản triển khai tham khảo, bảo vệ dự án hiện có, đồng thời hoàn tất việc nghiệm thu và bàn giao.
Công cụ này phù hợp với website cá nhân, portfolio, website nghiên cứu và tổ chức, website nội dung; đồng thời có thể dùng để cải tạo hoặc sửa từng phần của website hiện có. Ngoài quy trình cốt lõi, dự án còn cung cấp 16 kinh nghiệm ẩn danh cùng hai mẫu: bản tóm tắt dự án và bàn giao website.
Năng lực cốt lõi và nguyên tắc làm việc
Giữ đúng phạm vi yêu cầu
Website Playbook yêu cầu phân biệt ba loại thông tin: yêu cầu người dùng nêu rõ, chi tiết triển khai cần thiết để hoàn thành nhiệm vụ và các đề xuất có thể thảo luận nhưng chưa được xác nhận. Cách này giúp giảm tình trạng AI tự ý thêm mục, tính năng hoặc nội dung.
Kiểm tra bản triển khai tham khảo trước
Có thể bắt đầu từ Awwwards để tìm cảm hứng thiết kế, sau đó truy cập website gốc để kiểm tra mã nguồn có thể truy cập và tương tác thực tế. Tài liệu tham khảo trực quan không nên chỉ dừng ở ảnh chụp màn hình; cần xác nhận cách menu, thao tác cuộn, hiệu ứng và hành vi responsive hoạt động.
Bảo vệ phiên bản đã được chấp thuận
Trước khi chỉnh sửa website hiện có, cần xác định đúng dự án và phiên bản cơ sở, đồng thời nhận diện nội dung cần giữ lại cũng như các thay đổi chưa được commit. Khi chưa có xác nhận, không nên ghi đè trực tiếp phiên bản đã được người dùng chấp thuận.
Nghiệm thu trải nghiệm thực tế
Nghiệm thu không chỉ là xác nhận trang có thể mở. Cần kiểm tra hiển thị trên điện thoại, thao tác bàn phím, trạng thái menu, diễn tiến hiệu ứng và trạng thái lỗi theo phạm vi nhiệm vụ, đồng thời ghi rõ hạng mục nào đã được kiểm thử thực tế và hạng mục nào chưa được xác minh.
Để lại quy trình bảo trì
Khi bàn giao website, cần nêu rõ nội dung được cập nhật ở đâu, thay đổi có hiệu lực khi nào, cách phát hành và cách khôi phục khi xảy ra sự cố. Nhờ đó, kết quả bàn giao có thể tiếp tục được bảo trì thay vì chỉ người thực hiện hiện tại mới có thể thao tác.
Chuẩn bị trước khi cài đặt
Trước khi sử dụng Skill này, cần có môi trường cục bộ hỗ trợ Skill. Dự án website cụ thể cũng cần nội dung, môi trường phát triển, quyền sử dụng công cụ và điều kiện nghiệm thu tương ứng. Vì dự án chủ yếu được kiểm chứng trong Codex, README không cam kết tương thích hoàn toàn với mọi nền tảng AI.
Bạn có thể xem ghi chú phiên bản v2.0.1, hoặc tải trực tiếp gói Skill đầy đủ v2.0.1.
Cách 1: Để Codex cài đặt Skill
Gửi chỉ dẫn dưới đây cho Codex. Chỉ dẫn đặc biệt yêu cầu kiểm tra các thay đổi tùy chỉnh trước khi xử lý phiên bản trùng tên, nhằm tránh ghi đè trực tiếp nội dung hiện có.
Sử dụng skill-installer để cài đặt Skill này từ https://github.com/7-an/website-playbook/tree/v2.0.1/skills/build-websites-v2.
Nếu đã tồn tại phiên bản cùng tên, trước tiên hãy kiểm tra và giữ lại các thay đổi tùy chỉnh của tôi, không ghi đè trực tiếp.Sau khi cài đặt xong, nên mở một tác vụ mới để gọi Skill, tránh ngữ cảnh từ cuộc trò chuyện trước ảnh hưởng đến phạm vi yêu cầu.
Cách 2: Cài đặt thủ công bằng ZIP
- Tải gói Skill đầy đủ v2.0.1.
- Giải nén tệp ZIP đã tải.
- Tìm thư mục
build-websites-v2đầy đủ. - Đặt toàn bộ thư mục vào thư mục Skill được môi trường cục bộ hỗ trợ.
- Xác nhận tất cả thư mục con và tệp đều được giữ lại.
Không chỉ sao chép
SKILL.md. Skill này còn phụ thuộc vào README, siêu dữ liệu gọi, tài liệu tham khảo và tài nguyên mẫu.
Để tìm hiểu cơ chế cài đặt và phát hiện Skill, hãy đọc tài liệu chính thức.
Tìm hiểu cấu trúc tệp dự án
skills/build-websites-v2/
├── SKILL.md # Điểm vào thực thi của Agent
├── README.md # Cài đặt, ví dụ và giới hạn năng lực
├── agents/openai.yaml # Siêu dữ liệu gọi
├── references/ # 5 tài liệu tham khảo theo nhu cầu, gồm sổ kinh nghiệm ẩn danh
└── assets/ # Mẫu bản tóm tắt dự án và bàn giao websiteSKILL.md là điểm vào thực thi của Agent, nhưng phương thức làm việc đầy đủ còn phụ thuộc vào các thư mục khác. references lưu tài liệu tham khảo được sử dụng khi cần, còn assets chứa mẫu bản tóm tắt dự án và bàn giao website.
Lần đầu gọi Website Playbook
Tên công khai của dự án là “Website Playbook”, còn tên gọi hiện tại vẫn là build-websites-v2 để tương thích với người dùng đã cài đặt. Sau khi cài đặt, có thể dùng định dạng sau trong một tác vụ mới:
Sử dụng $build-websites-v2, hãy giúp tôi tạo hoặc chỉnh sửa website.
Mục tiêu: …
Tài liệu và đường dẫn dự án hiện có: …
Website tham khảo và phần muốn học hỏi: …
Bắt buộc giữ lại: …
Phạm vi lần này: phân tích / triển khai cục bộ / phát hành.Điểm quan trọng của cấu trúc đầu vào này là tách biệt mục tiêu, vị trí dự án, đối tượng tham khảo, các hạng mục cần bảo vệ và phạm vi thực hiện. Đừng chỉ nói “hãy làm cho đẹp hơn”, mà nên chỉ rõ trang cụ thể, hiệu quả mong muốn và khu vực không được thay đổi.
Ví dụ: Tạo website portfolio
Sử dụng $build-websites-v2, hãy giúp tôi tạo website.
Mục tiêu: Tạo website portfolio cá nhân để giới thiệu các dự án nghiên cứu và tác phẩm thiết kế.
Tài liệu và đường dẫn dự án hiện có: Dự án nằm trong thư mục cục bộ được chỉ định, nội dung và tài liệu tác phẩm đã được sắp xếp.
Website tham khảo và phần muốn học hỏi: Tham khảo nhịp điệu trang chủ và bố cục danh sách dự án của website được chỉ định, không sao chép hình ảnh, phông chữ hoặc mã nguồn.
Bắt buộc giữ lại: Phần giới thiệu cá nhân và tên dự án hiện có.
Phạm vi lần này: Phân tích trước, sau đó triển khai cục bộ, không phát hành.Ví dụ: Chỉnh sửa website hiện có
Sử dụng $build-websites-v2, hãy giúp tôi chỉnh sửa website.
Mục tiêu: Khắc phục lỗi menu trên thiết bị di động không thể đóng đúng cách.
Tài liệu và đường dẫn dự án hiện có: Dự án nằm trong thư mục cục bộ được chỉ định.
Website tham khảo và phần muốn học hỏi: Không có.
Bắt buộc giữ lại: Nội dung trang chủ, kiểu điều hướng trên máy tính và các thay đổi chưa được commit hiện tại.
Phạm vi lần này: Triển khai cục bộ và nghiệm thu liên quan, không phát hành.Ví dụ thứ hai giới hạn nhiệm vụ ở việc sửa menu, không yêu cầu thiết kế lại toàn bộ website. Website Playbook hỗ trợ các nhiệm vụ cục bộ như vậy, không nhất thiết lần nào cũng phải thực hiện quy trình xây dựng website đầy đủ.
Chọn phạm vi thực hiện theo nhiệm vụ
Khi gọi, có thể xác định rõ phạm vi lần này là phân tích, triển khai cục bộ hoặc phát hành, đồng thời cũng có thể kết hợp nhiều giai đoạn.
- Chỉ phân tích: Dùng để nghiên cứu website tham khảo, hệ thống hóa yêu cầu hoặc kiểm tra dự án hiện có mà không trực tiếp sửa mã nguồn.
- Triển khai cục bộ: Chỉnh sửa website sau khi xác nhận dự án và phiên bản cơ sở, đồng thời thực hiện các kiểm tra cục bộ liên quan đến nhiệm vụ.
- Phát hành: Cần có quyền tương ứng và xác nhận nội dung bàn giao cũng như rủi ro trước khi phát hành.
- Sửa từng phần: Chỉ xử lý menu, tương tác hoặc vấn đề được chỉ định để tránh mở rộng phạm vi thay đổi.
- Khôi phục phiên bản: Xác định rõ phiên bản hoặc phiên bản cơ sở cần khôi phục, đồng thời bảo vệ các thay đổi hiện có khác.
Kỹ thuật sử dụng nâng cao
Nêu rõ “học hỏi điều gì”
Khi cung cấp website tham khảo, đừng chỉ gửi URL. Hãy nêu rõ muốn học hỏi bố cục, cấp bậc thông tin, hành vi menu, nhịp điệu hiệu ứng hay phần cụ thể nào khác. Mã nguồn công khai có thể đọc được không có nghĩa là mã nguồn, phông chữ và hình ảnh có thể tùy ý sao chép; cần tuân thủ giấy phép tương ứng trước khi tái sử dụng.
Ghi các hạng mục cần bảo vệ vào prompt
Nếu dự án đã có phiên bản được chấp thuận, hãy liệt kê rõ các trang, nội dung, tương tác và thay đổi chưa commit bắt buộc phải giữ lại. Khi cài đặt phiên bản Skill trùng tên cũng nên áp dụng nguyên tắc tương tự: kiểm tra khác biệt trước, sau đó mới quyết định cách cập nhật, thay vì ghi đè trực tiếp.
Yêu cầu ghi lại kết quả nghiệm thu
Có thể yêu cầu Agent liệt kê các hạng mục đã kiểm thử thực tế sau khi hoàn thành, chẳng hạn đã kiểm tra bố cục trên điện thoại, thao tác bàn phím, đóng mở menu, toàn bộ diễn tiến hiệu ứng và trạng thái lỗi hay chưa. Nếu không thể truy cập trình duyệt, mã nguồn tham khảo hoặc tài nguyên bên ngoài, cần đánh dấu là chưa xác minh thay vì mặc định đã đạt.
Đưa việc bàn giao vào phạm vi nhiệm vụ
Thêm yêu cầu bàn giao vào prompt để kết quả cuối cùng nêu rõ vị trí cập nhật nội dung, điều kiện có hiệu lực, các bước phát hành và cách khôi phục. Mẫu bàn giao trong dự án có thể giúp sắp xếp các thông tin này.
Phân tích trước, cấp quyền triển khai sau
Khi tài liệu tham khảo phức tạp, dự án hiện có chưa quen thuộc hoặc rủi ro thay đổi cao, có thể giới hạn nhiệm vụ ở “chỉ phân tích”. Sau khi xác nhận kết quả phân tích và phạm vi, mới bắt đầu nhiệm vụ triển khai cục bộ hoặc phát hành. Cách chia giai đoạn này giúp giảm rủi ro sửa nhầm.
Giới hạn năng lực và lưu ý
- Dự án cung cấp phương pháp làm việc và quy tắc thực thi, không thay thế nội dung website, môi trường phát triển và các quyền cần thiết.
- Dự án không bắt buộc sử dụng framework, CMS hoặc nền tảng lưu trữ cụ thể.
- Cài đặt Skill không đồng nghĩa với việc được cấp quyền triển khai website; việc phát hành vẫn phụ thuộc vào quyền thực tế.
- Khi không thể truy cập mã nguồn tham khảo hoặc trình duyệt, cần ghi lại các hạng mục chưa xác minh.
- Nội dung công khai chỉ bao gồm phương pháp chung, kinh nghiệm ẩn danh và mẫu trống; không bao gồm cuộc trò chuyện gốc, tài liệu khách hàng, tài khoản cá nhân hoặc hồ sơ kiểm toán nội bộ.
- Dự án chủ yếu được kiểm chứng trong môi trường Codex và chưa hoàn tất kiểm tra tương thích trên mọi nền tảng.
Kết luận
Giá trị của Website Playbook không nằm ở việc thay bạn lựa chọn công nghệ, mà ở việc chuẩn hóa quy trình xây dựng website bằng AI: trước tiên hiểu rõ yêu cầu và phạm vi, sau đó kiểm tra bản triển khai tham khảo, bảo vệ phiên bản hiện có, hoàn tất nghiệm thu thực tế phù hợp với nhiệm vụ, cuối cùng để lại quy trình bàn giao có thể bảo trì, phát hành và khôi phục. Sau khi cài đặt build-websites-v2, bắt đầu từ một nhiệm vụ nhỏ với mục tiêu rõ ràng thường ổn định hơn so với việc yêu cầu AI làm lại toàn bộ website ngay từ đầu.