HyperFrames — làm video từ HTML
Framework biến HTML, CSS, media và animation có thể seek thành MP4.
Giúp doanh nghiệp làm được gì?
Dựng quảng cáo sản phẩm, hướng dẫn hoặc motion từ ảnh/chữ có thể chỉnh riêng.
| Chuẩn bị | Ảnh/lời/brand và HTML/source. |
|---|---|
| Nhận được | MP4 + HTML/assets/template, như các mẫu theo ngành. |
| Loại tài nguyên | Repo mã nguồn — cần cài runtime/dependency đúng môi trường |
Hoạt động như thế nào?
- Bạn cung cấp đầu vào và mục tiêu
- Agent đọc hướng dẫn / gọi công cụ có quyền
- Kiểm kết quả, giữ source và bàn giao
Xem cách ứng dụng trong thực tế
Ví dụ ngành: Bán lẻ & TMĐT
Shop cần nhiều phiên bản nội dung cho cùng một sản phẩm, nhưng ảnh, tên và thông số phải nhất quán.
Ví dụ ứng dụng theo ngành — xem vai trò từng công cụ, không phải mọi mẫu đều do riêng tài nguyên này tạo.
Xem tình huống, nội dung, ảnh, video và template ↗Mở Codex, điền đầu vào và gửi yêu cầu bên dưới. Dán prompt sau. Agent phải đọc nguồn chính thức rồi kiểm tra môi trường thực tế trước khi chọn cách cài.
Kiểm Node và môi trường dự án trước. Đọc https://github.com/heygen-com/hyperframes và hướng dẫn skills chính thức. Trong dự án riêng, cài 4 core skills bằng: npx skills@1.7.4 add heygen-com/hyperframes --skill hyperframes hyperframes-cli hyperframes-registry media-use --agent codex --yes --copy Sau khi lệnh hoàn tất: Kiểm SKILL.md của bốn gói và mở chat mới khi client cần. Sau đó dùng /hyperframes tạo project video từ brief tôi cung cấp; preview, check và render local, giữ HTML/assets/source. Không chạy paid cloud hay cập nhật ghi đè skill hiện có nếu chưa kiểm thay đổi.
Hướng dẫn từng bước cho người mới
- Mở thư mục dự án trong Codex
Dùng chế độ coding agent có quyền đọc và chạy công cụ trong thư mục bạn chọn. Bắt đầu từ thư mục trống hoặc một thư mục dành riêng cho demo; không cần tự chạy terminal.
- Nhờ agent kiểm tra và thiết lập
Dán prompt sau. Agent phải đọc nguồn chính thức rồi kiểm tra môi trường thực tế trước khi chọn cách cài.
- Giao brief và nhận video
Sau khi setup thành công, dán brief. Kiểm tra preview và nhận source cùng video thực; lỗi hay giới hạn phải được báo đúng.
Kiểm tra kết quả thật trước khi dùng. Đăng nhập và đồng ý quyền là bước bạn tự thực hiện. Claude Code là công cụ làm việc với dự án, khác chat Claude trên web.
Mã QR
Chuẩn bị, cài đặt và cách dùng
Cần chuẩn bị
- Node.js 22+
- FFmpeg
- Thư mục dự án mới
Tham khảo nâng cao: Khởi tạo dự án
Tùy chọn terminal; người mới dùng hướng dẫn Codex hoặc Claude Code bên trên. Chạy từng dòng trong terminal; dùng tên thư mục chưa tồn tại.
npx hyperframes init my-video cd my-video
Tham khảo nâng cao: Xem preview
Tùy chọn terminal; người mới dùng hướng dẫn Codex hoặc Claude Code bên trên. Sau khi có nội dung hợp lệ, mở preview trước khi render.
npx hyperframes preview
Cách dùng
- Mở dự án trong coding agent và chọn hướng dẫn agent ở mục trên để kiểm tra nguồn, môi trường rồi thiết lập.
- Dán brief để agent thực hiện dựng, preview và render; xem đầu ra thực.
- Đối chiếu QC, giữ source và MP4; đọc lệnh terminal chỉ khi cần tham khảo nâng cao.
Nguồn và giới hạn
Phần mềm nguồn mở không đồng nghĩa mọi dịch vụ tạo ảnh, giọng hoặc cloud render đều miễn phí. Đây là hướng dẫn đã đối chiếu tài liệu, chưa chạy thử môi trường của bạn.