# Dùng Claude Code và Remotion để tự động làm video

[Roboverse](https://homus.dev/speakers/roboverse) · [Roboverse](https://homus.dev/orgs/roboverse)

> Cài plugin Remotion vào Claude Code, rồi dùng prompt để làm lower third, biểu đồ động, quảng cáo, explainer, intro và render ra MP4 mà không viết code.

Topics: Plugins, Skills, Workflow

Canonical: https://homus.dev/talks/claude-code-can-now-automate-your-videos-remotion-opus-5-5

## 1. Motion graphics từ một prompt, không cần biết code

Video mở đầu bằng một lời khẳng định: giờ đây Claude Code có thể tạo ra những đoạn motion graphics "điên rồ" chỉ từ một prompt duy nhất, và tất cả những gì bạn thực sự cần là cài plugin Remotion vào bên trong nó. Remotion là một framework làm video bằng code React: mỗi đoạn video là một composition viết bằng code, xem trước được trong trình duyệt và render ra file video.

Nếu bạn vẫn đang mất hàng giờ để edit mọi thứ bằng tay, thì hôm nay người dẫn kênh Roboverse sẽ chỉ cách dựng và chạy workflow tự động hoá mới này. Anh bắt đầu với phần setup, và nói thẳng: đây là chỗ phần lớn mọi người bỏ cuộc trước cả khi thử, vì họ nghĩ mình phải biết lập trình. Nhưng bạn không cần, vì Claude Code lo toàn bộ phần cài đặt cho bạn chỉ từ một prompt setup duy nhất. Việc duy nhất bạn phải tự làm là hai lần cài nhanh trên máy tính.

Toàn bộ workflow trong video: cài hai thứ, gửi một prompt setup, rồi mỗi video là một prompt, sửa bằng feedback và cuối cùng render ra file.

## 2. Hai thứ cài trước: Claude Code và Node.js

Thứ cài đầu tiên là **Claude Code**, vốn nằm sẵn bên trong app Claude Desktop, nên anh chỉ việc tải app đó về (trên màn hình là trang "Download Claude" với nút "Download for macOS"). Nếu bạn dùng Windows, bạn còn phải cài **Git Bash** trước đó; video lướt qua trang tải Git cho Windows.

Thứ thứ hai là **Node.js**, thứ Remotion cần để chạy. Anh vào trang chính thức, tải bộ cài (installer) và bấm qua hết với các thiết lập mặc định.

Có một điểm cần lưu ý ở đây: bạn thực sự phải khởi động lại máy tính sau bước này. Nếu không, phần cài Remotion sẽ thất bại và báo rằng không tìm thấy Node.js.

Ba việc trước khi mở Claude Code: cài Claude Desktop (Windows thì thêm Git Bash), cài Node.js, và khởi động lại máy để Remotion tìm thấy Node.js.

## 3. Mở project trong tab Code, chọn Opus 5.5 và chế độ Auto

Khi máy đã bật lại, anh mở app Claude Desktop, vào tab **Code**, chọn **Local**, rồi chọn một folder trống làm nơi chứa toàn bộ project. Sau đó anh đặt model là **Opus 5.5**, model anh dùng cho mọi thứ trong video hôm nay, và bật mode **Auto** để nó chạy mọi lệnh mà không dừng lại hỏi anh mỗi lần.

Tới prompt setup, anh dán vào đúng prompt anh đã chuẩn bị rồi gửi đi. Như trên màn hình, Claude Code đi qua từng bước theo thứ tự. Bước 1 là kiểm tra phiên bản Node.js: nó chạy lệnh kiểm tra Node.js và npm, rồi báo rằng phiên bản Node.js của anh là 22, cao hơn hẳn mức 16. Bước 2 là tạo project Remotion, và nó bắt đầu chạy lệnh.

![Claude Code trong app Claude Desktop đang chạy prompt setup: Step 1 kiểm tra Node.js, Step 2 tạo Remotion project](https://homus.dev/photos/6_rCyryA6hg-0123.jpg)

Claude Code đi qua prompt setup theo thứ tự: "Step 1: Check your Node.js version" (Node.js 22, cao hơn mức 16 cần có), rồi "Step 2: Create the Remotion project". Ô nhập bên dưới đang ở mode Auto.

Nó tạo một project mới tên là `my-video`, rồi cài mọi thứ vào bên trong, cùng với bộ Remotion skills chính thức.

## 4. 12 Remotion skills và Remotion Studio

Bộ skills chính thức của Remotion có tổng cộng 12 skill. Theo lời anh, những skill này về cơ bản là một tập hướng dẫn dạy Claude Code cách viết code Remotion cho đúng, để nó không phải đoán bất cứ điều gì. Trang tài liệu của Remotion liệt kê đúng 12 skill: `/remotion-best-practices`, `/remotion-create`, `/remotion-markup`, `/remotion-studio`, `/remotion-render`, `/remotion-maps`, `/remotion-captions`, `/remotion-saas`, `/remotion-interactivity`, `/remotion-docs`, `/remotion-upgrade` và `/remotion-multimedia`. Tài liệu cũng ghi lệnh cài bộ skills này cho các coding agent khác ngoài plugin:

```
npx skills add remotion-dev/skills
```

Tiếp đó Claude Code khởi động một thứ gọi là **Remotion Studio** và đưa cho anh một link local. Anh mở link đó trong trình duyệt, và Studio hiện ra. Lúc này nó mới chỉ là một nền ô bàn cờ trống, vì chưa có gì được làm cả.

![Remotion Studio mới mở: danh sách Compositions bên trái chỉ có MyComp, khung preview là nền ô bàn cờ trống](https://homus.dev/photos/6_rCyryA6hg-0143.jpg)

Remotion Studio của project `my-video` vừa mở: cột Compositions bên trái mới có một mục mẫu, khung preview ở giữa là nền ô bàn cờ trống, bên dưới là timeline và nút Render.

Mọi thứ anh làm từ đây trở đi sẽ hiện ra trong danh sách bên trái và phát ngay ở khung preview này. Và một điều cần nhớ: mọi prompt anh sắp cho xem đều được gửi vào chính app Claude Code này.

## 5. Video 1: lower third cho podcast

Video đầu tiên là thứ bạn thấy trong gần như mọi podcast trên YouTube: tấm thẻ tên (name card, hay lower third) hiện ra phía dưới khách mời khi họ bắt đầu nói. Nếu bạn tự làm podcast hay phỏng vấn, đây có lẽ là thứ bạn sẽ dùng nhiều nhất.

Anh quay lại Claude Code và viết prompt. Như anh chỉ ra, prompt được viết đúng theo cách anh sẽ giải thích cho một editor: video này để làm gì, chữ gì nằm trên đó, và chuyện gì xảy ra theo từng giây. Phần prompt nhìn thấy trên màn hình như sau (tên khách mời và công ty là ví dụ dựng sẵn trong prompt; đầu câu thứ hai bị khung camera che mất một phần):

```
Use case: a lower third name card for a podcast interview, placed over talking head footage. Use a so[...]
blurred dark studio-style gradient as a stand-in background so the card is easy to see.

Content:
Name: Dr. Maya Chen
Title: AI Research Lead, Halden Labs

Animation:
0 to 1s: a thin cyan line draws on from left to right in the lower left third of the frame, like a trim path.
1 to 2s: a dark translucent panel wipes open from the line, with a subtle frosted glass look.
2 to 3s: the name slides up into place inside a mask so it appears to scroll in from nowhere, then the title scrolls in the same way slightly after.
3 to 6s: hold, with a very slow drift of the whole card to the right by a few pixels so it never feels frozen, and a small cyan accent square pulsing once.
6 to 8s: everything exits in reverse order, text scrolls down out of its mask, panel wipes closed, line retracts.
```

![Prompt lower third trong ô nhập của Claude Code, với các mục Use case, Content và Animation](https://homus.dev/photos/6_rCyryA6hg-0223.jpg)

Prompt cho lower third trong ô nhập của Claude Code (project `my-video`, model Opus 5.5, effort High): mục đích sử dụng, nội dung chữ, rồi kịch bản chuyển động theo từng khoảng giây từ 0 tới 8.

Anh gửi prompt đi, và sau khoảng một phút, một video mới tên **LowerThird** xuất hiện trong danh sách. Anh bấm play.

![Bản LowerThird đầu tiên: thẻ tên Dr. Maya Chen trên nền mờ có bóng người](https://homus.dev/photos/6_rCyryA6hg-0243.jpg)

Bản đầu tiên trong Remotion Studio: thẻ tên với đường kẻ cyan và ô vuông nhỏ, đặt trên một nền tối mờ có hình bóng một người phía sau.

Thật lòng mà nói, với lần thử đầu tiên, bản này đã trông giống những tấm thẻ tên bạn thấy trên các kênh podcast lớn. Nhưng có một thứ anh không thích: người bị làm mờ mà nó đặt ở nền trông hơi kỳ, và bản thân tấm thẻ đứng một mình thì hơi đơn điệu.

## 6. Sửa bằng feedback như nói với editor, trên một bản copy

Thay vì làm lại từ đầu với một prompt mới, bạn có thể đơn giản nói cho nó biết mình không thích gì, y như cách bạn nói với một editor. Và có một chi tiết nhỏ: anh còn bảo nó tạo một bản copy trước và chỉ sửa trên bản copy, để bản gốc giữ nguyên y như cũ, phòng khi anh muốn quay lại. Đây là prompt feedback anh viết, nguyên văn trên màn hình:

```
Okay this works but it looks a bit too plain. Before you change anything, duplicate the LowerThird composition and name the copy LowerThirdV2. Leave the original as it is, and make all these changes only in V2.

The blurry person in the background looks weird, get rid of it. Make it feel like a proper podcast studio instead, dark teal gradient with some soft amber and cyan bokeh lights slowly floating around, and keep the camera drifting a little so it doesn't feel frozen.

The card itself needs more going on. Add a small audio waveform under her title that moves like she's talking, and a little hexagon logo for Halden Labs on the right side of the card.

Also add a podcast logo in the top left that says "Deep Current, EP 27" and a topic tag in the top right that says "Can AI Replace Video Editors?"
```

![Câu trả lời trước của Claude với lệnh npx remotion render LowerThird, và prompt feedback mới trong ô nhập](https://homus.dev/photos/6_rCyryA6hg-0303.jpg)

Phía trên là cuối câu trả lời trước của Claude: mọi chuyển động dùng easing curve riêng, không cái nào linear, và lệnh để xuất video. Bên dưới là prompt feedback, câu yêu cầu tạo bản copy LowerThirdV2 đang được bôi chọn.

Ở cuối câu trả lời của lần trước, Claude cũng giải thích rằng mọi chuyển động dùng một easing curve tuỳ chỉnh, không cái nào là linear, các giá trị animation được viết trực tiếp để bạn chọn bất kỳ layer nào và chỉnh keyframe hay style ngay trong Studio, và muốn xuất ra file video thì chạy:

```
npx remotion render LowerThird
```

Anh gửi prompt feedback, và đây là phiên bản mới.

![LowerThirdV2: nền podcast studio màu teal với bokeh, logo Deep Current EP 27, tag chủ đề, waveform và logo lục giác Halden Labs](https://homus.dev/photos/6_rCyryA6hg-0937.jpg)

Bản LowerThirdV2: nền teal tối với các đốm bokeh hổ phách và cyan, logo podcast "Deep Current" kèm nhãn EP 27 ở góc trái, tag chủ đề "Can AI Replace Video Editors?" ở góc phải, waveform âm thanh dưới chức danh và logo lục giác Halden Labs bên phải tấm thẻ.

"Nhìn này", anh nói. Giờ nó trông tốt hơn hẳn, vì người ở nền đã bị bỏ đi. Và phần hay nhất là anh không động vào một dòng code nào. Anh chỉ nói mình muốn đổi gì, và Claude làm thay anh.

## 7. Video 2: biểu đồ chạy đua tới 100 triệu người dùng

Video thứ hai là một biểu đồ động (animated chart) với vài thanh bar và con số. Lý do anh làm cái này là vì đây là một trong những loại motion graphics tốn thời gian khủng khiếp khi edit. Trong ví dụ của anh, biểu đồ sẽ cho thấy ChatGPT đạt 100 triệu người dùng nhanh hơn bao nhiêu so với các app như Netflix, Spotify và TikTok.

Anh viết prompt cho biểu đồ, gửi đi, và kết quả trả về. Như bạn thấy, mọi thứ chạy rất mượt, và đó là điều anh thích ở nó: nó không chỉ đặt thanh bar vào đó, mà còn animate tất cả. Nhưng thứ ngầu nhất là lúc biểu đồ zoom vào và làm nổi bật mốc thời gian của ChatGPT bằng màu xanh lá sáng.

![Biểu đồ zoom vào: Instagram 2.5 years, TikTok 9 months, ChatGPT 2 months tô xanh lá sáng](https://homus.dev/photos/6_rCyryA6hg-0403.jpg)

Đoạn zoom trong bản đầu: Instagram 2.5 năm và TikTok 9 tháng là các thanh màu xám, còn ChatGPT với 2 tháng được tô xanh lá sáng, có glow và đường dẫn tới con số.

Tuy vậy, có hai thứ anh muốn đổi. Thứ nhất là cú nảy nhỏ (bounce) trên mỗi thanh bar. Thứ hai là các thanh màu xám của những công ty khác, anh muốn tô màu cho chúng.

## 8. Bản V2 của biểu đồ: giữ phần thích, đổi phần không thích

Giống như lần trước, anh bảo nó tạo một bản copy và chỉ thay đổi trên bản đó. Lần này anh còn nói cho nó biết mình thích gì, cụ thể là phần glow trên thanh của ChatGPT, để nó giữ nguyên phần đó y như cũ.

Anh gửi prompt và xem kết quả. Giờ mỗi app xuất hiện với màu riêng của nó: Netflix màu đỏ, Spotify màu xanh lá, Instagram với dải gradient từ tím sang cam, rồi tất cả mờ dần về màu xám ngay trước khi ChatGPT xuất hiện.

![Biểu đồ How long it took to reach 100 million users: Netflix 18 years đỏ, Spotify 11 years xanh lá, Twitter 5 years, Facebook 4.4 years](https://homus.dev/photos/6_rCyryA6hg-0938.jpg)

Bản V2 của biểu đồ "How long it took to reach 100 million users": Netflix 18 năm (đỏ), Spotify 11 năm (xanh lá), Twitter 5 năm và Facebook 4,4 năm (xanh dương). Các thanh giờ mang màu thương hiệu thay vì xám.

Theo anh, bản này trông đẹp hơn phần lớn các biểu đồ anh thấy trên những kênh công nghệ lớn.

Giờ khi bạn đã thấy cách vòng feedback hoạt động, anh chuyển sang làm hai video dài hơn. Và lần này, anh đi thẳng từ prompt tới kết quả, không qua bước sửa.

## 9. Video 3: quảng cáo 30 giây cho app Clipwise

Video đầu tiên trong hai video dài là một quảng cáo ra mắt (launch ad) cho một app. Anh tự bịa ra một app tên **Clipwise**, app biến video dài thành các video ngắn. Nhưng bạn có thể đặt sản phẩm của chính mình vào đó và giữ nguyên mọi thứ khác trong prompt. Anh dán prompt vào và gửi đi, và đây là quảng cáo 30 giây.

![Cảnh trong quảng cáo Clipwise: điện thoại màu tím hiện logo Clipwise trên nền gradient sáng](https://homus.dev/photos/6_rCyryA6hg-0603.jpg)

Một cảnh trong quảng cáo 30 giây: chiếc điện thoại tím với logo Clipwise trôi trên nền gradient hồng cam, biểu tượng app bay vào từ bên trái. Các cảnh khác trong quảng cáo giới thiệu tính năng như tìm khoảnh khắc hay nhất, caption tự động 30 ngôn ngữ và xuất một chạm lên mọi nền tảng.

Anh phải nói rằng toàn bộ video thực sự mượt, và nó hợp lý. Nghe thì có vẻ ngớ ngẩn, nhưng anh đã thấy rất nhiều quảng cáo app đơn giản là không hợp lý chút nào. Bản này thì đơn giản, đi thẳng vào vấn đề, và cho thấy vì sao khách hàng sẽ quan tâm. Nên nếu bạn có một sản phẩm hay một app, đây là thứ đáng để bạn thử.

## 10. Video 4: explainer hành trình của một prompt

Tiếp theo, anh tạo video dài thứ hai: một explainer đi theo một prompt từ lúc bạn bấm Enter tới lúc câu trả lời quay về. Anh dùng một prompt đã chuẩn bị cho video này, gửi đi và xem kết quả.

![Câu Write me a birthday poem for my mom được tách thành từng token, có số id dưới mỗi token, bộ đếm TOKENS 06](https://homus.dev/photos/6_rCyryA6hg-0643.jpg)

Cảnh mở của explainer: câu "Write me a birthday poem for my mom" được tách thành từng token, mỗi token kèm một con số id, bộ đếm ở góc phải tăng dần, caption "First, your words become tokens."

Thật lòng, theo anh, video này giống một cảnh trong phim tài liệu, nhưng đồng thời cũng cực kỳ thú vị, vì nó dùng toàn bộ những motion graphics đó để giải thích AI hoạt động thế nào ở hậu trường. Trong video, câu prompt được gõ vào ô "What can I help with?", tách thành token, các token bay qua bản đồ tới một data center ("They travel to a data center."), rồi tới cảnh hành lang server với bảng "Predicting next token" cho thấy xác suất của từ kế tiếp và dòng chữ "Thousands of chips predict the next word, one token at a time.", trước khi bài thơ chúc mừng sinh nhật hiện ra trong khung chat.

## 11. Video 5: intro 60 giây ghép từ bốn video trước

Còn một video nữa anh muốn thử với workflow này, nhưng lần này anh muốn đẩy nó xa hết mức có thể. Anh yêu cầu một đoạn intro 60 giây về chính công cụ này, dùng lại bốn video vừa làm trước đó. Đoạn đầu của prompt nhìn thấy trên màn hình:

```
Use the Remotion skills. Create a new composition called MetaIntro60, 1920x1080, 30fps, 60 seconds. This one should be the most visually advanced thing we've made so far.
```

Phần tiếp theo của prompt (bị khung camera che một phần) mô tả ý tưởng: một intro cho thấy Claude Opus 5.5 và Remotion cùng nhau biến một prompt duy nhất thành motion graphics hoàn chỉnh; người xem phải hiểu ngay lập tức rằng prompt đi vào, code được viết, animation thật đi ra, và một video hoàn chỉnh được render. Về logo, prompt yêu cầu dùng logo Claude chính thức và logo Remotion chính thức dưới dạng file SVG thật lấy từ nguồn chính thức, không được tự vẽ lại hay làm gần đúng, và nếu không lấy được file chính thức thì phải dừng lại báo trước khi làm tiếp. Bên dưới còn một mục "Story in eight beats", tức câu chuyện chia làm tám nhịp.

Anh gửi prompt đi. Video này tốn thời gian nhất trong tất cả, nên nó chạy lâu hơn những cái còn lại một chút. Trong kết quả có một cảnh dựng hẳn một timeline bằng motion graphics, ghép bốn video trước (LowerThirdV2, RaceTo100MV2, AppLaunchPromo, JourneyOfAPrompt) thành từng clip nối nhau.

Theo anh, video này ở một đẳng cấp hoàn toàn khác. Không chỉ trông cực kỳ cao cấp và chuyển động mượt từ đầu tới cuối, nó còn tìm được một cách rất hay để kết hợp tất cả các video anh đã làm từ đầu tới giờ. Anh cho rằng bản này đẹp hơn bất kỳ intro nào anh có thể tự làm, kể cả khi anh bỏ ra cả một tuần cho nó.

![Logo Claude và logo Remotion đặt cạnh nhau giữa các hạt sáng cam và xanh](https://homus.dev/photos/6_rCyryA6hg-0843.jpg)

Khung kết của intro: logo Claude và logo Remotion đứng cạnh nhau giữa các hạt sáng màu cam và xanh, đúng như prompt yêu cầu dùng logo chính thức.

## 12. Render tất cả ra MP4 bằng một prompt

Việc duy nhất còn lại là đưa tất cả những video này ra khỏi khung preview, thành file video thật. Và việc đó cũng chỉ là một prompt. Anh gửi prompt render đi, và Claude render từng video một, cả các bản gốc lẫn các bản đã sửa, rồi đặt chúng vào một folder tên `renders` bên trong project.

Với thêm một tin nhắn ngắn nữa (trên màn hình bắt đầu bằng "Please number the files from 1 to 7 in the order..."), anh bảo nó đánh số các file từ 1 tới 7 theo thứ tự đã làm. Claude trả lời rằng nó sẽ đánh số theo thứ tự tạo, xem trước những gì đang có trong `renders/`, chạy hai lệnh, rồi liệt kê kết quả.

![Claude liệt kê bảy file MP4 đã đánh số trong folder renders](https://homus.dev/photos/6_rCyryA6hg-0923.jpg)

Bảy file đã được đánh số: 1-LowerThird, 2-LowerThirdV2, 3-RaceTo100M, 4-RaceTo100MV2, 5-AppLaunchPromo, 6-JourneyOfAPrompt và 7-MetaIntro60, tất cả là file .mp4.

Anh mở folder `renders`, và tất cả ở đó: bảy video dưới dạng file MP4, mỗi bản đã sửa nằm ngay cạnh bản gốc của nó. Từ đây bạn có thể thả chúng vào bất kỳ phần mềm edit nào, hoặc đăng luôn.

Lần tới khi bạn cần một đoạn intro, một biểu đồ hay một animation cho video của mình, bạn có thể dùng workflow đơn giản này và làm xong trong vài phút. Cuối video, anh giới thiệu một video khác trên kênh về cách tạo mọi loại video, từ phim AI chân thực tới quảng cáo UGC, rồi cảm ơn người xem và hẹn gặp ở video sau.

## Nguồn và liên kết

- Tên gốc: Claude Code Can Now Automate Your Videos (Remotion + Opus 5.5)
- Sự kiện: [YouTube](https://homus.dev/events/youtube)
- Video gốc: [https://www.youtube.com/watch?v=6_rCyryA6hg](https://www.youtube.com/watch?v=6_rCyryA6hg)

- Kênh YouTube Roboverse (Roboverse): [youtube.com/channel/UCZ3KGRwOA_uONNE_6VGG2bA](https://www.youtube.com/channel/UCZ3KGRwOA_uONNE_6VGG2bA)

- Remotion, plugin cho Claude Code (cách cài từ app Claude Desktop hoặc từ terminal): [remotion.dev/docs/ai/claude-code-plugin](https://www.remotion.dev/docs/ai/claude-code-plugin)

- Remotion Agent Skills, danh sách 12 skill và lệnh cài: [remotion.dev/docs/ai/skills](https://www.remotion.dev/docs/ai/skills)

- Repo Remotion skills: [github.com/remotion-dev/skills](https://github.com/remotion-dev/skills)

- Tải app Claude Desktop: [claude.com/download](https://claude.com/download)

- Tải Node.js: [nodejs.org/en/download](https://nodejs.org/en/download)

- Tải Git (có Git Bash cho Windows): [git-scm.com/downloads](https://git-scm.com/downloads)

Nguồn: https://homus.dev/talks/claude-code-can-now-automate-your-videos-remotion-opus-5-5 · cập nhật 2026-10-17