frontend-slides - Công cụ tạo trình chiếu HTML hiện đại

Frontend-slides là giải pháp tiên tiến giúp tạo trình chiếu HTML động với hiệu ứng bắt mắt, chạy hoàn toàn trong trình duyệt mà không cần bất kỳ thư viện bên ngoài nào. Công cụ này phù hợp để xây dựng bài trình chiếu mới hoặc chuyển đổi file PowerPoint (.ppt/.pptx) sang định dạng HTML đơn giản.

1. Tổng quan

1.1 Ứng dụng thực tế

• Xây dựng bài trình chiếu thuyết trình (Pitch Deck), giới thiệu sản phẩm
• Chuyển đổi PPT/PPTX thành trình chiếu web hiện đại
• Thuyết trình tại hội nghị kỹ thuật, bài giảng trực tuyến
• Báo cáo nội bộ, trình bày chiến lược
• Cải thiện bố cục, hiệu ứng hoặc kiểu chữ cho trình chiếu HTML hiện có

1.2 Lợi ích nổi bật

Đặc điểm	Mô tả
Không phụ thuộc (Zero Dependencies)	Xuất file HTML đơn, nhúng toàn bộ CSS và JavaScript, không cần npm, công cụ build hay framework. Tương thích với mọi trình duyệt trong tương lai.
Trực quan hóa (Show, Not Tell)	Người dùng không cần mô tả bằng lời, chỉ cần chọn mẫu thiết kế phù hợp từ bản xem trước.
Thiết kế độc đáo	Loại bỏ kiểu mẫu AI phổ biến như nền trắng gradient tím.
Chất lượng sản phẩm	Mã nguồn được chú thích rõ ràng, tối ưu khả năng tiếp cận và hiệu năng.

2. Nguyên tắc cốt lõi

Nguyên tắc	Chi tiết
Không phụ thuộc	Chỉ dùng file HTML tự chứa với CSS và JS nội tuyến, không yêu cầu công cụ build.
Phù hợp视口	Mỗi slide phải vừa khít视口 (100vh/100dvh), không cho phép scroll nội bộ.
Trực quan hóa	Dùng bản xem trước trực quan thay vì bảng hỏi kiểu trừu tượng.
Thiết kế khác biệt	Tránh kiểu mẫu phổ biến như font Inter nền trắng gradient.
Chất lượng cao	Mã nguồn rõ ràng, tương thích đa thiết bị và tối ưu hiệu năng.

2.1 Quy tắc视口

Mỗi slide phải hiển thị đầy đủ视口, không xuất hiện thanh cuộn. Giới hạn nội dung theo loại slide:

Loại slide	Giới hạn nội dung
Slide tiêu đề	1 tiêu đề chính + 1 phụ + 1 dòng nhãn
Slide nội dung	1 tiêu đề + 4-6 điểm liệt kê hoặc 2 đoạn văn
Slide lưới chức năng	1 tiêu đề + tối đa 6 card (2×3 hoặc 3×2)

3. Tính năng nổi bật

3.1 Khám phá phong cách trực quan

• Tự động tạo 3 bản xem trước với phong cách khác nhau
• Người dùng chọn mẫu bằng cách click chuột
• Hệ thống sinh toàn bộ bài trình chiếu từ mẫu đã chọn

3.2 Chuyển đổi PPT thông minh

• Trích xuất toàn bộ nội dung, hình ảnh và ghi chú từ PPT
• Áp dụng phong cách hiện đại cho nội dung đã trích xuất
• Xuất file HTML hoàn chỉnh với tương tác mượt mà

3.3 Tương tác đa thiết bị

• Điều hướng bằng phím mũi tên, chuột, cảm ứng
• Hiệu ứng động khi scroll (Reveal Animations)
• Thiết kế responsive cho mọi độ phân giải
• Thanh tiến trình trình bày

4. Cài đặt

4.1 Yêu cầu hệ thống

• Node.js (v18+)
• npm (đi kèm Node.js)
• Python (tùy chọn, dùng cho chuyển đổi PPT)

Cài đặt thư viện Python:

pip install Pillow python-pptx

4.2 Cài đặt cho Cursor

1. Cài đặt openskills:

   npm i -g openskills

2. Cài đặt skill:

   npx skills-installer install affaanmustafa/frontend-slides --local --client cursor

4.3 Cài đặt cho Claude Code

Cài đặt qua shx:

shx skill add --skill-dir .claude/skills affaanmustafa/frontend-slides

4.4 Cài đặt cho Openclaw

Cài đặt qua ClawHub CLI:

npx clawhub@latest install myclaw-frontend-slides

5. Quy trình làm việc

1. Phân tích nhu cầu: Xác định bài trình chiếu mới, chuyển đổi PPT, hoặc nâng cấp hiện có
2. Khám phá nội dung: Thu thập thông tin mục đích, độ dài, trạng thái nội dung
3. Chọn phong cách: Tạo 3 bản xem trước để người dùng lựa chọn
4. Xuất trình chiếu: Tạo file HTML với cấu trúc hoàn chỉnh

6. Tính năng tương tác

• Điều hướng bằng bàn phím, chuột, cảm ứng
• Hiệu ứng động khi vào视口
• Hỗ trợ chế độ giảm hiệu ứng (prefers-reduced-motion)

7. Phong cách có sẵn

Chủ đề tối

• Neon Cyber: Công nghệ, hacker, hiệu ứng tương lai
• Midnight Exec: Doanh nghiệp, báo cáo cao cấp

Chủ đề sáng

• Paper & Ink: Văn học, phong cách in ấn
• Swiss Modern: Thiết kế kiến trúc, phong cách Bauhaus

8. Kiến trúc kỹ thuật

8.1 Định dạng đầu ra

• File HTML đơn, CSS/JS nội tuyến
• Hình ảnh lưu trong thư mục assets

8.2 Công nghệ sử dụng

• CSS Custom Properties (biến theme)
• Intersection Observer (hiệu ứng scroll)
• CSS Grid/Flexbox (layout)
• Scroll Snap (định vị slide)

8.3 CSS nền tảng

/* Khóa视口 */
html, body {
  height: 100%;
  overflow-x: hidden;
}
.slide {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/* Responsive typography */
:root {
  --kich-thuoc-tieu-de: clamp(1.5rem, 5vw, 4rem);
}

9. Câu hỏi thường gặp

Q1: Slide bị tràn trên điện thoại?
Kiểm tra lại giới hạn nội dung, sử dụng hàm clamp() để điều chỉnh font.

Q2: Tự tùy chỉnh theme?
Chỉnh sửa biến CSS trong file HTML xuất ra.

10. Lệnh nhanh

Công cụ	Lệnh cài đặt
Cursor	npx skills-installer install affaanmustafa/frontend-slides --local --client cursor
Claude Code	shx skill add affaanmustafa/frontend-slides

11. Tài nguyên & Giấy phép

• Kho mã nguồn
• Giấy phép: MIT