Claude Code × HyperFrames — คู่มือสร้างคลิปวิดีโอ

PLAYBOOK · สำหรับมือใหม่

เลือกหัวข้ออ่าน

สร้างคลิปวิดีโอ
ด้วย Claude Code × HyperFrames

จาก "มีไอเดีย" ไปถึง "ไฟล์ MP4" โดยไม่ต้องมีความรู้ด้าน video editing — บอก Claude เป็นภาษาคนแล้วได้วิดีโอ

🤖 Claude Code

🎬 HyperFrames

✨ GSAP Animation

📱 TikTok · YouTube · LinkedIn

นาที / คลิป

Video Edit Skills

Use Cases

MP4

ผลลัพธ์

▶ ดูตัวอย่างผลลัพธ์

ทำความรู้จัก

Claude Code × HyperFrames คืออะไร?

คือการนำ AI Coding Agent มาสั่งให้สร้างวิดีโอโดยอัตโนมัติ — คุณอธิบายเป็นภาษาคน แล้วให้ Claude Code เขียน HTML + Animation แล้ว HyperFrames แปลงเป็น MP4

🤖

Claude Code — ผู้กำกับวิดีโอ AI

AI Coding Agent ที่รู้จัก HyperFrames ผ่าน Skills — คุณบอกว่าอยากได้วิดีโอแบบไหน Claude จัดการทุกอย่างให้ตั้งแต่ HTML จน render

🎬

HyperFrames — เครื่องมือแปลง HTML → วิดีโอ

Open-source framework ที่แปลง HTML ธรรมดาให้กลายเป็น MP4 คุณภาพสูง แบบ frame-by-frame ผ่าน Chrome + FFmpeg — เหมือนสร้างเว็บแต่ได้วิดีโอ

✨

GSAP — ระบบ Animation

Library animation ระดับ Professional ที่ Claude ใช้สร้าง animation ใน HTML — fade, slide, bounce, kinetic typography ทุกอย่างที่เห็นในวิดีโอ

ทำอะไรได้บ้าง? TikTok Hook Videos · Product Demo · Corporate Presentation · Explainer Video · Data Visualization · Brand Reel · Transparent Overlay · Subtitled Clips — ทุกอย่างออกมาเป็น MP4 หรือ MOV ไฟล์

เตรียมตัว

ต้องเตรียมอะไรบ้าง?

ต้องการแค่ 2 อย่างหลัก — ติดตั้งได้ใน 5 นาที

🖥️

แนะนำเป็นอย่างยิ่ง

Claude Code Desktop

ใช้ Claude Code Desktop แทนการรัน Claude Code ผ่าน terminal — เปิดโฟลเดอร์ project ได้ทันที, มี UI ที่ใช้งานง่ายกว่า, ไม่ต้องจัดการ terminal เอง และ Skills ทำงานได้ทันทีหลัง install

ดาวน์โหลด Claude Code Desktop →

สิ่งที่ต้องการ	จำเป็น?	วิธีติดตั้ง	หมายเหตุ
Claude Code Desktop ⭐	ต้องมี	claude.ai/download	แนะนำ — ง่ายกว่าใช้ผ่าน terminal มาก
FFmpeg	ต้องมี	macOS: `brew install ffmpeg` Windows: `winget install ffmpeg`	ใช้ encode วิดีโอ — ติดตั้งครั้งเดียว
video-use	ไม่บังคับ	github.com/browser-use/video-use	สำหรับให้ AI วิเคราะห์/ตัดต่อวิดีโอโดยตรง
Docker	ไม่บังคับ	docker.com/products/docker-desktop	สำหรับ render ที่ reproducible 100%

ตรวจสอบ FFmpeg: เปิด terminal แล้วรัน ffmpeg -version — ถ้าเห็น version number แสดงว่าพร้อมแล้ว

ติดตั้ง

ติดตั้ง HyperFrames — บอก Claude Code ได้เลย

หลังติดตั้ง Claude Code Desktop และ FFmpeg แล้ว ไม่ต้องเปิด Terminal — แค่พิมพ์บอก Claude Code โดยตรง ทำครั้งเดียวตลอดชีพ

★

พิมพ์ข้อความนี้ใน Claude Code Desktop

เปิด Claude Code Desktop แล้วพิมพ์ข้อความด้านล่างนี้ — Claude จะจัดการติดตั้ง HyperFrames ให้ทั้งหมดโดยอัตโนมัติ

💬 พิมพ์ใน Claude Code Desktop

ติดตั้ง https://github.com/heygen-com/hyperframes

💡 หลังติดตั้งเสร็จ ให้ restart Claude Code session — จะเห็น slash commands ปรากฏขึ้นมาเลย

Slash Commands ที่ได้ทันที:

/hyperframes /hyperframes-cli /hyperframes-media /gsap /website-to-hyperframes

หลังจากนั้น — เริ่มสร้างวิดีโอได้เลย:

1. เปิดโฟลเดอร์ที่ต้องการใน Claude Code Desktop

2. พิมพ์ /hyperframes แล้วบอก Claude ว่าต้องการวิดีโออะไร

3. Claude จัดการทุกอย่างให้ — รัน npx hyperframes render เมื่อพอใจ

Workflow หลัก

จากไอเดียถึง MP4 — ใน 5 ขั้นตอน

ทุกครั้งที่สร้างวิดีโอ ทำตาม flow นี้ — ใช้เวลาน้อยกว่า 5 นาทีสำหรับวิดีโอสั้น

💬

Step 1

Prompt Claude

พิมพ์ /hyperframes แล้วบอกว่าต้องการอะไร

⚙️

Step 2

Claude เขียน HTML

Claude สร้าง index.html พร้อม animation อัตโนมัติ

👁️

Step 3

Preview

ดูผลใน browser ที่ localhost — เห็นทันที

🔄

Step 4

Iterate

บอก Claude ให้ปรับ เหมือนคุยกับ video editor

🎬

Step 5

Render MP4

รันคำสั่งเดียวได้ไฟล์ออกมา

Render Command: npx hyperframes render --output final.mp4 — รันใน terminal ในโฟลเดอร์ project

กฎทอง 3 ข้อสำหรับมือใหม่

1. เริ่ม prompt ด้วย /hyperframes เสมอ
ถ้าไม่ใส่ Claude อาจเขียน HTML ผิดโครงสร้าง ทำให้วิดีโอ render ไม่ออก

2. Iterate ทีละนิด อย่า prompt ใหม่ทั้งหมด
บอก "ทำ title ใหญ่ขึ้น 2 เท่า" ดีกว่า prompt วิดีโอทั้งหมดใหม่

3. Preview ก่อน Render เสมอ
Preview เร็วมาก ดูให้ถูกก่อนค่อย render จะได้ไม่เสียเวลา

Playbook

6 Use Cases — Copy & Paste ได้เลย

เลือก use case ที่ตรงกับงาน แล้ว copy prompt ไปใช้ใน Claude Code ได้ทันที — ปรับข้อความในวงเล็บ [ ] ให้เป็นของคุณ

TikTok · Reels · Shorts

📱 Hook Video 9:16

คลิปสั้น 15–30 วินาที ดึงดูดความสนใจตั้งแต่ 3 วินาทีแรก

＋

เหมาะกับ

TikTok, Instagram Reels, YouTube Shorts
Product teaser สั้น ๆ
Educational hooks
Personal branding clips

ข้อกำหนดที่ต้องระบุใน Prompt

ระยะเวลา: 15–30 วินาที
Aspect ratio: 9:16 vertical
Hook sentence แรก (สำคัญมาก)
Topic / สิ่งที่ต้องการสื่อ

Prompt ที่ใช้ได้เลย

Claude Code — พิมพ์ใน chat

/hyperframes สร้าง TikTok hook video 9:16 ความยาว 20 วินาที
เรื่อง: [หัวข้อที่ต้องการสื่อ]
Hook แรก: "[ประโยคดึงดูดความสนใจ เช่น คุณรู้ไหมว่า...]"

สไตล์:
- bouncy captions แบบ hype tone ขนาดใหญ่
- พื้นหลังสีเข้ม gradient
- ตัวอักษรเคลื่อนไหว scale-pop
- เพิ่ม TTS narration เสียงผู้หญิงพูด script

Iteration Prompts (ปรับหลัง draft แรก)

พูดแบบนี้กับ Claude:

ทำ caption ใหญ่ขึ้น 30% เปลี่ยนพื้นหลังเป็นสีม่วง เพิ่ม emoji ข้างตัวอักษร ทำให้ animation เร็วขึ้น snappy เพิ่ม beat ใหม่ตรงท้าย

Product · SaaS · App

🛍️ Product Demo Video

นำเสนอ product ให้น่าสนใจ พร้อม features และ CTA

＋

เหมาะกับ

Landing page video
App store preview
Product launch announcement
Social media ad

Warm Start — ให้ context ที่มีอยู่

URL ของ website product
รูป screenshot / logo
Feature list
Target audience

Prompt แบบ Warm Start (แนะนำ)

Claude Code — ให้ URL แล้ว Claude วิเคราะห์เอง

/hyperframes ดูเว็บไซต์นี้ [URL ของ product] แล้วสร้าง
product demo video 16:9 ความยาว 30–45 วินาที

สิ่งที่ต้องการ:
- เปิดด้วย hook ดึงดูด 3 วินาที
- นำเสนอ feature หลัก 3 อย่าง
- ปิดด้วย CTA "[ข้อความ CTA]"
- สไตล์: clean corporate, smooth transitions
- เสียงพากย์ professional female voice

Prompt แบบ Cold Start (ไม่มี URL)

Claude Code — บรรยายเอง

/hyperframes สร้าง product demo video 16:9 ความยาว 30 วินาที
สำหรับ: [ชื่อ product — อธิบายสั้น ๆ ว่าทำอะไร]

Features ที่ต้องการนำเสนอ:
1. [Feature 1]
2. [Feature 2]
3. [Feature 3]

สไตล์: smooth, minimal, สีหลัก [สีแบรนด์]
CTA ท้ายวิดีโอ: "[ข้อความ]"

Iteration ที่ใช้บ่อย:

ใส่ logo ที่ assets/logo.png มุมขวาบน เพิ่ม lower third ชื่อ feature ทำ background เป็น gradient สีแบรนด์ เพิ่ม progress bar ด้านล่าง

Corporate · LinkedIn

💼 Corporate / LinkedIn Video

วิดีโอมืออาชีพสำหรับ B2B, LinkedIn, presentation

＋

เหมาะกับ

Company announcement
LinkedIn thought leadership
Investor pitch teaser
Event recap

Vocabulary ที่ควรใช้

สไตล์: "clean", "professional", "minimal"
Motion: "smooth", "corporate fade"
Caption: "corporate tone"
Transition: "calm crossfade"

Prompt ตัวอย่าง

Claude Code

/hyperframes สร้าง LinkedIn video 16:9 ความยาว 45 วินาที เกี่ยวกับ: [หัวข้อ/ข่าวสาร] โครงสร้าง: - Hook: ประโยคเปิดดึงดูดใจ 3 วินาที - ข้อมูลหลัก 3 จุด แต่ละจุด 10 วินาที - CTA ปิด 5 วินาที สไตล์: - Swiss Grid layout clean minimal - สีหลัก navy blue และ white - Typography: corporate tone, serif headings - Transition: smooth calm crossfade - เสียงพากย์: professional male voice

Iteration ที่ใช้บ่อย:

เพิ่ม data numbers ให้โดดเด่นขึ้น ใส่ company logo ตรงกลางเปิด เพิ่ม subtle background pattern ทำ lower third สำหรับ speaker name

Explainer · Tutorial

📖 Explainer / Tutorial Video

อธิบาย concept ซับซ้อนให้เข้าใจง่าย ด้วย animation

＋

เหมาะกับ

How-to videos
Educational content
Process walkthrough
Onboarding videos

เทคนิค Animation ที่เหมาะ

Step-by-step reveal (progressive)
Diagram animation (decision tree)
Text typewriter effect
Icon + text combo

Prompt ตัวอย่าง (จาก PDF/Document)

Claude Code — Warm Start จาก Document

/hyperframes อ่านเอกสารที่แนบมาแล้วสร้าง explainer video 16:9 ความยาว 60 วินาที สรุป key points หลัก 5 ข้อ สไตล์: - Tutorial tone — typewriter captions - Progressive reveal ทีละ step - ใช้ icon + text combo - สีสว่าง clean background - เสียงพากย์: tutorial male voice # แนบไฟล์ PDF หรือ paste ข้อความที่ต้องการสรุป

Prompt สำหรับ Process / Flowchart

Claude Code — สร้าง Animated Flowchart

/hyperframes สร้าง animated flowchart video 16:9 ความยาว 30 วินาที แสดง process: [ขั้นตอน A → B → C → D] - ใช้ decision-tree example เป็น base - แต่ละ step reveal ทีละอย่าง - มี connecting lines วาดตาม animation - สไตล์: clean, สีฟ้า-ขาว

Iteration ที่ใช้บ่อย:

ทำ step highlight ชัดขึ้น เพิ่ม pause 1 วินาทีระหว่าง step ใส่เลขกำกับแต่ละขั้นตอน ทำตัวอักษรโตขึ้น ดูง่ายขึ้น

Data · Stats · Report

📊 Data Visualization Video

แปลง CSV หรือตัวเลขให้เป็น animated chart สวยงาม

＋

เหมาะกับ

Monthly/quarterly reports
KPI summary videos
Market data stories
Bar chart race

ข้อมูลที่ให้ Claude ได้

CSV file
ตัวเลข paste ตรง ๆ
ตาราง Excel (paste as text)
URL ที่มี data

Prompt ตัวอย่าง

Claude Code — แปลง Data เป็นวิดีโอ

/hyperframes แปลง data ด้านล่างนี้เป็น animated bar chart video
16:9 ความยาว 20 วินาที

Data:
Q1: 1.2M
Q2: 1.8M
Q3: 2.4M
Q4: 3.1M

สไตล์:
- NYT Graph style (editorial)
- Bar animate ขึ้นทีละ bar
- ตัวเลขนับขึ้น counter animation
- สีหลัก navy + gold accent
- Title: "[ชื่อ chart]"

Iteration ที่ใช้บ่อย:

เพิ่ม % growth label บน bar ทำ highlight bar ที่สูงที่สุด เพิ่ม source credit ท้ายวิดีโอ ทำ bar race แทน static bars

Brand · Identity

🎨 Brand Reel / Intro Video

วิดีโอแสดงตัวตนแบรนด์ ใช้เปิด presentation หรือ channel intro

＋

เหมาะกับ

YouTube channel intro
Presentation opener
Brand identity showcase
Logo reveal animation

สิ่ง Asset ที่เตรียมไว้ได้

Logo file (PNG/SVG) ใน assets/
Brand colors (HEX)
Brand font ถ้ามี
Background music ใน assets/

Prompt ตัวอย่าง (Capture จากเว็บ)

Claude Code — ดึง brand จากเว็บ

/website-to-hyperframes เปิดเว็บ [URL แบรนด์] แล้วสร้าง brand intro video 16:9 ความยาว 10 วินาที - ดึง colors, fonts, และ logo จากเว็บ - เปิดด้วย logo reveal animation dramatic - ตามด้วย tagline fade in - ปิดด้วย website URL - สไตล์: premium, cinematic, dreamy motion - เพิ่มเพลงจาก assets/music.mp3 ถ้ามี

Prompt แบบ Manual

Claude Code — กำหนดเอง

/hyperframes สร้าง logo reveal animation 16:9 ความยาว 8 วินาที

- Logo อยู่ที่ assets/logo.png
- สีหลัก: [HEX สีหลัก], สีรอง: [HEX]
- Animation: logo particle burst reveal ตรงกลาง
- Tagline "[ข้อความ]" fade in หลัง logo
- Motion: dramatic expo.out
- จบด้วย fade to black

Iteration ที่ใช้บ่อย:

ทำ logo reveal ช้าลง cinematic เพิ่ม particle effect รอบ logo เปลี่ยน background เป็น dark gradient ทำ transparent MOV สำหรับ overlay

Quick Reference

Slash Commands & CLI ที่ใช้บ่อย

จำ command หลักไว้ 5 อัน — ครอบคลุม 90% ของงานสร้างวิดีโอ

/hyperframes

สร้างและแก้ไข Composition

ใช้เริ่มทุก prompt ที่เกี่ยวกับการสร้างหรือแก้ไขวิดีโอ — โหลด context ที่ถูกต้องให้ Claude

/hyperframes-media

จัดการ Audio / TTS

สร้างเสียงพากย์ TTS, transcribe audio, ลบ background ออกจากรูป — ใช้ก่อน prompt วิดีโอที่ต้องการเสียง

/hyperframes-cli

คำสั่ง CLI ทุกอย่าง

init, preview, render, lint, validate, doctor — ถามเกี่ยวกับคำสั่ง terminal ของ HyperFrames

/gsap

GSAP Animation

ขอ animation ซับซ้อน เช่น path motion, morph, timeline ซ้อนกัน — ใช้เมื่อต้องการ effect ที่ advanced

/website-to-hyperframes

เว็บ → วิดีโอ อัตโนมัติ

ให้ URL แล้ว Claude จะ capture design, ดึง content และสร้างวิดีโอให้ทั้งหมดในขั้นตอนเดียว

/hyperframes-registry

ติดตั้ง Blocks พร้อมใช้

เพิ่ม blocks สำเร็จรูป 50+ ชิ้น เช่น shader transitions, social overlays, data charts — ใส่ใน project ได้เลย

CLI ที่ใช้ทุกวัน

# เริ่ม preview (รันระหว่างแก้ไข)
npx hyperframes preview

# Render เป็น MP4
npx hyperframes render --output output.mp4

# Render draft ไว (test ก่อน)
npx hyperframes render --quality draft --output preview.mp4

# Render คุณภาพสูง (final delivery)
npx hyperframes render --quality high --output final.mp4

# Render แบบ vertical 9:16 (TikTok)
# ตั้ง data-width="1080" data-height="1920" ใน HTML
npx hyperframes render --output tiktok.mp4

# ตรวจสอบ error ก่อน render
npx hyperframes lint
npx hyperframes validate

# Render แบบ Transparent สำหรับ overlay
npx hyperframes render --format mov --output overlay.mov

เครื่องมือเสริม

video-use — ให้ AI ดูและตัดต่อวิดีโอโดยตรง

เมื่อต้องการให้ AI ทำงานกับไฟล์วิดีโอจริง ๆ โดยตรง — ไม่ใช่แค่สร้างจาก HTML — video-use คือเครื่องมือที่ต้องการ

🎞️

browser-use / video-use

video-use

GitHub →

เครื่องมือที่ให้ AI สามารถ วิเคราะห์ ตัดต่อ และจัดการไฟล์วิดีโอได้โดยตรง — ทำงานร่วมกับ Claude Code เพื่อสร้าง workflow ที่ AI ทำทุกอย่างตั้งแต่ต้นจนจบ ไม่ว่าจะเป็นการดูเนื้อหาในวิดีโอ ตัดส่วนที่ไม่ต้องการ หรือเตรียม asset สำหรับ HyperFrames

🔍

วิเคราะห์วิดีโอ

AI อ่านเนื้อหา ดู scene ดึง transcript ทำความเข้าใจวิดีโอต้นฉบับ

✂️

ตัดคำพูดติดอ่าง

ตัด "อ่า", "เอ่อ", silence และ filler words ออกจากวิดีโอ podcast/tutorial

🎬

ตัดต่ออัตโนมัติ

ตัดวิดีโอตาม script, ต่อ clip, ปรับ timing ตามที่ AI วิเคราะห์

🖼️

จัดการ Image/Audio

ประมวลผลไฟล์ภาพและเสียง เตรียม asset พร้อมใช้ใน HyperFrames

เมื่อไหรควรใช้ video-use?

✅ ใช้ video-use เมื่อ...

→ มีวิดีโอต้นฉบับที่ต้องการตัดต่อก่อน
→ ต้องการตัดคำพูดติดอ่างออกจาก podcast
→ อยากให้ AI ดูวิดีโอแล้วสรุปเนื้อหา
→ เตรียม clip สำหรับใส่ใน HyperFrames

🔗 Workflow ร่วมกับ HyperFrames

video-use → วิเคราะห์/ตัดต่อวิดีโอต้นฉบับ
↓
HyperFrames → สร้าง composition ใหม่จาก asset ที่ได้
↓
Claude Code → เพิ่ม animation, caption, effects
↓
📦 MP4 พร้อม publish

💡 Use Case ตัวอย่าง

→ ตัด filler จาก Zoom recording
→ แปลง podcast เป็น TikTok clip
→ ดึง highlight จากวิดีโอยาว
→ Auto-transcribe แล้วสร้าง caption

Tips สำหรับมือใหม่

สิ่งที่ควรรู้ก่อนเริ่ม

เรียนรู้จากสิ่งที่คนทำผิดบ่อย — ทำตามนี้แล้วประหยัดเวลาได้มาก

DO 01

บอก Duration ชัดเจน

บอก Claude ว่าต้องการวิดีโอกี่วินาทีเสมอ เช่น "20 วินาที" หรือ "3 scenes ละ 5 วินาที" ถ้าไม่บอก Claude จะเดาเอง

DO 02

บอก Aspect Ratio ด้วย

TikTok/Reels ใช้ "9:16 vertical" — YouTube/Presentation ใช้ "16:9" — ถ้าไม่บอก Claude จะใช้ 16:9 เป็น default

DO 03

บอก "mood" ด้วยคำง่าย ๆ

ใช้คำอย่าง "hype", "corporate", "dreamy", "bouncy" — Claude รู้จักคำเหล่านี้และแปลงเป็น animation ให้อัตโนมัติ

KNOW 01

Draft Render ก่อนเสมอ

ใช้ --quality draft ตอน test — render เร็วกว่ามาก เมื่อพอใจแล้วค่อยทำ --quality high สำหรับ final

KNOW 02

Assets ต้องอยู่ใน assets/ folder

รูป, เสียง, วิดีโอ ต้องวางใน assets/ folder ของ project แล้วบอก Claude ชื่อไฟล์ เช่น "ใช้ assets/logo.png"

KNOW 03

Iterate แทนการ re-prompt

หลัง draft แรกออกมา บอก Claude ว่า "ปรับ X" ดีกว่าบอกใหม่ทั้งหมด Claude จำ context เดิมไว้แล้ว

AVOID 01

ลืม /hyperframes นำหน้า

ถ้าไม่ใส่ /hyperframes Claude อาจเขียน HTML แบบผิดโครงสร้าง ทำให้ animation ไม่ทำงาน หรือ render error

AVOID 02

ขอ React Components

HyperFrames ใช้ plain HTML + data attributes เท่านั้น ถ้าขอ React หรือ Vue Component Claude จะต้อง rewrite ทีหลัง

AVOID 03

ขอ 4K/60fps โดยไม่จำเป็น

Default 1920×1080 30fps ดูดีมากแล้ว — 4K/60fps ทำให้ render ช้าขึ้นมากโดยไม่จำเป็นสำหรับ social media

🔧 ถ้า render ไม่ออก / มี error: รัน npx hyperframes lint ก่อน — จะบอกว่าผิดตรงไหน แล้ว paste error ให้ Claude แก้ให้

CLAUDE CODE × HYPERFRAMES PLAYBOOK

ข้อมูลจาก hyperframes.heygen.com · hyperframes.dev
สร้างด้วย Claude Code · อัปเดต 2025

Quickstart Docs → Prompting Guide → hyperframes.dev →

สร้างคลิปวิดีโอด้วย Claude Code × HyperFrames

Claude Code × HyperFrames คืออะไร?

ต้องเตรียมอะไรบ้าง?

ติดตั้ง HyperFrames — บอก Claude Code ได้เลย

จากไอเดียถึง MP4 — ใน 5 ขั้นตอน

กฎทอง 3 ข้อสำหรับมือใหม่

6 Use Cases — Copy & Paste ได้เลย

Slash Commands & CLI ที่ใช้บ่อย

CLI ที่ใช้ทุกวัน

video-use — ให้ AI ดูและตัดต่อวิดีโอโดยตรง

เมื่อไหรควรใช้ video-use?

สิ่งที่ควรรู้ก่อนเริ่ม

Subscribe our newsletter

สร้างคลิปวิดีโอ
ด้วย Claude Code × HyperFrames