HyperFrames Core Skills — hướng dẫn agent dựng video HTML
Bộ hướng dẫn giúp coding agent hiểu định dạng, animation và vòng kiểm tra video HyperFrames.
Giúp doanh nghiệp làm được gì?
Dạy agent viết đúng source video HTML, sửa và kiểm trước render.
| Chuẩn bị | Brief/ảnh/lời + Node/FFmpeg/HyperFrames. |
|---|---|
| Nhận được | Project HTML/assets có thể preview và xuất. |
| Loại tài nguyên | Skill có hướng dẫn trong SKILL.md; hỗ trợ tùy client |
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 ↗Demo cài skills từ tài liệu tác giả
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ị
- Coding agent hỗ trợ skills
- Node.js/npm
- Thư mục dự án riêng
Tham khảo nâng cao: Cài bằng trình chọ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ừ thư mục video, chọn Core Skills và công cụ bạn dùng.
npx skills add heygen-com/hyperframes
Tham khảo nâng cao: Mở chat mới
Tùy chọn terminal; người mới dùng hướng dẫn Codex hoặc Claude Code bên trên. Yêu cầu agent đọc /hyperframes trước khi tạo dự án.
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
Đây là cài hướng dẫn, chưa cài toàn bộ môi trường render. Bộ core đủ để bắt đầu; không cần chọn toàn bộ catalog. Plugin dùng trình cập nhật riêng.