Làm video đồ họa chuyển động với Claude Code và HyperFrames

Bạn cần cập nhật giá trong video quảng cáo nhưng muốn giữ nguyên ảnh sản phẩm, nhạc và chuyển cảnh? Với video dựng bằng mã, bạn có thể đặt giá vào một trường dữ liệu riêng. Khi giá thay đổi, sửa trường đó, kiểm tra lại bố cục rồi xuất lại tệp MP4.

Bài này dùng một ví dụ video dọc 30 giây để đi từ ý tưởng đến tệp hoàn chỉnh. Claude Code hỗ trợ viết và sửa mã của video; HyperFrames dùng dự án đó để xem trước và kết xuất.

Khi nào nên dựng video bằng mã?

Cách này phù hợp với đồ họa chuyển động: chữ chạy, biểu đồ, thẻ giá, ảnh chụp màn hình và các bước hướng dẫn. Bạn có thể tái sử dụng bố cục cho nhiều sản phẩm nếu ngay từ đầu đã tách nội dung và tài sản thành các trường dễ thay.

Sơ đồ minh họa cách tách nội dung thành các lớp để chỉnh sửa.

Nếu bạn cần	Cách làm phù hợp
Giá, ưu đãi hoặc số liệu phải hiện chính xác	Đặt chữ và số trong các lớp dựng bằng mã, rồi đối chiếu với nguồn
Cảnh người thật, sản phẩm thật hoặc thao tác thực tế	Dùng cảnh quay của bạn hoặc tư liệu có quyền sử dụng
Cảnh thật có nhãn, mũi tên hoặc phụ đề	Dùng video làm nền, đặt đồ họa lên trên
Cùng thông điệp cho bản dọc và bản ngang	Tái sử dụng nội dung, bố trí lại từng khung hình

Video tạo sinh có thể hữu ích khi bạn cần một cảnh minh họa mới từ mô tả. Khi yêu cầu chính là sửa đúng một dòng chữ hoặc thay đúng một con số, dự án có lớp riêng sẽ dễ kiểm soát hơn. Dù dựng theo cách nào, hãy kiểm tra dấu tiếng Việt, độ dài của dòng chữ và phông chữ khi xuất tệp.

1. Chuẩn bị công cụ và tư liệu

Trong video, Nhật Anh dùng Motion Studio, một skill riêng xây trên HyperFrames. Bạn cũng có thể thực hành quy trình bên dưới với skill HyperFrames chính thức của HeyGen. Tùy phiên bản, giao diện và các bước tự động có thể khác demo của tác giả.

Mở Claude Code trong một thư mục dự án riêng. Chuẩn bị logo, ảnh sản phẩm, màu thương hiệu, nội dung đã duyệt và nhạc có quyền sử dụng nếu cần. Đặt tên tệp dễ nhận biết, chẳng hạn anh-san-pham.png hoặc logo.svg. Nếu Claude Code yêu cầu cài thêm thành phần, hãy đọc tên gói và thư mục đích trước khi đồng ý.

2. Viết brief và chốt storyboard trước

Một brief dùng được cần nói rõ video dành cho ai, xuất hiện ở đâu, dài bao lâu, có tư liệu gì và người xem nên làm gì tiếp theo. Nếu có website thương hiệu, bạn có thể dùng nó làm nguồn tham khảo cho màu và kiểu chữ. Khi công cụ không đọc được liên kết, đưa ảnh chụp hoặc ghi trực tiếp các thông số đã chọn.

Ví dụ dưới đây là video giới thiệu một mẫu bảng theo dõi công việc. Bạn có thể thay sản phẩm và tư liệu bằng dữ liệu của mình.

Dùng HyperFrames để lên kế hoạch video dọc 9:16, dài 30 giây.
Video giới thiệu mẫu bảng theo dõi công việc cho nhóm nhỏ.
Người xem cần hiểu mẫu bảng giúp họ biết việc nào đến hạn.

Dùng ảnh chụp màn hình và logo có sẵn trong thư mục dự án.
Chữ tiếng Việt có dấu, ngắn, dễ đọc trên điện thoại.
Không tự thêm giá, số liệu hoặc tính năng chưa được xác nhận.
Không dùng lời thoại. Cảnh cuối ghi: Xem chi tiết mẫu bảng.

Trước khi dựng, gửi storyboard gồm thời lượng từng cảnh,
chữ hiển thị, tư liệu cần dùng và chuyển động dự kiến.
Nêu rõ phần còn thiếu và chờ tôi duyệt.

Storyboard minh họa cho một video dọc 30 giây.

Thời gian	Cảnh	Điều người xem cần thấy
00–04 giây	Mở đầu	Câu hỏi: “Việc nào sắp đến hạn?”
04–12 giây	Giới thiệu	Ảnh thật của mẫu bảng, làm nổi bật cột hạn xử lý
12–24 giây	Cách dùng	Ba thao tác: thêm việc, đặt hạn, lọc việc sắp đến hạn
24–30 giây	Hành động	Tên mẫu bảng và lời mời xem chi tiết

Nếu bố cục còn khó hình dung, yêu cầu một khung hình tĩnh cho mỗi cảnh. Kiểm tra xem chữ có đọc được, có chỗ nào quá nhiều thông tin và lời kêu gọi có đủ thời gian để đọc. Ảnh tĩnh giúp duyệt bố cục; bạn vẫn cần xem chuyển động và âm thanh ở bản xem trước.

3. Dựng bản xem trước và sửa theo mốc thời gian

Sau khi duyệt storyboard, yêu cầu Claude Code dựng các cảnh. Với nội dung sẽ đổi thường xuyên, như tiêu đề, giá hoặc tên sản phẩm, hãy yêu cầu gom chúng vào một nơi dễ chỉnh. Giữ ảnh, màu và chuyển động độc lập nếu dự định nhân bản video.

Trong thư mục dự án HyperFrames, có thể dùng npx hyperframes preview để mở bản xem trước trong trình duyệt. Nếu dự án hỗ trợ chỉnh sửa trực tiếp trong Studio, hãy sửa tại đó. Bạn cũng có thể yêu cầu Claude Code đổi đúng trường hoặc đúng cảnh.

Ở giây 12–16, đổi nhãn "Deadline" thành "Hạn xử lý".
Giữ nguyên ảnh, chuyển cảnh và nhạc.
Nếu chữ bị xuống dòng, chỉnh riêng độ rộng của nhãn.
Mở lại bản xem trước ở cảnh này để tôi kiểm tra.

Khi cần thử phong cách khác, giữ bản đã duyệt và tạo một phiên bản riêng. Mô tả những gì bạn muốn học từ mẫu tham khảo, chẳng hạn nét vẽ tay, độ tương phản hoặc nhịp chuyển cảnh. Giữ nội dung của bạn và dùng hình, logo, nhạc có quyền sử dụng.

4. Xuất MP4 và thử ở nơi video sẽ chạy

Khi bản xem trước đã đạt yêu cầu, chạy npx hyperframes render trong thư mục dự án theo hướng dẫn của HeyGen. Mở chính tệp MP4 vừa xuất để kiểm tra từ đầu đến cuối.

• Xem trên điện thoại. Kiểm tra chữ và nút kêu gọi có bị giao diện của nền tảng che. Nếu cần, đưa chúng vào vùng giữa khung và thử lại.
• Đối chiếu nội dung. Kiểm tra giá, ưu đãi, dấu tiếng Việt, ảnh, điểm cắt và âm lượng. Thử xem không bật tiếng nếu thông điệp phải hiểu được chỉ bằng chữ.
• Giữ tệp dự án. Lưu storyboard, tài sản, các trường dữ liệu và MP4 đã duyệt để lần sau có thể đổi nội dung và xuất lại.

Bài tập đầu tiên có thể chỉ là một video ba hoặc bốn cảnh. Sau khi xuất, thử thay một dòng chữ và kiểm tra xem ảnh, nhạc và chuyển cảnh có giữ nguyên không. Đó là cách nhanh để biết bạn đã có một mẫu dễ tái sử dụng hay chưa.