Giangxai Nhận tài liệu

20 Repo Skill Làm Video Motion Graphics Bằng Code Với Claude Opus 5.5

Giang✓ Cập nhật 15 phút đọcXem dạng Markdown

Cập nhật: 15/10/2026. Số sao GitHub ghi trong bài là số liệu tại ngày cập nhật.

Vài tháng trước, muốn có một video giới thiệu sản phẩm có chữ bay, logo xoay, số liệu chạy lên… bạn gần như chỉ có hai lựa chọn: tự học After Effects, hoặc thuê người dựng.

Bây giờ có lựa chọn thứ ba: để AI viết video bằng code.

Nghe thì kỹ thuật, nhưng cách vận hành khá đơn giản. Bạn mô tả video mình muốn bằng lời. Claude viết code cho từng khung hình. Một "skill" (bộ hướng dẫn cài vào Claude Code) dạy Claude cách căn nhịp, chuyển cảnh, di chuyển camera cho đẹp. Cuối cùng một "engine" render tất cả ra file MP4.

Toàn bộ stack trong một câu: Opus 5.5 viết code, skill lo nhịp và camera, engine render ra MP4.
Những video motion graphics làm bằng Claude đang được chia sẻ nhiều trên X

Dưới đây là 20 repo GitHub đang được cộng đồng dùng nhiều nhất cho việc này. Mình đã mở từng repo để kiểm tra còn hoạt động, còn được cập nhật, và tóm tắt lại bằng tiếng Việt để bạn chọn nhanh.

Nhóm 1: 10 skill làm video motion graphics cho Claude

Đây là phần "bộ não" của quy trình. Mỗi skill có một thế mạnh riêng: có cái chuyên video ra mắt sản phẩm, có cái chuyên B-roll, có cái chuyên luật chuyển động.

1. claude-motion

Bộ công cụ motion design cho coding agent. Điểm đáng chú ý: skill có "gu" thẩm mỹ được viết sẵn, tự xem lại các khung hình mình vừa render để sửa lỗi, và cả âm thanh cũng được viết bằng code. Tác giả xây skill này riêng cho Opus 5.5.

2. claude-motion-design

Làm video chỉ với HTML + Playwright (trình duyệt tự động) + ffmpeg (công cụ xử lý video). Không cần Remotion, không cần After Effects, không lo phí license. Video demo của repo được làm trên Opus 5.5.

3. motion-graphics-skills

Trọn bộ 13 skill chuyên làm video ra mắt sản phẩm (launch video). Mỗi khung hình đều là code. README khuyên chạy trên Opus 5.5 để có kết quả tốt nhất.

4. claude-remotion-skill

Biến Claude thành một "editor" dựng video trên nền Remotion chỉ từ một prompt: tự thêm phụ đề, chèn B-roll, thiết kế âm thanh. Dùng được với Claude Code, Claude Desktop và claude.ai.

5. klik-anim-skill-creation

Gồm 2 skill: một "kinh thánh" về các nguyên lý animation và chuyển động camera theo chuẩn ngành, và một quy trình sản xuất video đầy đủ trên Remotion. Có thể cài riêng từng cái.

  • Hợp với: người muốn Claude hiểu vì sao một chuyển động trông đẹp, không chỉ làm theo mẫu.
  • Repo: github.com/t3knobox/klik-anim-skill-creation (~70 sao, chưa ghi license, hỏi tác giả nếu định dùng thương mại)

6. hyperframes-motion-reel-skill

Làm showreel cắt theo nhịp nhạc 120 BPM, 60 khung hình/giây, chạy trên HyperFrames. Kiểu video "mỗi nhịp trống là một cú chuyển cảnh" bạn hay thấy ở các video giới thiệu công nghệ.

7. product-launch-motion

Làm trọn một phim ra mắt sản phẩm: lồng tiếng, chuyển động camera, chỉnh màu, hiệu ứng âm thanh khớp nhịp, motion blur 60fps. Bản v2 được tác giả khuyên dùng cùng Claude Opus 5.5.

8. animate

Làm clip ngắn gói gọn trong một file canvas duy nhất. Skill dừng lại hỏi ý bạn ở các mốc: câu chuyện, phong cách, storyboard. Có 7 phong cách dựng sẵn, nhận nhạc của bạn và tự khớp nhịp, dùng được ảnh chụp màn hình sản phẩm thật.

  • Hợp với: người mới, muốn được dẫn từng bước thay vì nhận một kết quả "hên xui".
  • Repo: github.com/cth9191/animate (MIT, ~700 sao)

9. motion-design-skills

Bộ skill về nền tảng motion design: căn thời gian, màu sắc, typography, bố cục, logo, background, kèm hướng dẫn cho After Effects và Remotion.

10. hyperframes-student-kit

Bộ "Herk Edit Kit" của Nate Herk: 15 skill (bản gốc giới thiệu là 14, repo đã cập nhật thêm) và 406 thẻ motion graphics dựng sẵn. Dùng để cắt video theo transcript, làm reel, YouTube Shorts với Claude Code hoặc Codex.

Nhóm 2: 4 engine render video

Skill chỉ là bản hướng dẫn. Thứ thật sự biến code thành file MP4 là engine. Hầu hết các skill ở trên đều chạy trên một trong những engine dưới đây.

11. HyperFrames

Viết HTML, render ra video. Được HeyGen xây dựng riêng cho AI agent. Đây là engine gần như ai làm video bằng Claude cũng cài, vì chỉ cần biết HTML là đủ.

12. Remotion

Làm video bằng React. Lâu đời, cộng đồng lớn, nhiều mẫu có sẵn. Lưu ý: Remotion có điều khoản license riêng, một số công ty phải mua license khi dùng thương mại.

13. Remotion Skills

Bộ skill chính chủ của Remotion dành cho AI agent. Nếu bạn chọn Remotion, cài cái này trước.

14. GSAP

Thư viện animation JavaScript mà HyperFrames dùng để chạy timeline. Có bộ skill riêng cho agent, cài bằng lệnh:

npx skills add greensock/gsap-skills

Nhóm 3: "Gu" chuyển động và hệ sinh thái xung quanh

Video đẹp hay không phụ thuộc nhiều vào "taste": nhịp nhanh hay chậm, chuyển động mềm hay giật, thứ gì xuất hiện trước. Nhóm này giúp Claude có gu hơn, và mở rộng ra animation cho website.

15. motion-design-skill (LottieFiles)

Các nguyên lý motion design dùng được với bất kỳ engine nào: timing, easing (gia tốc chuyển động), cách sắp xếp thứ tự, 12 nguyên lý animation của Disney áp dụng cho giao diện.

16. awesome-motion-design-agent-skills

Bản đồ tổng hợp các skill cho GSAP, Motion, Remotion, Lottie và Rive. Dùng khi bạn muốn khám phá thêm ngoài danh sách này.

17. motion-graphics (Barty-Bart)

Tạo B-roll thẳng từ transcript video của bạn. Bạn nói gì trong video, skill dựng hình minh hoạ cho đoạn đó.

18. motion-dev-animations-skill

Skill làm animation cho website bằng Motion.dev, không phải làm video: hiệu ứng cuộn trang, chuyển động lò xo, tương tác kéo thả mượt 120fps.

19. Motion

Chính là thư viện Motion (tên cũ Framer Motion), dùng cho React và JavaScript. Nền tảng của skill số 18.

20. lottie-web

Khi bạn cần file animation Lottie (nhẹ, nhúng được vào web và app) thay vì video MP4.

Nên bắt đầu từ đâu?

20 repo là nhiều. Bạn không cần cài hết. Chọn theo việc bạn cần làm:

  • Làm video ra mắt sản phẩm/khoá học: HyperFrames (11) + product-launch-motion (7) hoặc motion-graphics-skills (3).
  • Làm YouTube, Shorts, video nói chuyện: HyperFrames (11) + hyperframes-student-kit (10) hoặc motion-graphics (17) để có B-roll từ transcript.
  • Mới bắt đầu, muốn được dẫn từng bước: animate (8).
  • Đã quen React: Remotion (12) + Remotion Skills (13).
  • Làm website có hiệu ứng mượt, không cần video: Motion (19) + motion-dev-animations-skill (18).
  • Muốn video nào cũng "có gu" hơn: cài thêm motion-design-skill của LottieFiles (15) bên cạnh bất kỳ lựa chọn nào ở trên.

Kiểm tra từng repo trước khi cài

Skill là đoạn hướng dẫn mà Claude sẽ làm theo, nhiều skill còn kèm script chạy trên máy bạn. Vì vậy đừng cài vội chỉ vì thấy danh sách hay. Trước khi cài, mất 5 phút kiểm tra:

  1. Đọc file SKILL.md và README: skill yêu cầu Claude làm gì, có tải gì từ internet không.
  2. Xem các file script đi kèm: nếu có lệnh xoá file, gửi dữ liệu ra ngoài hay đọc thư mục ngoài dự án, bỏ qua.
  3. Xem license: MIT/Apache thì thoải mái dùng thương mại. Repo không ghi license hoặc ghi điều khoản riêng (như Remotion) thì đọc kỹ trước khi dùng cho khách hàng.
  4. Xem lần cập nhật gần nhất: repo lâu không cập nhật có thể không chạy với phiên bản Claude Code mới.
  5. Thử trong một thư mục riêng, không cài thẳng vào dự án đang chạy.
Lưu bài này lại. Nhưng nhớ: danh sách hay đến đâu thì bạn vẫn là người quyết định cái gì được chạy trên máy mình.

Cách cài skill từ GitHub vào Claude Code và Claude Cowork

Mỗi repo có cách cài hơi khác nhau, nên việc đầu tiên luôn là mở README, tìm mục "Install". Nhưng nhìn chung chỉ có vài kiểu dưới đây.

Chuẩn bị máy (cho các skill render video)

  • Node.js bản 18 trở lên (một số repo yêu cầu 20+).
  • ffmpeg: công cụ ghép khung hình thành file MP4.
  • Playwright + Chromium cho các skill render bằng trình duyệt: npx playwright install chromium

Không chắc máy đã có chưa? Cứ mở Claude Code và nhờ: "Kiểm tra máy mình đã có Node, ffmpeg, Playwright chưa, thiếu gì thì cài giúp."

Với Claude Code: 4 cách cài

Cách 1: Cài dạng plugin (repo có hỗ trợ, ví dụ HyperFrames, animate). Gõ ngay trong Claude Code:

/plugin marketplace add heygen-com/hyperframes
/plugin install hyperframes@hyperframes

Với animate: /plugin marketplace add cth9191/animate rồi /plugin install animate@animate. Ưu điểm: cập nhật phiên bản mới dễ dàng.

Cách 2: Dùng lệnh npx skills add trong Terminal, ví dụ:

npx skills add AbubakrChan/product-launch-motion

Lệnh sẽ hỏi bạn muốn cài skill nào, cài cho dự án hiện tại hay cho mọi dự án. Sau này cập nhật bằng npx skills update.

Cách 3: Copy thủ công. Tải repo về (nút Code → Download ZIP trên GitHub, hoặc git clone), tìm thư mục có file SKILL.md, rồi copy cả thư mục đó vào:

  • ~/.claude/skills/ (trên Windows là C:\Users\<tên-bạn>\.claude\skills\) để dùng cho mọi dự án.
  • .claude/skills/ bên trong thư mục dự án nếu chỉ muốn dùng cho dự án đó.

Cách này dùng được với mọi repo, kể cả repo không có lệnh cài sẵn.

Cách 4: Mở repo như một dự án mẫu. Một số repo (như claude-motion) được thiết kế để bạn clone về rồi làm việc ngay bên trong. Skill đã nằm sẵn trong .claude/skills/ của repo. Bạn chỉ cần mở thư mục đó bằng Claude Code và nhờ Claude đọc README, cài phụ thuộc, chạy thử ví dụ đầu tiên.

Sau khi cài, mở phiên Claude Code mới, gõ / để xem tên skill đã hiện chưa, hoặc hỏi thẳng: "Bạn đang có những skill nào?"

Mẹo: bạn có thể giao cả việc cài cho Claude, kèm luôn bước kiểm tra an toàn:

Cài giúp mình skill từ repo github.com/[tác-giả]/[tên-repo]. Trước khi cài, đọc README và các file script, tóm tắt cho mình skill sẽ làm gì trên máy. Mình đồng ý thì mới cài, sau đó chạy thử một ví dụ ngắn.

Với Claude Cowork

Cowork chạy trong app Claude trên máy tính, không cần gõ lệnh Terminal. Có 2 cách:

  • Cài plugin từ GitHub: vào Customize → Plugins → Browse plugins, thêm nguồn bằng đường dẫn repo hoặc dạng rút gọn tác-giả/tên-repo (ví dụ heygen-com/hyperframes). Cách này dùng cho các repo có cấu trúc plugin.
  • Tải lên skill lẻ: tải thư mục chứa SKILL.md từ GitHub, nén thành file .zip (để SKILL.md nằm ngay trong thư mục gốc của zip), rồi vào Customize → Skills chọn tải lên. Mở phiên làm việc mới để skill có hiệu lực.

Tên menu có thể thay đổi một chút theo phiên bản app, nhưng đều nằm trong khu vực Customize.

Nên dùng Cowork hay Claude Code? Các skill render video cần Node, ffmpeg, Playwright chạy được trên máy. Nếu render trong Cowork bị lỗi hoặc báo thiếu công cụ, hãy chuyển sang Claude Code. Cowork phát huy tốt nhất với các skill dạng kiến thức như motion-design-skill (15) hay motion-design-skills (9): lên kịch bản, storyboard, chọn nhịp và màu sắc trước, rồi mang sang Claude Code để render.

Câu hỏi thường gặp

Không biết code có làm được video bằng Claude không?

Được. Bạn mô tả bằng lời, Claude viết code. Phần bạn cần làm là cài đặt ban đầu (Claude Code, Node.js, ffmpeg) và góp ý kết quả. Các skill như animate (8) còn dừng lại hỏi ý bạn ở từng bước.

HyperFrames và Remotion nên chọn cái nào?

Nếu không quen React, chọn HyperFrames vì chỉ cần HTML, license Apache-2.0 thoải mái dùng thương mại. Nếu đã có dự án React hoặc cần hệ sinh thái mẫu lớn, chọn Remotion và nhớ kiểm tra điều khoản license.

Có bắt buộc dùng Opus 5.5 không?

Không bắt buộc, nhưng nhiều skill trong danh sách được tác giả xây và thử trên Opus 5.5. Motion graphics cần model giỏi lập kế hoạch nhiều bước và tự kiểm tra khung hình, nên model mạnh sẽ cho kết quả ổn định hơn, ít phải sửa lại.

Kết luận

Làm video motion graphics không còn là việc riêng của dân dựng phim. Với đúng skill và engine, một người làm một mình cũng có thể ra video giới thiệu sản phẩm, reel, B-roll cho YouTube, chỉ bằng cách mô tả cho Claude.

Điều quan trọng không phải cài càng nhiều skill càng tốt, mà chọn đúng 2-3 cái hợp với việc bạn làm mỗi ngày, rồi biến nó thành quy trình cố định.

Nếu bạn đang quan tâm đến Kiếm tiền với AI, Vibe Coding, đăng ký ngay sự kiện FREE ngày 17/10 để cập nhật kiến thức về AI: https://comailo.vn/r/gcal

Nếu bạn muốn được hướng dẫn trực tiếp cách đưa Claude Code và AI Agent vào công việc kinh doanh của mình, hãy tham khảo chương trình Coaching 1:1 cùng GiangxAI.