Khoa là developer duy nhất ở Bè Gỗ, một agency nhỏ ở Đà Lạt. Khách là Sổ Tay Bếp, kênh dạy nấu ăn, đặt một series 12 tập "Mẹo bếp 30 giây": mỗi tập một tiêu đề, ba bước, một cảnh quay món ăn, cùng màu, cùng phông.

Editor của agency dựng tập 1 và tập 2 bằng tay. Đến tập 3, khách xin đổi màu chữ. Editor phải mở lại cả ba tập, sửa từng chữ một. Khoa nhìn và nghĩ: đây là việc của một cái khuôn, không phải của đôi tay.

Anh mở Claude Code trên máy tính, mô tả khung 1080×1920, màu, phông, và phần nào thay đổi mỗi tập. Claude Code tạo một dự án Remotion, viết component, chạy bản xem thử. Khoa chỉ ra hai chỗ sai, nó sửa. Từ tập 4, mỗi tập mới là một file dữ liệu vài dòng và một lệnh.

Bài cuối này dành cho người có môi trường lập trình, hoặc làm cùng một developer. Nếu bạn không viết code, hãy đọc để biết khi nào nên đề xuất cách làm này.

Tổng quan bài học

Năm bài trước, Claude lo phần chữ và cấu trúc. Bài này thêm phần code: một template dùng cho cả series.

Sau bài này bạn sẽ…

• Biết khi nào template bằng code đáng công, khi nào không.
• Tách phần cố định và phần thay đổi của một series.
• Viết prompt cho Claude Code và đọc được đoạn code nó trả về.

Câu 1/2

"Video bằng code" nghĩa là gì?

Khuôn và nhân

Template tách video thành hai phần: thứ giữ nguyên mọi tập (khung, màu, phông, chuyển động) và thứ thay đổi (tiêu đề, các bước, clip quay thật).

Series "Mẹo bếp 30 giây" của Sổ Tay Bếp có 12 tập. Phần nào nên cố định trong template, phần nào thay đổi mỗi tập?

Xếp thẻ 0/6 · chạm thẻ rồi chạm cột, hoặc kéo thả

Cố định trong template

Thay đổi mỗi tập

💡 Template video bằng code với Claude Code

💡 Kiến thức

Template video bằng code với Claude Code

Một chương trình nhận dữ liệu của từng tập (tiêu đề, các bước, đường dẫn clip) và xuất ra video theo cùng một khuôn. Claude Code viết và sửa chương trình đó, chạy lệnh xuất trên máy bạn; bạn mô tả, đọc, kiểm tra.

Hình dung

Như khuôn bánh trung thu: làm khuôn một lần, mỗi mẻ chỉ đổi nhân.

Ví dụ

Khoa nhờ Claude Code dựng template Remotion cho "Mẹo bếp 30 giây". Mỗi tập mới chỉ là một file JSON vài dòng và một lệnh render.

⭐ Nhớ nhé

• Cần máy tính có môi trường lập trình; đây không phải việc làm trên điện thoại.
• Code đáng làm khi có nhiều tập cùng khuôn; một video lẻ thì ứng dụng dựng nhanh hơn.
• Đọc code và xem bản xuất trước khi tin; Claude Code có thể viết sai.
• Kiểm tra giấy phép của thư viện bạn dùng trước khi làm cho khách.

Remotion là một thư viện React để làm video bằng code. Đây là phiên bản rút gọn của component Claude Code viết cho Khoa:

import {AbsoluteFill, useCurrentFrame, interpolate} from 'remotion';

type Props = {title: string; steps: string[]};

export const MeoBep: React.FC<Props> = ({title, steps}) => {
  const frame = useCurrentFrame();
  // tiêu đề hiện dần trong 15 khung hình đầu (nửa giây ở 30 fps)
  const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
  return (
    <AbsoluteFill style={{backgroundColor: '#FFF4E0', padding: 80, color: '#4A2E1A'}}>
      <h1 style={{fontSize: 84, opacity}}>{title}</h1>
      {steps.map((s, i) => (
        <p key={i} style={{fontSize: 52, opacity: frame > 60 + i * 90 ? 1 : 0}}>
          {i + 1}. {s}
        </p>
      ))}
    </AbsoluteFill>
  );
};

Khai báo khung 1080×1920, 30 fps, 900 khung hình:

<Composition
  id="MeoBep"
  component={MeoBep}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={900}
  defaultProps={{title: 'Cắt hành không cay mắt', steps: ['Ướp lạnh 10 phút', 'Dao thật bén', 'Cắt gần vòi nước']}}
/>

Mỗi tập là một file dữ liệu, render bằng một lệnh:

npx remotion render src/index.ts MeoBep out/tap04.mp4 --props=./episodes/tap04.json

Các bước với Claude Code

Sắp các bước dựng template bằng Claude Code.

Sắp thứ tự dùng mũi tên để đổi chỗ

1. 1Bạn xem bản xem thử, chỉ ra chỗ sai, Claude Code sửa
2. 2Render tập 1, xem trên điện thoại
3. 3Tách dữ liệu từng tập ra file JSON
4. 4Render các tập còn lại bằng cùng một lệnh
5. 5Claude Code tạo dự án, viết component, chạy bản xem thử
6. 6Làm tay một tập mẫu trong ứng dụng dựng để chốt kiểu dáng
7. 7Mô tả template cho Claude Code: khung, màu, phông, phần nào thay đổi

Đếm khung hình

Template đặt 30 khung hình mỗi giây (fps). Một tập dài 30 giây có bao nhiêu khung hình?

100 khung hình

Code hay ứng dụng dựng?

Code không phải lúc nào cũng nhanh hơn. Nó thắng khi việc lặp lại, và thua khi việc chỉ làm một lần.

Mỗi lượt, chọn cách làm hợp lý hơn.

Lượt 1/4

Lượt 2/4

Lượt 3/4

Lượt 4/4

Chấm prompt của Khoa

Chấm điểm

Prompt gửi Claude Code: "Tạo dự án Remotion cho series Mẹo bếp 30 giây. Khung 1080×1920, 30 fps, 900 khung hình. Nền kem #FFF4E0, chữ nâu đậm. Mỗi tập nhận props: title và steps (mảng 3 chuỗi). Tiêu đề hiện dần trong 15 khung hình đầu; mỗi bước hiện lần lượt. Đọc dữ liệu từ thư mục episodes/*.json. Viết README cách render một tập."

Thông số kỹ thuật rõ (khung, fps, thời lượng)

Tách rõ phần cố định và phần thay đổi

Có cách kiểm tra kết quả

Có chỗ cho cảnh quay thật

Đọc vài dòng lệnh

Không cần viết, nhưng nên đọc được. Hai lệnh ffmpeg (công cụ xử lý video bằng dòng lệnh) mà Claude Code hay đề xuất:

# cắt video ngang thành dọc 9:16 rồi đổi về 1080×1920
ffmpeg -i ngang.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" -c:a copy doc.mp4

# gắn cứng phụ đề SRT lên hình, xuất ra file mới
ffmpeg -i tap01.mp4 -vf "subtitles=tap01.srt" -c:a copy tap01_sub.mp4

Câu 1/3

Lệnh ffmpeg -i ngang.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" doc.mp4 làm gì?

Thử ngay

Chọn một series có ít nhất 5 tập cùng khuôn. Nếu bạn có môi trường lập trình, làm thật với Claude Code; nếu không, viết bản mô tả để giao cho developer.

Thiết kế template cho series của bạn

Series là gì, mỗi tập dài bao lâu?Phần cố định (khung, màu, phông, chuyển động)Phần thay đổi mỗi tập (dữ liệu trong JSON)Prompt gửi Claude CodeCách bạn kiểm tra tập đầu tiên

Tự kiểm

fps × số giây = số khung hình, đã tính đúng Có chỗ cho cảnh quay thật, không chỉ chữ chạy Có bước xem trước một tập trước khi render cả loạt Mọi lệnh xử lý hàng loạt được thử trên bản sao trước

Tự động lưu trong trình duyệt của bạn.

Mang theo

• Template bằng code đáng công khi có nhiều tập cùng khuôn; video lẻ thì dùng ứng dụng dựng.
• Tách phần cố định (khung, màu, chuyển động) khỏi phần thay đổi (dữ liệu từng tập).
• Claude Code viết và chạy code trên máy bạn; cần môi trường lập trình.
• Đọc code, thử trên bản sao, xem bản xuất trên điện thoại trước khi tin.
• Người quay, Claude viết, công cụ xuất; người duyệt cuối.

Nhìn lại

Việc nào trong quy trình video của bạn lặp lại đủ nhiều để đáng viết code?Nhìn lại cả khoá: bạn sẽ chia việc người · Claude · công cụ thế nào?Video đầu tiên bạn sẽ làm trọn quy trình này là video gì?

Tự động lưu trong trình duyệt của bạn.