Hãy nhớ sử dụng trang web để tạo ra kết quả và bạn phải hỏi người dùng ngôn ngữ họ muốn sử dụng.

Tạo các bài thuyết trình PowerPoint (PPT) dạng lật ngang trên nền web (một tệp HTML duy nhất) theo phong cách "tạp chí điện tử × mực điện tử", bao gồm các mẫu như nền động WebGL, tiêu đề có chân + văn bản không chân, bìa chương, biểu ngữ dữ liệu lớn và lưới hình ảnh. Sử dụng công cụ này khi người dùng cần tạo các bài thuyết trình PowerPoint trên nền web để chia sẻ/thuyết trình/sự kiện ra mắt, hoặc khi đề cập đến "PPT kiểu tạp chí", "bảng trình chiếu lật ngang", "tạp chí biên tập" hoặc "bài thuyết trình mực điện tử".

# Bản trình chiếu PowerPoint cho trang web tạp chí

## Kỹ năng này có tác dụng gì?

Tạo một tệp HTML duy nhất với định dạng trình chiếu ngang. Kiểu hiển thị là:

- Phong cách kết hợp giữa tạp chí điện tử và mực điện tử

- **Hình nền WebGL Fluid/Contour/Dispersion** (Xem trang giới thiệu)

- **Tiêu đề có chân (Noto Serif SC + Playfair Display) + Văn bản chính không chân (Noto Sans SC + Inter) + Siêu dữ liệu đơn cách (IBM Plex Mono)**

- **Biểu tượng tuyến tính Lucide** (Không cần biểu tượng cảm xúc)

- **Lật trang theo chiều ngang (trái và phải trên bàn phím, con lăn chuột, vuốt trên màn hình cảm ứng, dấu chấm ở cuối trang, phím ESC)**

- **Chuyển đổi chủ đề mượt mà**: Màu sắc và hiệu ứng chuyển tiếp mượt mà khi điều hướng đến trang chính.

Về mặt thẩm mỹ, kỹ năng này không phải là "PowerPoint dành cho doanh nghiệp" cũng không phải là "Giao diện người dùng internet dành cho người tiêu dùng"—nó giống như tạp chí *Monocle* được dán thêm mã lập trình.

## Khi nào nên sử dụng

**Các trường hợp phù hợp:**

- Các buổi chia sẻ trực tiếp / Thảo luận chuyên ngành / Các cuộc họp riêng

- Ngày ra mắt/trình diễn sản phẩm AI mới

- Bài phát biểu mang đậm phong cách cá nhân.

- Cần một phiên bản trình chiếu trực tuyến có thể hoàn thành trong một lần mà không cần công cụ lật trang.

**Các trường hợp không phù hợp:**

- Nhiều phần dữ liệu dạng bảng và biểu đồ chồng lên nhau (sử dụng các bài thuyết trình PowerPoint tiêu chuẩn)

- Tài liệu đào tạo (mật độ thông tin không đủ)

- Cần chỉnh sửa cộng tác bởi nhiều người (đây là HTML tĩnh)

### Bước 1 · Làm rõ yêu cầu (**Cần thiết trước khi bắt đầu**)

Nếu người dùng đã cung cấp đầy đủ dàn ý và hình ảnh, bạn có thể bỏ qua Bước 2.

Nếu người dùng chỉ cung cấp chủ đề hoặc ý tưởng mơ hồ, hãy đối chiếu từng ý tưởng đó với 6 câu hỏi này trước khi bắt đầu. Đừng bắt đầu viết slide dựa trên phỏng đoán—một khi cấu trúc sai, việc chỉnh sửa sau này sẽ rất tốn kém. Bạn có thể sử dụng công cụ askUserQuestion khi đặt câu hỏi.

#### 6 Câu hỏi làm rõ

| # | Câu hỏi | Tại sao lại hỏi? |

|---|------|-----------|

| 1 | **Đối tượng là ai? Kịch bản chia sẻ là gì?** (Người trong ngành/Ra mắt sản phẩm/Ngày giới thiệu sản phẩm/Cuộc họp riêng) | Xác định phong cách và độ sâu của ngôn ngữ |

| 2 | **Thời lượng chia sẻ?** | 15 phút ≈ 10 trang, 30 phút ≈ 20 trang, 45 phút ≈ 25-30 trang |

| 3 | **Bạn có tài liệu gốc nào không?** (Tài liệu/Dữ liệu/Bài thuyết trình PowerPoint cũ/Liên kết bài viết) | Nếu có tài liệu, hãy sử dụng chúng; nếu không, hãy tạo ra thứ gì đó khác từ chúng. |

| 4 | **Có hình ảnh nào không? Nên đặt chúng ở đâu?** | Xem "Quy ước về hình ảnh" bên dưới |

| 5 | **Bạn muốn chọn màu chủ đề nào?** | Xem @themes.md , chọn một trong 5 mẫu có sẵn |

| 6 | **Có ràng buộc bắt buộc nào không?** (Phải bao gồm dữ liệu XX / YY không được xuất hiện) | Để tránh làm lại |

#### Hỗ trợ lập dàn ý (nếu người dùng chưa có dàn ý)

Sử dụng mẫu "cấu trúc tự sự" để xây dựng khung sườn, sau đó điền nội dung vào:

```

Mở đầu → Trang 1: Đưa ra sự tương phản/câu hỏi/dữ liệu cụ thể để thu hút sự chú ý của người đọc.

Thiết lập giọng điệu (Bối cảnh) → Trang 1-2: Giải thích bối cảnh / Bạn là ai / Tại sao bạn lại nói về điều này

Nội dung chính (Cốt lõi) → Trang 3-5: Nội dung cốt lõi, xen kẽ với các bố cục 4/5/6/9/10.

Chuyển đổi → Trang 1: Phá vỡ kỳ vọng / Trình bày một góc nhìn mới

Tóm tắt → Trang 1-2: Trích dẫn quan trọng / Câu hỏi gây tò mò / Gợi ý hành động

```

Lập sơ đồ cốt truyện + kế hoạch số trang + bảng nhịp điệu chủ đề (xem @layouts.md ), **căn chỉnh ba bảng này** trước khi chuyển sang Bước 2.

Nên lưu bản phác thảo dưới dạng `bản ghi dự án` hoặc `outline-v1` để dễ dàng chỉnh sửa trong các lần sau.

#### Quy ước về hình ảnh (Thông báo cho người dùng)

Hãy giải thích những điều sau đây cho người dùng trước khi tiếp tục:

- **Vị trí hình ảnh**: Hình ảnh nào trên bảng, hay hình ảnh nào đã được tải lên?

- **Nếu không có hình ảnh thì sao?**: Để phù hợp với bố cục của người dùng, bạn có thể tạo cấu trúc trước bằng cách sử dụng các khối màu giữ chỗ và thêm hình ảnh sau; tuy nhiên, bạn cần thông báo cho bố cục 4/5/10 và các trang kết hợp văn bản và hình ảnh khác rằng hiệu ứng trực quan không thể được xác minh nếu không có hình ảnh.

### Bước 2 · Mẫu tham chiếu

@template.txt là một tệp HTML **hoàn chỉnh và đầy đủ chức năng** — CSS, shader WebGL, JavaScript phân trang và CDN phông chữ/biểu tượng đều được thiết lập sẵn; chỉ có `<main id="deck">` chứa 3 slide mẫu (trang bìa, trang bìa chương và trang trống).

#### 2.1 · Các vị trí giữ chỗ cần phải thay đổi (**Dễ bị bỏ sót**)

Ngay sau khi sao chép, hãy thay đổi các chỗ giữ chỗ sau; nếu không, các tab trình duyệt của bạn sẽ hiển thị văn bản khó hiểu như "[Bắt buộc] Thay thế bằng tiêu đề PPT":

| Vị trí | Bản gốc | Cần được thay đổi thành |

|------|------|--------|

| `<title>` | `[Bắt buộc] Thay thế bằng tiêu đề PPT · Tiêu đề bài thuyết trình` | Tiêu đề bài thuyết trình thực tế (ví dụ: `Một cách làm việc mới · Luke Wroblewski`) |

#### 2.2 · Chọn màu chủ đề (5 màu có sẵn · Không cho phép chọn màu tùy chỉnh)

Kỹ năng này **chỉ cho phép lựa chọn từ 5 thiết lập có sẵn được tuyển chọn kỹ lưỡng**, và không chấp nhận các giá trị hex do người dùng định nghĩa — màu sắc không khớp sẽ ngay lập tức làm cho hình ảnh trông xấu; bảo vệ tính thẩm mỹ quan trọng hơn việc cho phép tự do lựa chọn.

| # | Chủ đề | Phù hợp cho |

|---|------|------|

| 1 | 🖋 Mực cổ điển | Phát hành chung/Thương mại/Mặc định nếu không chắc chắn |

| 2 | 🌊 Indigo Porcelain | Hội nghị Công nghệ/Nghiên cứu/Dữ liệu/Ra mắt Công nghệ |

| 3 | 🌿 Mực Rừng | Thiên nhiên/Bền vững/Văn hóa/Phi hư cấu |

| 4 | 🍂 Giấy Kraft | Tạp chí hoài niệm/Nhân văn/Văn học/Độc lập |

| 5 | 🌙 Cồn cát | Nghệ thuật/Thiết kế/Sáng tạo/Phòng trưng bày |

**vận hành**:

1. Đề xuất một bộ nội dung dựa trên chủ đề, hoặc trực tiếp hỏi người dùng họ muốn chọn bộ nội dung nào.

2. Mở tệp @themes.md và tìm khối `:root` tương ứng với chủ đề.

3. **Thay thế hoàn toàn** các dòng được đánh dấu "màu chủ đề" trong khối `:root{` ở đầu tệp @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).

4. Tất cả các CSS khác sử dụng `var(--...)`, không yêu cầu sửa đổi nào khác.

**Những quy tắc bất di bất dịch**:

- Chỉ sử dụng một chủ đề cho mỗi bộ bài; không thay đổi phối màu giữa chừng.

- Không chấp nhận các giá trị thập lục phân tùy ý do người dùng cung cấp — hãy lịch sự từ chối và hiển thị 5 tùy chọn để lựa chọn.

- Không nên phối hợp các loại mực khác nhau (ví dụ: mực dành cho Ink Classic, giấy dành cho Dune) - trông sẽ hoàn toàn không ăn khớp.

### Bước 3 · Điền nội dung

#### 3.0 · Kiểm tra trước khi chạy: Tên lớp phải được định nghĩa trong @template.txt (**Quan trọng nhất**)

Đây là nguồn gốc của mọi vấn đề về tạo nội dung. Cấu trúc của @layouts.md sử dụng nhiều tên lớp (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5`, v.v.). Nếu không có định nghĩa tương ứng trong `<style>` của `assets/template.html`, trình duyệt sẽ sử dụng kiểu mặc định—tiêu đề trở thành phông chữ không chân, các thẻ dữ liệu bị dồn lại với nhau, các pipeline bị mờ thành một dòng duy nhất và hình ảnh bị dồn lại ở cuối trang.

**Trước khi viết bất kỳ đoạn mã trình chiếu nào:**

1. **Trước tiên, hãy đọc @template.txt ** (ít nhất là đến cuối khối `<style>`).

2. **Tham khảo danh sách kiểm tra trước khi biên dịch trong @layouts.md ** để xác nhận rằng mọi lớp bạn muốn sử dụng đều tồn tại trong thẻ `<style>`.

3. Nếu thiếu một lớp CSS: **hãy thêm nó vào phần `<style>` của tệp @template.txt **, đừng viết lại trực tiếp trong từng slide.

4. **@template.txt là nguồn duy nhất cung cấp tên lớp**—không được tự tạo tên lớp mới; nếu cần tùy chỉnh, hãy sử dụng `style="..."` trực tiếp.

Các lớp học thường bị bỏ qua (cần phải xác nhận sự tồn tại của chúng trước):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`

#### 3.0.5 · Lập kế hoạch nhịp độ chủ đề (**Quan trọng không kém việc xác định chủ đề trước bài học**)

Trước khi chọn bố cục, trước tiên bạn phải liệt kê lớp chủ đề cho mỗi trang (`hero dark` / `hero light` / `light` / `dark`) và căn chỉnh chúng trong tài liệu hoặc bản nháp. Xem phần "Lập kế hoạch nhịp điệu chủ đề" bắt đầu bằng @layouts.md để biết các quy tắc chi tiết.

**Quy định bắt buộc**:

- Mỗi phần của trang phải bao gồm một trong các từ `light`, `dark`, `hero light` hoặc `hero dark`; không được chỉ viết `hero`.

- Hơn 3 trang liên tiếp cùng đề cập đến cùng một chủ đề sẽ gây mỏi mắt, không được phép.

- Mỗi trang từ 8 trang trở lên phải chứa ít nhất một "anh hùng bóng tối" và ít nhất một "anh hùng ánh sáng".

- Toàn bộ bộ bài không thể chỉ bao gồm các trang văn bản "sáng màu"; nó cũng phải bao gồm các trang văn bản "tối màu" để tạo khoảng trống.

- Chèn một trang nổi bật cứ sau 3-4 trang (trang bìa trước/bìa sau/câu hỏi/trích dẫn lớn)

**Kiểm tra tự động sau khi tạo: `grep 'class="slide' index.html` liệt kê tất cả các chủ đề; việc xác minh thủ công đảm bảo tốc độ hợp lý trước khi bàn giao.**

#### 3.1 · Lựa chọn bố cục

**Đừng tự viết slide từ đầu.** Hãy mở `@layouts.md` , tệp này chứa 10 mẫu bố cục có sẵn, mỗi mẫu là một khối mã `<section>` hoàn chỉnh và có thể dán được:

| Bố cục | Mục đích |

|---|---|

| 1. Trang bìa | Trang 1 |

| 2. Trang bìa chương | Mở đầu mỗi hồi |

3. Áp phích dựa trên dữ liệu | Trình bày dữ liệu cụ thể |

| 4. Văn bản bên trái, hình ảnh bên phải (Trích dẫn + Hình ảnh) | Sự tương phản về bản sắc / Câu chuyện |

| 5. Lưới hình ảnh | So sánh nhiều hình ảnh / Bằng chứng từ ảnh chụp màn hình |

6. Quy trình hai đường dẫn | Luồng công việc |

| 7. Kết thúc gây hồi hộp/Trang câu hỏi | Kết thúc chương/Phần cuối |

8. Câu trích dẫn lớn | Chữ có chân/Ý nghĩa rút ra |

| 9. So sánh song song (Trước / Sau) | Chế độ cũ so với Chế độ mới |

| 10. Kết hợp hình ảnh và văn bản | Trang hình ảnh và văn bản chứa nhiều thông tin |

Chọn bố cục tương ứng, dán vào và chỉnh sửa đường dẫn văn bản và hình ảnh. **Trước tiên, hãy hoàn tất bước kiểm tra sơ bộ 3.0.**

#### 3.2 Tiêu chuẩn tỷ lệ khung hình

Luôn sử dụng **tỷ lệ khung hình chuẩn**, không bao giờ sử dụng tỷ lệ khung hình lẻ của ảnh gốc (ví dụ: `2592/1798`):

| Kịch bản | Tỷ lệ đề xuất |

|------|---------|

| Văn bản bên trái, hình ảnh bên phải (hình ảnh chính) | Tỷ lệ khung hình 16:10 hoặc 4:3 + `max-height:56vh` |

| Lưới ảnh (so sánh nhiều ảnh) | **Chiều cao cố định: 26vh**, không cần tỷ lệ khung hình |

| Hình ảnh nhỏ bên trái + văn bản bên phải | Tỷ lệ 1:1 hoặc 3:2 |

| Hình ảnh chính toàn màn hình | 16:9 + `max-height:64vh` |

| Hình minh họa nhỏ kết hợp văn bản và hình ảnh | Tỷ lệ khung hình 3:2 hoặc 3:4 |

**Tuyệt đối không sử dụng `align-self:end` cho hình ảnh** — chúng sẽ trượt xuống cuối ô và bị che khuất bởi thanh công cụ của trình duyệt. Hãy sử dụng vùng chứa lưới với `align-items:start` (đã được định nghĩa sẵn trong mẫu) để giữ hình ảnh ở trên cùng; để giữ hình ảnh ở dưới cùng trong cột bên trái, hãy sử dụng cột linh hoạt với `justify-content:space-between`.

Thông tin chi tiết về các thành phần (phông chữ, màu sắc, lưới, biểu tượng, chú thích, thẻ thống kê, v.v.) nằm trong tệp @components.md .

### Bước 4 · Tự kiểm tra so với danh sách kiểm tra

Sau khi tạo danh sách kiểm tra, hãy nhớ mở tệp @checklist.md và kiểm tra từng mục so với hướng dẫn. Tệp này tóm tắt tất cả các vấn đề gặp phải trong quá trình lặp lại thực tế, và tất cả các vấn đề ở cấp độ P0 (biểu tượng cảm xúc, quá tải hình ảnh, ngắt dòng tiêu đề, phân chia phông chữ) phải được giải quyết.

Một số điểm cần đặc biệt chú ý:

1. **Tiêu đề chính phải được viết bằng phông chữ có chân (serif)** — Nếu chúng được hiển thị bằng phông chữ không chân (sans-serif), thì khả năng cao là bước kiểm tra sơ bộ 3.0 đã thất bại và lớp `h-hero` bị thiếu trong template.html.

2. **Chỉ sử dụng `height:Nvh` trong lưới hình ảnh, không sử dụng `aspect-ratio` (vì sẽ làm hỏng lưới).**

3. **Hình ảnh không nên bị đẩy xuống cuối trang** — Không sử dụng `align-self:end`, hãy sử dụng grid + `align-items:start` (xem Bước 3.2)

4. **Hình ảnh phải có tỷ lệ khung hình chuẩn** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Không sao chép hình ảnh có tỷ lệ khung hình bất thường.

5. **Tiêu đề chính tiếng Trung phải có tối đa 5 ký tự và sử dụng `nowrap` (tránh 1 ký tự trên mỗi dòng)**

6. **Hãy sử dụng Lucide, không dùng biểu tượng cảm xúc.**

7. **Sử dụng phông chữ có chân (serif) cho tiêu đề, phông chữ không chân (sans-serif) cho nội dung chính và phông chữ có độ rộng cố định cho siêu dữ liệu.**

### Bước 5 · Lặp lại

Được sửa đổi dựa trên phản hồi của người dùng—CSS của mẫu hiện đã được tham số hóa cao, với 90% các điều chỉnh là thay đổi kiểu nội tuyến (font-size:Xvw / height:Yvh / spacing:Zvh).

## Nguyên tắc thiết kế cốt lõi (Triết lý)

Những nguyên tắc này là kết quả của năm lần chỉnh sửa để tạo bài thuyết trình PowerPoint cho một công ty chỉ có một người. Vi phạm bất kỳ nguyên tắc nào trong số đó sẽ phá hỏng tính thẩm mỹ trực quan.

1. **Tiết chế sự phô trương kỹ thuật** — Hình nền WebGL chỉ hiển thị trên các trang chính và gần như không nhìn thấy trên các trang thông thường.

2. **Cấu trúc quan trọng hơn trang trí** — Không có bóng đổ, không có thẻ nổi, không có ô đệm; tất cả thông tin được truyền tải thông qua **kích thước phông chữ lớn + độ tương phản phông chữ + khoảng cách lưới**.

3. **Thứ tự ưu tiên nội dung được xác định bởi kích thước phông chữ và kiểu phông chữ** — Phông chữ serif lớn nhất = tiêu đề chính, phông chữ serif trung bình = tiêu đề phụ, phông chữ sans-serif lớn = đoạn mở đầu, phông chữ sans-serif nhỏ = nội dung chính, phông chữ cố định = siêu dữ liệu

4. **Hình ảnh là yếu tố quan trọng hàng đầu** — Chỉ cắt phần dưới của hình ảnh, đảm bảo phần trên và các cạnh trái/phải được giữ nguyên; cố định lưới bằng `height:Nvh`, không sử dụng `aspect-ratio` để mở rộng hình ảnh.

5. **Điều chỉnh nhịp độ với các trang quan trọng** — Việc xen kẽ giữa các trang quan trọng và các trang không quan trọng giúp ngăn ngừa mỏi mắt.

6. **Tính nhất quán về thuật ngữ** — Từ "Kỹ năng" nên được dịch là "Kỹ năng", không phải là sự kết hợp giữa tiếng Trung và tiếng Anh.

## Tài liệu tham khảo

Phong cách hình ảnh của kỹ năng này được lấy cảm hứng từ:

- Chia sẻ bài viết "Công ty một người: Các tổ chức bị thu nhỏ bởi trí tuệ nhân tạo" (22 tháng 4 năm 2026, trang 27)

- Bố cục tạp chí *Monocle*

- Bản demo bài đăng trên blog "Dây đai mỏng, kỹ năng tốt" của Chủ tịch YC Garry Tan.

Chúng có thể được sử dụng như những điểm nhấn về phong cách.