Biến Slides AI thành Bài thuyết trình Tương tác Chuyên sâu: Khung 6 Cấu trúc

1【Prompt Slide Tương tác v2.1】
2Lược bỏ toàn văn do giới hạn độ dài; vui lòng copy-paste từ note.
3
4## Bổ sung: Thêm tính tương tác
5Sử dụng block này nối tiếp vào prompt tạo slide ở trên. Dán tài liệu xuống dưới block này (giữ nguyên dòng "Dán tài liệu vào dưới đây" từ prompt trước).
6
7### Mức độ ưu tiên
8- Nội dung (xử lý số liệu, tiêu đề, logic, template, tiêu chuẩn vẽ, kiểm chứng) tuân theo prompt tạo slide ở trên.
9- Định dạng đầu ra ưu tiên block này: HTML tương tác một file duy nhất, 3 trang (4 trang nếu tài liệu nhiều), tiêu đề tối đa 36 ký tự/dòng (không xuống dòng). Không xuất file thiết kế riêng; thay bằng danh sách trang và bảng số liệu (đưa các yêu cầu thiết kế từ prompt trước vào hai phần này).
10- Chỉ đặt câu hỏi một lần trước khi bắt đầu, và chỉ khi mục đích hoặc đối tượng chưa rõ từ tài liệu/bối cảnh. Nếu không, hãy tự phán đoán, ghi chú các giả định và viết liền một mạch.
11
12### Template trang (Khớp hình ảnh với mẫu bên dưới)
13- Trang 2-3: Biểu đồ chính bên trái (rộng 60%), panel bằng chứng bên phải (khung nền sáng). Cấu trúc panel: Một số lớn (88-96px) → Ý nghĩa (1 dòng) → Bối cảnh (2-3 dòng) → Đối tượng so sánh & delta (kèm công thức) → "Xem Breakdown ›"
14- Trang 1: Hàng trên gồm 3 số lớn, hàng dưới thể hiện luồng/cấu trúc tổng thể (chuyện gì đang xảy ra ở đâu). Đặt các thẻ liên kết đến trang cụ thể ("tr.2 ›") vào trong luồng này.
15- Biểu đồ và số liệu phủ kín khung hình. Không để dải trống bên dưới nội dung.
16- Dùng hết các số liệu trong tài liệu (biểu đồ, panel, callout, bằng chứng). Tính delta/tỷ lệ và hiển thị công thức. Không tự bịa số liệu không có trong tài liệu.
17- Đối tượng chính dùng màu chủ đạo, đối tượng so sánh dùng sắc độ gradient nhạt, còn lại dùng màu xám. Mỗi trang chỉ có một số lớn.
18- Làm nổi bật các phần tử có thể click: Dùng "›", "Click để...", viền khi hover, vòng sáng highlight một lần khi vào trang. Cột/chấm hiển thị tooltip với "Giá trị, Tên, Nguồn" khi hover.
19
20### Một tương tác mỗi trang (Suy ra từ cấu trúc)
21Thêm chính xác một thao tác trên mỗi trang để người đọc kiểm chứng nhận định trong tiêu đề. Chọn thao tác dựa theo loại cấu trúc của tiêu đề.
22- Kim tự tháp (Kết luận/Bằng chứng) → Click để drill down. Panel bằng chứng bên phải (có nguồn; áp dụng cho gần như mọi trang).
23- Phân loại (Phân khúc) → Đổi tiêu chí (góc nhìn tổng hợp, chỉ số, năm) để sắp xếp lại toàn bộ các cột.
24- So sánh (Chênh lệch) → Trạng thái cũ chuyển hóa thành trạng thái mới, giữ lại delta/chênh lệch bằng nét đứt.
25- Nhân quả (Nguyên nhân/Kết quả) → Thanh trượt điều chỉnh điều kiện, tính lại kết quả. Hiển thị công thức trên màn hình.
26- Giải quyết vấn đề (Khoảng trống/Giải pháp) → Bật/tắt giải pháp để lấp/giữ khoảng trống.
27- Trình tự (Luồng/Quy trình/Thời gian) → Lắp ghép tuần tự, nhân vật di chuyển qua quy trình, đánh dấu "Hiện tại" trên trục thời gian.
28Không thêm hiệu ứng không liên quan đến tiêu đề. Hiệu ứng định lượng phải được tính toán từ các giá trị thực.
29
30### Panel bằng chứng (Trượt vào từ bên phải khi click)
31- Rộng 720px. Trượt vào từ bên phải, làm mờ nền. Đóng bằng nút X, Esc hoặc click vào nền.
32- Cấu trúc từ trên xuống: Bối cảnh vị trí ("Tình trạng hiện tại > Tên mục") → Nhận định (1-2 dòng) → Tab (tối đa 2, ví dụ: Breakdown / Nguồn & Giả định) → Biểu đồ/bảng nhỏ → Nguồn.
33- Đưa các số liệu chi tiết không vừa trên trang chính vào đây. Áp dụng cho gần như mọi trang.
34
35### Tổng thể bản trình bày
36- Cho phép zoom-in từ trang tổng quan (Trang 1) đến các trang cụ thể. Cho phép nhảy từ trang giải pháp sang trang bằng chứng.
37- Phím: → và Space để tới trang sau, ← để về trang trước, Số để nhảy trang, Esc để đóng/quay lại, O để xem tổng quan toàn bộ trang, D để auto-demo (con trỏ chuột di chuyển theo kịch bản, kết thúc bằng trang tổng quan. Gắn thẻ data-demo cho các phần tử tương tác).
38- Các trang lắp ráp trong ~3 giây: Tiêu đề → Biểu đồ chính (các cột mọc lên từ 0, lệch nhau 60ms) → Số liệu → Panel bằng chứng. Dùng CSS transition/delay; nếu dùng JS, kết hợp requestAnimationFrame với timer 50ms.
39- Hỗ trợ tham số URL #static và cài đặt "Giảm chuyển động" để hiển thị trạng thái lắp ráp cuối cùng (với trang tương tác, hiển thị trạng thái mà nhận định tiêu đề rõ ràng nhất, ví dụ: bật TẤT CẢ giải pháp). Phải đọc được như một bản trình bày tĩnh.
40- Co giãn canvas 1920x1080 cho vừa màn hình. Chỉ tải ngoài font Noto Sans JP của Google Fonts.
41
42### Tiêu chuẩn tối thiểu (Chỉ áp dụng nếu không có prompt tạo slide ở trên)
431. Tạo bảng số liệu từ tài liệu (Mục, Giá trị, Ngày, Nguồn, Tập mẫu). Đánh dấu số thiếu là "xx" kèm ghi chú. Xếp các mục chưa có giá trị xuống cuối.
442. Mỗi trang một thông điệp. Tiêu đề là câu hoàn chỉnh kết hợp sự thật và nhận định, tối đa 36 ký tự/dòng. Tránh cấu trúc hai phần "A. B", kiểu đếm "Có 3...", hoặc cụm danh từ cụt lủn.
453. Viết toàn bộ tiêu đề trước, kiểm tra luồng dọc (Tổng quan→Bằng chứng→Giải pháp) rồi mới vẽ biểu đồ.
464. Chọn loại biểu đồ dựa trên ý đồ cấu trúc của tiêu đề (xem "Một tương tác" ở trên).
475. Tên biểu đồ: "Cái gì, Khi nào, Đơn vị". Không đưa nhận định vào tên. Ghi nguồn ở cả footer trang và panel bằng chứng.
486. Màu sắc: 1 màu chủ đạo, 3 sắc độ gradient nhạt, màu xám. Màu chủ đạo mặc định #1976D2. Màu nhấn (Amber #D97706) chỉ dùng đúng một lần trong toàn bộ bản trình bày. Cỡ chữ tối thiểu 18px.
497. Không khẳng định nhân quả chỉ từ tương quan. Ghi rõ số ước tính là "Ước tính" kèm công thức và giả định trên màn hình.
50
51### Đầu ra
52- HTML: Claude xuất dạng Artifact, ChatGPT xuất dạng Canvas (hoặc một block code duy nhất nếu không hỗ trợ). Viết liền một mạch. Giới hạn số trang và gộp component thành hàm để rút ngắn code. Nếu bị cắt ngang, tiếp tục cùng file đó khi người dùng gõ "tiếp tục" (đừng yêu cầu họ dán thủ công).
53- Dòng 1 nêu rõ phương pháp: "Nội dung = Prompt Slide / Tương tác = Block Tương tác" hoặc "Chỉ dùng Block Tương tác (áp dụng quy tắc nội dung rút gọn)".
54- Danh sách trang (Tiêu đề/Cấu trúc/Thao tác/Nội dung Panel bằng chứng), Bảng số liệu, Hướng dẫn đặt NGOÀI HTML (trong phần phản hồi), viết ngắn gọn. Không nhét vào trong HTML.
55- Dung lượng HTML mục tiêu ~40KB. Lược bớt text nếu cần (KHÔNG lược bỏ biểu đồ, panel bằng chứng, thao tác).
56- Kết thúc bằng 2-3 gợi ý cải thiện thêm và hỏi người dùng muốn chọn hướng nào.
57
58### Kiểm tra lần cuối
59Trước khi xuất, rà soát và sửa: Mọi trang đều có "thao tác kiểm chứng tiêu đề" và "panel bằng chứng kèm nguồn" / Không bịa số liệu / Không dải trống, chồng lấn, tràn lề hay chữ <18px / Cách kết thúc tiêu đề đồng nhất giữa các trang (không phải trang nào cũng "cần...") / Kịch bản auto-demo không gọi đến phần tử không tồn tại.
60
61(Code của một trang mẫu nằm ở đây. Việc có code mẫu giúp cải thiện chất lượng đáng kể. Bản đầy đủ kèm code có trên note.)