video-shotcraft: Làm video quảng bá sản phẩm phong cách điện ảnh
Biến dự án frontend hoặc trang web thành video quảng bá đậm chất điện ảnh bằng Remotion, ảnh chụp trang thật, chuyển động camera 2.5D và cắt theo nhịp nhạc.
Ảnh · VideoNâng cao★ 4,305⑂ 381Điểm AI 8/10Cập nhật lần cuối: 9 thg 8, 2026
Làm được gì
Đây là một thư viện sản xuất video tự chứa, giúp biến dự án frontend/trang web thành phim quảng bá sản phẩm chất lượng cao dựa trên Remotion.
- 152 thẻ công thức cảnh quay (shot cards), mỗi thẻ kèm mã demo và video mẫu động trong gallery.
- Template Ink Press đã kiểm định: một project Remotion render được, chỉ cần thay ảnh chụp, nội dung và thương hiệu.
- 3 chế độ làm việc: dùng template nguyên bản, để Agent tự do sáng tạo, hoặc đồng sáng tạo theo từng bước xác nhận.
- Quy trình chụp trang thật: chạy dev server nội bộ, dùng browser headless chụp texture toàn trang 2x, tách phần tử và xuất bảng toạ độ
layout.jsonđể dựng camera 2.5D. - Thiết kế âm thanh & khớp nhịp: 149 hiệu ứng âm thanh và BGM có bản quyền thương mại; phân tích BPM/kick-snare bằng librosa, viết timeline theo
beatF(n), kiểm tra sai số ≤3 frame; xuất 2 bản (có và không BGM). - Kiểm định chất lượng: render still từng cảnh, trích frame bằng ffmpeg, và một subagent độc lập duyệt cuối trước khi giao.
Dành cho ai
- Lập trình viên, indie maker muốn có video demo/quảng bá cho landing page SaaS mà không cần dựng phim thủ công.
- Nhóm sản phẩm muốn video kế thừa đúng design token (font, màu, spacing) của sản phẩm.
- Kỹ sư frontend đã quen Remotion hoặc thích điều khiển video bằng code.
- Motion designer chỉ cần một cảnh chuyển động cụ thể (bay vào kiểu chia thẻ, orbit cận cảnh...).
Ví dụ sử dụng
- Dùng template: "Dùng template Ink Press làm phim quảng bá cho sản phẩm của tôi" → vào ngay chế độ template, thay ảnh chụp/nội dung/logo rồi
npx remotion renderra mp4. - Tự do sáng tạo: "Đọc thư mục dự án này và tự làm video 30 giây, không cần hỏi tôi" → Agent đi liên tục từ brief sản phẩm → styleframe → mapping cảnh → storyboard → render.
- Một cảnh đơn: "Làm clip 8 giây các card dashboard bay vào theo hiệu ứng
deck-deal-flyin" → đọc trọn thẻ công thức và mã demo tương ứng để giữ nguyên tham số đã tinh chỉnh. - Khớp nhạc: đưa file BGM → phân tích BPM/pha thật và vị trí trống trước, đặt mọi transition đúng phách, sau khi render trích lại audio để kiểm tra độ lệch.
· · · Hướng dẫn cài đặt · · ·
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên Claude Skill Mart. Copy thư mục SKILL.m từ repo GitHub Vincentwei1021/video-shotcraft vào ~/.claude/skills/video-shotcraft/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Chuẩn bị: cài Node.js 18+ và npm, Python 3 (để chạy gallery cục bộ và phân tích nhịp), ffmpeg. Có Chrome/Chromium sẽ giúp việc chụp trang dễ hơn.
- Tạo thư mục skill: chạy
mkdir -p ~/.claude/skills. - Clone repo:
git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft - Kiểm tra:
ls ~/.claude/skills/video-shotcraftphải thấySKILL.md,references/,template/,demos/,assets/,gallery/. - Cài phụ thuộc template (tuỳ chọn):
cd ~/.claude/skills/video-shotcraft/template && npm install, rồinpx remotion render src/index.ts AiflPromo out/promo.mp4để thử render. - Xem gallery mẫu: mở https://vincentwei1021.github.io/video-shotcraft/library.html và copy tên các thẻ cảnh quay bạn thích.
- Chạy Claude Code trong thư mục dự án và yêu cầu: "dùng video-shotcraft làm video quảng bá cho web này". Skill sẽ kiểm tra sản phẩm ở chế độ chỉ đọc rồi đề xuất 3 chế độ.
- Lưu ý bảo mật: vì skill chụp trang thật, hãy thay dữ liệu khách hàng/cá nhân/nội bộ bằng dữ liệu giả trước khi chụp.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0