Frontend Slides: Quên PowerPoint Đi, AI Viết Code Cho Bạn Một Bộ Slide Hoàn Chỉnh

TL;DR

Frontend Slides là skill mã nguồn mở của Zara Zhang, giúp Claude Code và nhiều AI coding agent khác tạo bài thuyết trình HTML đẹp - từ đầu hoặc convert từ file PowerPoint - mà không cần biết một dòng CSS hay JavaScript. Output là một file HTML duy nhất với toàn bộ CSS/JS inline, zero dependency, chạy mãi trên bất kỳ trình duyệt nào.

Cái khổ của slide truyền thống

Mỗi lần cần làm bài thuyết trình, bạn đứng trước hai lựa chọn đều không thoải mái.

Lựa chọn 1: PowerPoint hay Google Slides. Bạn mất hàng giờ kéo thả, căn font, chọn màu, rồi nhận ra kết quả vẫn trông như slide của mọi người - generic, nhạt nhẽo, không có cá tính. File .pptx gửi cho đồng nghiệp mở ra lại bị lệch vì khác phiên bản Office. Upload lên web phải convert, convert xong mất hết animation.

Lựa chọn 2: RevealJS, Slidev, hay Marp. Đẹp hơn và thân thiện với developer, nhưng bạn phải cài npm, cấu hình Vite, biết đủ Markdown và JavaScript để không bị mắc kẹt ngay từ slide đầu tiên. Cập nhật một dependency là có thể break toàn bộ layout.

Lựa chọn 3: Dùng Gamma AI, Beautiful.ai hay các SaaS tương tự. Kết quả ổn, nhưng bạn bị vendor lock-in, dữ liệu nằm trên server của họ, và mỗi tháng phải trả thêm một subscription nữa.

Frontend Slides chọn hướng thứ tư: để AI coding agent xử lý toàn bộ phần kỹ thuật, còn bạn chỉ cần mô tả nội dung và chọn style mình thích.

Cách hoạt động: "show, don't tell"

Tác giả Zara Zhang đã xây dựng skill theo triết lý "show, don't tell": thay vì bắt bạn mô tả phong cách bằng lời ("hiện đại nhưng chuyên nghiệp, hơi playful một chút"), AI sẽ generate 3 bản preview title slide trực quan để bạn nhìn và chọn. Bạn không cần biết mình muốn gì - chỉ cần nhìn và phản ứng.

Quy trình gồm 3 bước:

1. Mô tả nội dung: Bạn nói với Claude Code bạn cần slide về chủ đề gì, đối tượng là ai, cảm xúc muốn truyền tải là gì.
2. Chọn style: AI tạo 3 bản preview title slide với phong cách khác nhau - từ 12 preset curated hoặc 34 bold template. Bạn chọn cái ưng ý nhất.
3. Nhận file HTML hoàn chỉnh: Toàn bộ deck được tạo trong style đã chọn, có animation, tỷ lệ 16:9 cố định, accessible, code được comment kỹ để dễ tùy chỉnh.

Nếu bạn có file PowerPoint sẵn, skill hỗ trợ convert: script extract-pptx.py trích xuất toàn bộ text, hình ảnh và ghi chú từ .pptx, bạn xác nhận nội dung, chọn style mới, và nhận lại web presentation với toàn bộ nội dung gốc được giữ nguyên.

Cài đặt trong 2 lệnh

Frontend Slides được đóng gói như một Claude Code plugin, cài qua Custom Marketplace. Chú ý: chạy 2 lệnh sau riêng biệt, không paste cả hai vào cùng một prompt:

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides

Sau khi lệnh đầu hoàn thành:

/plugin install frontend-slides@frontend-slides

Dùng bằng cách gõ /frontend-slides:frontend-slides trong Claude Code. Nếu cài thủ công (để dùng lệnh không namespace):

git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides

Khi dùng lệnh /frontend-slides (không namespace), skill sẽ hoạt động trực tiếp. Nếu dùng agent khác như Codex, Gemini CLI, hay Kimi Code, chỉ cần gửi link repo cho agent và nhờ dùng skill - agent đọc SKILL.md và biết phải làm gì tiếp theo.

Những điểm khiến skill này khác biệt

Zero dependency và bền vững. Mỗi bài thuyết trình là một file HTML với toàn bộ CSS và JavaScript inline. Không npm, không build tool, không framework. Tác giả có câu đáng suy nghĩ: "Một file HTML sẽ chạy được trong 10 năm. Một project React từ 2019?" File không có dependency nghĩa là không bao giờ bị "cannot find module", và share cho ai cũng mở được ngay trong trình duyệt.

Anti-AI-slop by design. Skill có 12 preset phong cách được tuyển chọn kỹ để tránh thiết kế AI generic - không gradient tím trên nền trắng, không layout dự đoán trước được. Dark themes: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical. Light themes: Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial. Specialty: Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink.

Bold Template Pack với 34 design system. Ngoài 12 preset cơ bản, skill còn tích hợp 34 bold design system từ thư viện beautiful-html-templates (cùng tác giả) - Neo-Grid Bold, Editorial Tri-Tone, Creative Mode, Broadside, Signal, Vellum và nhiều hơn nữa. Loading theo progressive disclosure: skill load index nhỏ trước (183 dòng thay vì 1,625 dòng), chỉ load đầy đủ khi bạn đã chọn template - giảm 89% context bloat.

Hỗ trợ nhiều agent. Ngoài Claude Code, skill hoạt động với Codex, Gemini CLI, Kimi Code, OpenCode và các coding agent khác có filesystem access. Chỉ cần gửi link repo là agent có thể đọc SKILL.md và bắt đầu.

Nếu muốn xem demo thực tế trước khi cài, tác giả có video walkthrough dành cho người mới bắt đầu: via YouTube.

Zero dependency: lợi thế thực sự

Khi so sánh Frontend Slides với các công cụ slide phổ biến, điểm khác biệt rõ nhất không phải ở tính năng - mà ở triết lý thiết kế và chi phí duy trì lâu dài.

• PowerPoint / Google Slides: Vendor lock-in, file format phụ thuộc phần mềm, khó version control, không chạy tự nhiên trên web.
• RevealJS / Slidev: Đẹp và code-friendly, nhưng yêu cầu Node.js, npm, build pipeline. Cập nhật một package dễ break layout.
• Gamma AI, Beautiful.ai: SaaS có subscription, không tự host, khó customize sâu, dữ liệu nằm trên server bên thứ ba.
• Frontend Slides: Output là file HTML thuần, drag & drop vào trình duyệt là chạy. Deploy lên Vercel hay GitHub Pages chỉ cần 1 lệnh. File HTML tồn tại bền vững và không có điểm thất bại đơn.

Khi nào nên và không nên dùng

Dùng ngay khi: bạn cần slide đẹp nhanh mà không muốn học CSS, bạn đang dùng Claude Code thường xuyên và muốn tận dụng thêm, bạn muốn slide chạy lâu dài không lo dependency, hoặc có file .pptx cũ muốn "làm mới" thành web presentation.

Cân nhắc khi: skill phụ thuộc vào chất lượng output của coding agent - HTML đôi khi cần debug nếu layout phức tạp. Nếu bạn cần collaboration real-time (nhiều người cùng sửa như Google Slides), đây không phải công cụ phù hợp. Customize sâu vẫn cần biết HTML/CSS - dù code đã được comment kỹ.

Kết quả tốt nhất khi bạn mô tả nội dung và cảm xúc: "cần pitch deck cho startup AI, đối tượng là investor" sẽ cho kết quả tốt hơn "tạo 10 slide background xanh font 14pt". Skill được thiết kế để AI có đủ ngữ cảnh suy luận về style - đừng micro-manage, hãy tin vào preview và iterate.

Slide tốt không cần thiết kế

Frontend Slides giải quyết một vấn đề thực sự: phần lớn mọi người không cần học CSS hay RevealJS, họ chỉ cần một bài thuyết trình trông chuyên nghiệp và chạy được mọi nơi. Cách Zara Zhang xây dựng skill - iterate hàng chục lần với Claude Code đến khi đạt tiêu chí "good slides" rồi dạy AI ghi lại workflow thành skill - tự nó đã là một use case thuyết phục cho vibe coding.

Nếu bạn đang dùng Claude Code, thêm skill này vào toolkit là một quyết định không có gì để mất. via GitHub - zarazhangrui/frontend-slides