Tuần trước, tôi được thầy Lý Kỳ Cương mời tham gia một buổi phỏng vấn chia sẻ riêng về AI và tổ chức.
Sau buổi đó, tôi nhận thấy câu hỏi được hỏi nhiều nhất là: "PPT đó làm bằng gì vậy? Có thể open-source được không?"
Tôi không ngờ rằng sản phẩm phụ lại trở thành sản phẩm chính.
Thế là tôi quyết định open-source nó, đặt tên là guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).
Bài viết hôm nay sẽ kể về Skill này trông như thế nào và tại sao, một người đã làm thiết kế suốt mười năm như tôi, lại thấy nó đẹp.
Giao Diện Trông Như Thế Nào
Khi mở một file PPT do Skill tạo ra, ấn tượng đầu tiên thường là: trông chẳng giống AI làm tí nào.
Vài đặc điểm trực quan:
- Trang bìa: Nền màu mực + tiêu đề chính kiểu serif, phía sau có hiệu ứng WebGL dạng lỏng chảy nhẹ nhàng.
- Nội dung: Màu nền chuyển sang trắng giấy, chữ màu mực in lên trên, giống như một tạp chí in đang mở ra.
- Chuyển trang: Trượt ngang trái-phải, hỗ trợ bàn phím, con lăn chuột và cử chỉ chạm – không phải kiểu "slide kế tiếp" của PowerPoint.
- Siêu dữ liệu: Mỗi trang có chữ monospace nhỏ ở bốn góc, ghi những thứ như "Act II · 15 / 25", giống số trang của báo in.
Tôi đặt tên cho phong cách thị giác này là: "Tạp Chí Điện Tử × Mực Điện Tử."
Cảm hứng đến từ truyền thống bố cục của các tạp chí in như Monocle, The Guardian và NYT, kết hợp với thẩm mỹ đọc sách của giấy điện tử Kindle, và được kết nối bằng cú pháp tương tác Web hiện đại.
Nó Có Thể Làm Gì
Skill hiện cung cấp 10 bố cục trang, 5 bảng màu chủ đề và một bộ tương tác chuyển trang hoàn chỉnh.
10 Bố Cục bao phủ gần như mọi loại trang dùng trong một buổi chia sẻ 15-30 trang:
Trang bìa mở đầu, ngắt chương, poster dữ liệu, chữ trái-ảnh phải, lưới ảnh, quy trình đường ống, câu hỏi gây cấn, trích dẫn lớn, So sánh Trước/Sau và bố cục hỗn hợp chữ-ảnh.
Mỗi bố cục là một khung HTML có thể dán trực tiếp; chỉ cần thay chữ và ảnh là dùng được.
5 Chủ Đề tương ứng với các bối cảnh khác nhau:
- Ink Classic — Ra mắt doanh nghiệp, mặc định chung
- Indigo Porcelain — Công nghệ, nghiên cứu, hội nghị AI
- Forest Ink — Thiên nhiên, bền vững, nhân văn
- Kraft Paper — Hoài niệm, văn học, tạp chí độc lập
- Dune — Nghệ thuật, thiết kế, sáng tạo
Mỗi chủ đề chỉ khác nhau ở bộ giá trị của 6 biến CSS. Đổi chủ đề chỉ cần thay 6 dòng mã đó trong :root.
Người dùng không được phép tự chỉnh mã màu hex; tôi sẽ giải thích lý do sau.
Tương tác chuyển trang hỗ trợ phím mũi tên trái/phải, con lăn chuột, vuốt chạm, nhảy chấm ở cuối trang và phím ESC để mở chỉ mục hình thu nhỏ.
Mục tiêu là càng gần trải nghiệm lật tạp chí thật trong trình duyệt càng tốt.
Đầu ra là một file HTML đơn lẻ. Nhấp đúp để xem trong trình duyệt. Gửi cho người khác chỉ một file, khỏi lo font hay hiệu ứng bị hỏng trên máy người khác.
Cách Sử Dụng
Thực ra, giá trị thực sự của Skill này không nằm ở bản thân template, mà ở chỗ nó định nghĩa một giao diện cho việc Con người × AI cộng tác làm PPT.
Đây là ba điều tôi thấy đáng nói nhất sau khi tự dùng một tuần.
Làm rõ 6 điều này với AI trước
Khi đã cài Skill, bạn chỉ cần nói "Giúp tôi làm một PPT kiểu tạp chí," và Claude sẽ chủ động hỏi bạn 6 câu:
- Đối tượng và bối cảnh là gì? (Nội bộ ngành / Ra mắt doanh nghiệp / Chia sẻ riêng)
- Buổi chia sẻ dài bao lâu? (15 phút ≈ 10 trang, 30 phút ≈ 20 trang)
- Có tài liệu gốc không? (Tài liệu, dữ liệu, PPT cũ, link bài viết)
- Có ảnh không và ảnh ở đâu?
- Bạn muốn chủ đề màu nào? (Chọn từ 5 bảng màu có sẵn)
- Có ràng buộc cứng nào không? (Phải có dữ liệu XX / Không được hiển thị YY)
Bạn không cần nói hết một lúc; nó sẽ hỏi từng cái. Sau khi trả lời, nó sẽ đưa cho bạn một dàn bài và một bảng nhịp chủ đề. Cân chỉnh trước, rồi mới viết code – bước này ngăn được 80% việc làm lại của tôi.
Vấn đề đau đầu nhất khi dùng AI làm PPT trước đây là nó bắt tay vào viết ngay, đến trang thứ 10 bạn mới thấy hướng sai. Quá trình làm rõ này chuyển việc "cân chỉnh" lên đầu.
Cách chèn ảnh
Ảnh được đặt trong thư mục images/ cùng cấp với index.html, với quy tắc đặt tên cụ thể:
1ppt/2├── index.html3└── images/4 ├── 01-cover.jpg5 ├── 03-figma.png6 └── 05-dashboard.png
- Số trang được đệm số 0 + ngữ nghĩa tiếng Anh – 01 thay vì 1, cover thay vì fengmian. Việc này giúp sắp xếp dễ dàng và AI tham chiếu rõ ràng.
- Dùng JPG cho ảnh chụp, PNG cho ảnh chụp màn hình – Ảnh chụp màn hình có chữ; PNG giữ chữ sắc nét.
- Chiều rộng ảnh tối thiểu 1600px – Để không bị mờ khi chiếu lên màn hình lớn.
Bạn chỉ cần nói với Claude "Trang 3 là ảnh chụp giao diện Figma," nó sẽ tự động viết thành images/03-figma.png. Bạn chỉ cần thả file cùng tên vào thư mục.
Bí quyết thay ảnh không mất chất lượng: Ghi đè cùng tên
Đây là cái hố lớn nhất tôi từng gặp – muốn đổi ảnh sau khi copy xong, rồi phải tìm kiếm và thay thế đường dẫn toàn cục, thường làm hỏng HTML.
Cách đúng chỉ một câu: Ghi đè ảnh cũ bằng ảnh mới với cùng tên, không sửa một ký tự nào trong HTML.
Tại Sao Lại Trông Như Vậy
Sau khi nói về cách dùng, hãy nói về tại sao nó lại như vậy.
Thiết kế tốt không phải bí ẩn; nó là một tập hợp các quyết định có thể phân tích. Những gì tôi làm thực chất là đưa ngôn ngữ bố cục mà ngành tạp chí đã tích lũy suốt hơn trăm năm vào HTML.
Phân chia ba cấp độ kiểu chữ
- Serif → "Ý kiến". Dùng serif cho tiêu đề chính; người đọc ngay lập tức cảm thấy "đây là câu nên được coi trọng."
- Sans-serif → "Thông tin". Mật độ cao cho phần nội dung chính, dễ đọc.
- Monospace → "Siêu dữ liệu". Số chương, ngày tháng và số trang ở đầu trang và chân trang, giống như chân trang tạp chí hoặc mã trong terminal.
Người đọc không phải suy nghĩ nhiều; mắt họ tự động biết một câu là văn bản chính hay chú thích.
Kỷ luật màu sắc
Trắng giấy, màu mực, thêm một màu nhấn là đủ.
Trắng tinh thì chói, đen tinh thì gay gắt; ngành in ấn không bao giờ làm thế, Kindle cũng không.
Trong 5 chủ đề của Skill, không có màu nền nào là #FFFFFF, không có màu chữ nào là #000000.
Mỗi bộ chỉ hiển thị 6 biến CSS, và SKILL.md nêu rõ: Người dùng không được phép tự chỉnh mã màu hex; phải chọn một trong năm bộ.
Ràng buộc càng chặt, phong cách càng ổn định. Bảo vệ thẩm mỹ quan trọng hơn việc trao quyền tự do cho người dùng.
Lưới và nhịp điệu
Lưới cố định như 7:5, 6:6, 8:4 đảm bảo trật tự trên một trang.
Các trang chính và trang phụ phải xen kẽ để đảm bảo nhịp điệu của toàn bộ bộ bài.
Một trang dày, một trang mỏng – đó là cảm giác "thở" khi lật tạp chí.
Một quy tắc cứng được viết vào Skill: hơn ba trang liên tiếp có cùng chủ đề được coi là lỗi P0.
Một PPT không có nhịp điệu chỉ là một chồng slide được dồn thành PDF.
Lời Kết
Không có quy tắc nào ở trên do tôi phát minh ra.
Tôi làm thiết kế suốt mười năm, làm UI, tương tác, hiệu ứng AI; những điều này thực chất là kiến thức phổ thông trong ngành.
Tôi chỉ viết chúng từng cái một vào SKILL.md và checklist.md để AI có thể thực thi chúng cho tôi.
Nói cách khác, Skill này là một gói nén mười năm thẩm mỹ của tôi.
Trước đây, để làm một PPT tử tế, tôi phải mất hai ngày chỉnh lưới thủ công, chọn cỡ chữ và chọn giá trị màu.
Giờ đây, tôi chỉ cần ném tài liệu cho AI, nó lắp ráp theo các quy tắc này, và tôi chỉ cần kiểm tra lại.
Chính vì thế, tôi dám open-source nó.
Các quy tắc không phải của riêng tôi; các nhà thiết kế của Monocle đã dùng chúng từ hàng chục năm trước tôi. Tôi chỉ copy chúng vào HTML năm 2026.
Skill đã có trên GitHub: github.com/op7418/guizang-ppt-skill
README có chứa "đoạn nhắc cài đặt cho AI." Sao chép và dán vào Claude Code hoặc AI Agent khác của bạn, nó sẽ tự động hoàn tất cài đặt. Sau khi cài xong, nói "Giúp tôi làm một PPT kiểu tạp chí" để kích hoạt.
Bạn cũng có thể dùng nó trong Bloome Agent, hiện đang miễn phí:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Nếu bạn thấy nội dung này hữu ích, hãy cho tôi một like hoặc chia sẻ với bạn bè cần nó nhé.
Bạn cũng có thể chia sẻ những PPT bạn đã làm bằng Skill này ở phần bình luận.
