Bạn là designer, đã quen Figma, nhưng mỗi lần cần một video giới thiệu sản phẩm có chữ chuyển động, số liệu chạy hay logo xuất hiện mượt mà thì lại phải mở After Effects, hoặc đi nhờ người khác. Năm 2026 có một cách khác: mô tả video bằng lời, để Claude viết code cho từng khung hình, rồi render ra MP4.
Bài này mình tổng hợp những repo GitHub đáng thử nhất cho cách làm đó, nhìn từ góc độ của một người làm UI/UX: cái nào giúp "có gu" hơn, cái nào render được, cái nào dùng luôn cho website.
Công thức ngắn gọn: Claude viết code → skill dạy nhịp điệu và chuyển động → engine render ra video.
Hiểu nhanh 3 lớp trong quy trình
- Skill: bộ hướng dẫn (thường là file
SKILL.md) cài vào Claude Code, giúp Claude biết cách căn timing, easing, chuyển cảnh. - Engine: công cụ biến code (HTML hoặc React) thành video.
- Thư viện animation: nền tảng chạy chuyển động, dùng được cả cho video lẫn giao diện web.
Nhóm 1: Engine render, chọn một cái làm nền
1. HyperFrames
Viết HTML/CSS, render ra video. Do HeyGen phát triển với mục tiêu cho AI agent sử dụng. Designer biết HTML cơ bản là dùng được, license Apache-2.0.
2. Remotion
Làm video bằng React, cộng đồng lớn, nhiều template. Lưu ý license riêng: một số công ty cần mua license khi dùng thương mại.
3. Remotion Skills
Bộ skill chính thức của Remotion cho AI agent. Chọn Remotion thì cài cái này đầu tiên.
Nhóm 2: Skill làm video cho Claude
4. animate
Phù hợp nhất cho người mới: skill dừng lại hỏi bạn về câu chuyện, phong cách, storyboard trước khi làm. Có sẵn nhiều phong cách, tự khớp nhịp với nhạc bạn đưa vào.
5. claude-motion
Bộ công cụ motion design khá toàn diện, có tiêu chí thẩm mỹ viết sẵn và tự xem lại khung hình đã render để sửa.
6. claude-motion-design
Stack gọn: HTML + Playwright + ffmpeg, không cần Remotion hay After Effects.
7. product-launch-motion
Chuyên video ra mắt sản phẩm: chuyển động camera, chỉnh màu, âm thanh khớp nhịp, motion blur.
8. motion-graphics-skills
Bộ nhiều skill hướng tới launch video cho app, khoá học, sản phẩm số.
9. claude-remotion-skill
Biến Claude thành "editor" trên nền Remotion: phụ đề, B-roll, âm thanh từ một prompt.
10. motion-graphics (Barty-Bart)
Dựng B-roll minh hoạ trực tiếp từ transcript video nói chuyện của bạn.
11. hyperframes-motion-reel-skill
Showreel cắt theo nhịp nhạc, hợp cho teaser ngắn và reel mạng xã hội.
Nhóm 3: "Gu" chuyển động, phần designer nên quan tâm nhất
12. motion-design-skill (LottieFiles)
Nguyên lý timing, easing, thứ tự xuất hiện và 12 nguyên lý animation áp dụng cho giao diện. Cài kèm với bất kỳ skill nào ở trên.
13. motion-design-skills (iart-ai)
Kiến thức nền về timing, màu sắc, typography, bố cục, logo animation.
14. awesome-motion-design-agent-skills
Danh sách tổng hợp skill cho GSAP, Motion, Remotion, Lottie, Rive để khám phá thêm.
Nhóm 4: Thư viện animation, dùng được cho cả website
15. GSAP
Thư viện timeline mạnh, HyperFrames dùng nó bên dưới. Có bộ skill cho agent.
16. Motion (trước đây là Framer Motion)
Chuẩn quen thuộc cho micro-interaction trong React. Hữu ích khi bạn muốn đưa chuyển động từ video vào sản phẩm thật.
17. lottie-web
Khi cần animation nhẹ nhúng vào web/app thay vì file MP4.
Chọn combo nào?
- Video ra mắt sản phẩm/case study: HyperFrames + product-launch-motion.
- Mới bắt đầu: animate, được dẫn từng bước.
- Đã quen React: Remotion + Remotion Skills.
- Muốn video "có gu": thêm motion-design-skill của LottieFiles.
- Hiệu ứng cho website: Motion hoặc GSAP.
Trước khi cài: kiểm tra 5 phút
- Đọc
READMEvàSKILL.mdđể biết skill yêu cầu Claude làm gì. - Xem các script đi kèm, cảnh giác với lệnh xoá file hay gửi dữ liệu ra ngoài.
- Kiểm tra license nếu dùng cho khách hàng.
- Xem lần cập nhật gần nhất.
- Thử trong một thư mục riêng trước.
Cài vào Claude Code thế nào?
- Plugin: với repo hỗ trợ, ví dụ
/plugin marketplace add heygen-com/hyperframes. - Lệnh skills:
npx skills add <tác-giả>/<tên-repo>. - Thủ công: copy thư mục chứa
SKILL.mdvào~/.claude/skills/(mọi dự án) hoặc.claude/skills/(một dự án).
Máy cần Node.js 18+, ffmpeg, và Playwright/Chromium cho các skill render bằng trình duyệt.
Kết
Với designer, điểm hay nhất không phải là "AI làm video thay mình", mà là mình vẫn giữ quyền quyết định về nhịp điệu, typography và cảm giác chuyển động, chỉ bớt phần thao tác thủ công. Hãy chọn 2–3 công cụ hợp với việc bạn làm hằng ngày và biến chúng thành quy trình riêng.
Nguồn cảm hứng: bài tổng hợp của giangxai.com. Các link repo đã được kiểm tra ngày 16/10/2026.