GEIST
Sign in
All blog posts

Hyperframes คืออะไร? สอน AI Agent สร้างวิดีโอจาก HTML ฉบับคนไม่เขียนโค้ด

สรุปสั้นๆ (TL;DR): Hyperframes คือ Open Source จาก HeyGen ที่เปลี่ยนหน้าเว็บเป็นวิดีโอฟรี ให้ AI Agent เขียนโค้ดและทำคลิปแทนเรา สั่งงานง่าย ไม่ต้องเขียนโค้ด

@samithiwat
ปกบทความ หัวเรื่องว่า ใช้ AI ทำ Video ด้วย Hyperframe ใต้ลงมาเป็นหน้าเว็บ index.html ทางซ้าย มีลูกศร render ชี้ไปยังเฟรมวิดีโอที่มีแถบไทม์ไลน์สามซีนทางขวา

หน้าเว็บ 1 หน้า คือวิดีโอ 1 ซีน นั่นคือทั้งหมดของ Hyperframes

Hyperframes คือเครื่องมือ Open Source จาก HeyGen ที่เปิดโอกาสให้ทุกคนสร้างวิดีโอด้วย AI โดยไม่ต้องตัดต่อเอง หลักการทำงานคือการนำหน้าเว็บ HTML มาแปลงเป็นวิดีโอเคลื่อนไหวผ่าน AI Agent ผู้ใช้ทำหน้าที่เป็น Creative Director สั่งงานภาษาธรรมชาติ ตรวจแบบผ่าน Studio และเรนเดอร์วิดีโอในเครื่องได้ฟรีโดยไม่เสียค่าบริการ

หน้าเว็บ 1 หน้า กลายเป็นวิดีโอ 1 ซีน

ทำความเข้าใจ Hyperframes: เปลี่ยนการเขียน HTML เป็นวิดีโอ

Hyperframes คือนวัตกรรม Open Source ล่าสุดจากทีม HeyGen ที่เปลี่ยนวิธีคิดในการทำวิดีโอแบบเดิมด้วยการ เขียน HTML เป็นวิดีโอ โดยเบื้องหลังการทำงานคือการเปลี่ยน "เว็บ 1 หน้า" ให้กลายเป็น "วิดีโอ 1 ซีน"

ทุกองค์ประกอบภาพที่เห็นในคลิป ไม่ใช่ฟุตเทจ stock ที่เอามาตัดต่อชนกัน แต่คือหน้าเว็บจริงที่มีโครงสร้างแม่นยำ หากต้องการปรับแก้โทนสีหรือเปลี่ยนฟอนต์ เพียงแค่สั่งแก้ที่ไฟล์กลางจุดเดียว ทั้งวิดีโอก็จะอัปเดตตามทันที

แก้ค่าเดียวในไฟล์กลาง ทุกซีนเปลี่ยนตาม
  • ออกแบบเพื่อ AI Agent สร้างวิดีโอโดยเฉพาะ: สั่ง AI ทำคลิปผ่านภาษาธรรมชาติ ให้ AI ช่วยคิด เรียบเรียง และประกอบซีน
  • ใช้งานฟรี 100%: เรนเดอร์ไฟล์ในเครื่องตัวเอง (Local Render) ฟรี ไม่กิน credit ของ HeyGen
  • ไม่ต้องสมัครบัญชีก็เริ่มได้: ทดลองสร้างวิดีโอจาก HTML ในเครื่องได้ทันที สมัครบัญชีเมื่อต้องการใช้บริการ Cloud Render เท่านั้น
  • สิทธิ์ใช้งาน Apache-2.0: นำไปใช้ในทีมหรือเชิงพาณิชย์ได้โดยไม่จำกัดจำนวนคน
  • การันตีความนิยม: ด้วยยอดดาวน์โหลดและดาวบน GitHub ที่เติบโตอย่างรวดเร็ว (★ 43.5k ณ ปัจจุบัน)

โครงสร้างโปรเจกต์และไฟล์ frame.md

Hyperframes ป้องกันปัญหา AI คิดเอาเองจนงานหลุดกรอบ ด้วยการบังคับให้ AI สรุปแผนงานเป็นไฟล์เอกสารลงโฟลเดอร์ก่อนลงมือสร้างจริง ซึ่งช่วยให้แม้มีการเปิดแชทใหม่กี่ครั้ง AI ก็สามารถเข้าใจบริบทเดิมและทำงานต่อได้ทันที

เมื่อสร้างโปรเจกต์ขึ้นมา ทั้งตัวคุณ, AI Agent และ Studio จะทำงานบนไฟล์ชุดเดียวกันเสมอ:

project/
├── BRIEF.md          # โจทย์และข้อตกลงของวิดีโอ
├── STORYBOARD.md     # แผนลำดับซีนและจังหวะเล่าเรื่อง
├── SCRIPT.md         # บทพากย์และข้อความคำบรรยาย
├── frame.md          # แหล่งความจริงเดียวด้านทิศทางภาพ (Design System)
├── index.html        # โครงสร้างหน้าเว็บที่จะถูกเรนเดอร์เป็นวิดีโอ
├── hyperframes.json  # ค่าตั้งหลักของโปรเจกต์
├── compositions/     # ซีนย่อยและคอมโพเนนต์ที่นำกลับมาใช้ซ้ำ
├── assets/           # โฟลเดอร์เก็บภาพ วิดีโอ เสียง และฟอนต์
└── renders/          # โฟลเดอร์เก็บไฟล์วิดีโอผลลัพธ์ (MP4, WebM, GIF)
ไฟล์ทั้งหมดเป็นข้อความธรรมดา เปิดอ่านและแก้ได้ทุกไฟล์

frame.md คืออะไร? ไฟล์ frame.md คือ Single Source of Truth เมื่อเราอ้างถึงไฟล์นี้ใน Prompt แล้ว AI Agent จะยึดถือค่ารหัสสีและฟอนต์อย่างเคร่งครัด พร้อมปรับขนาดความหนาและระยะห่างให้อ่านง่ายบนสื่อวิดีโอโดยอัตโนมัติ หากยังไม่มีไฟล์นี้ สามารถเลือก catalog template สำเร็จรูป 13 แบบ เช่น Blue Professional, Cartesian, หรือ Editorial Forest ได้ที่ hyperframes.dev/design

วิธีต่อ Hyperframes กับ Claude, ChatGPT และ Grok (MCP Connector)

สำหรับคนที่ไม่ถนัดสาย Developer และต้องการทำคลิปแบบไม่ต้องลงโปรแกรม สามารถเชื่อมต่อ Hyperframes เข้ากับ Claude, ChatGPT หรือ Grok ผ่าน Model Context Protocol (MCP) ได้ทันที

  1. ไปที่เมนู Customize → Connectors ใน Claude (หรือตั้งค่า Custom MCP Connector ใน ChatGPT / Grok)
  2. เลือก Add custom connector แล้วกรอก URL: https://mcp.heygen.com/mcp/hyperframes/
  3. เข้าสู่ระบบด้วยบัญชี HeyGen และเปิดการใช้งาน Hyperframes ในช่องแชท
  4. เริ่มต้นพิมพ์สั่งงานภาษาธรรมชาติเพื่อสร้างวิดีโอด้วย AI ได้ทันที
URL เส้นเดียวคือค่าเดียวที่ต้องกรอกเอง

ตัวอย่าง Prompt สั่งงาน:

  • สั่งสร้างใหม่:

"Make a 15-second vertical product intro for a meditation app. Audience: people with sleep trouble. Style: quiet, spacious, warm."

  • สั่งแก้ไข:

"Reveal the product two seconds earlier. Keep current colors. Make captions smaller and slow down the final transition."

  • สั่งเรนเดอร์:

"Render this as an MP4 at 30 fps."

สอนใช้ Hyperframes และ CLI Commands สำหรับ AI Agent

หากคุณต้องการทำงานเองในเครื่อง ให้ติดตั้ง Node.js (เวอร์ชัน 22 ขึ้นไป) และ FFmpeg จากนั้นสามารถใช้คำสั่ง CLI หลักๆ เพื่อพรีวิว ตรวจสอบ และเรนเดอร์งานได้ทันที:

# พรีวิวหน้าจอ Real-time / ตรวจสอบความถูกต้อง / สั่งเรนเดอร์วิดีโอ
npx hyperframes preview && npx hyperframes check && npx hyperframes render
สามคำสั่งนี้คือทั้งหมดที่ต้องจำ

คำแนะนำสำคัญ: ให้เปิดหน้า Local Preview (npx hyperframes preview) ทิ้งไว้เสมอขณะสั่งงาน เพื่อให้เห็นภาพการเปลี่ยนแปลงในทุกรอบของการปรับแก้

เจาะลึก 7 ขั้นตอนสร้างวิดีโอด้วย /hyperframes Skill

หากคุณเลือกใช้งานผ่าน AI Agent ในเครื่อง คุณจะได้รับการทำงานในบทบาท Creative Director อย่างแท้จริง โดยสอนใช้ผ่าน 7 ขั้นตอนหลักของ /hyperframes Skill:

[1. Trigger /hyperframes] ➔ [2. Briefing Interview] ➔ [3. Storyboarding & Review]
                                                               ↵
[7. Render & Publish] 🎨 [6. Local Preview & Check] 🎨 [5. HTML & Catalog] 🎨 [4. Voice & Audio]
ทุกขั้นจบด้วยไฟล์ที่เปิดอ่านและแก้ต่อได้

ขั้นตอนที่ 1: เริ่มต้นใช้งาน hyperframe

พิมพ์คำสั่ง /hyperframes นำหน้าเสนอเพื่อเรียก Skill ทำงาน พร้อมโยนวัตถุดิบที่คุณมีเข้าไป:

/hyperframes create product launch video for https://geist-app.com

ระบบจะวิเคราะห์ Assets และเลือก Workflow อัตโนมัติ (เช่น โยน URL ➔ วิดีโอเปิดตัวสินค้า, โยนบท ➔ วิดีโออธิบาย, โยนเพลง ➔ มิวสิควิดีโอ)

⚠️ คำเตือน: ต้องขึ้นต้นคำสั่งด้วย /hyperframes แล้วตามด้วยสิ่งที่ต้องการ ไม่เช่นนั้น AI จะไม่ดึง Skill ออกมาใช้

ขั้นตอนที่ 2: สัมภาษณ์สรุปโจทย์ (BRIEF.md)

Agent จะเข้าไปดูหน้าเว็บ เก็บรหัสสี และ สัมภาษณ์ คุณ 3 เรื่องเพื่อสรุปเป็นไฟล์ BRIEF.md:

  1. กลุ่มเป้าหมายหลัก
  2. ข้อความ Key Message
  3. Call-to-Action

ขั้นตอนที่ 3: วางเส้นเรื่องและตรวจเฟรม (STORYBOARD.md)

Agent จะวางแผนการเล่าเรื่อง ลำดับซีน และกำหนดกฎดีไซน์กลางลง STORYBOARD.md คุณสามารถเปิด Studio ผ่านแท็บ Storyboard เพื่อตรวจทานภาพร่าง บทพากย์ และเขียนคอมเมนต์สั่งแก้ได้ตรงๆ

ขั้นตอนที่ 4: ล็อกบทพูดและใส่เสียง (SCRIPT.md & Audio)

Agent จะสร้างบทพากย์บันทึกลง SCRIPT.md:

  • พากย์เสียง AI ฟรี: เจนเสียงได้ฟรีในเครื่องด้วย Kokoro-82M (มี 54 เสียง) หรือต่อ API ElevenLabs หรือใช้ API ของ AI เจ้าอื่นๆ ก็ได้เหมือนกัน
  • เพลงประกอบ: สร้างด้วย MusicGen ในเครื่อง หรือต่อ Gemini API
  • Sound Effects: มีไลบรารีเสียงแถมมาให้พร้อมใช้

ขั้นตอนที่ 5: สร้างดีไซน์และประกอบซีน (frame.md & Catalog)

Agent นำ Design System จาก frame.md มาแปลงเป็นหน้าเว็บ index.html พร้อมดึงองค์ประกอบสำเร็จรูปจาก catalog มาประกอบเป็นวิดีโอ

ขั้นตอนที่ 6: เปิดพรีวิวและตรวจสอบงาน (Local Preview)

เปิดหน้าจอพรีวิว Real-time ด้วยคำสั่ง npx hyperframes preview เพื่อดูการอัปเดตงานแบบ Real-time ก่อนอนุมัติ ให้ลองปิดตาฟังเฉพาะเสียง 1 รอบเพื่อเช็กจังหวะการเล่าเรื่อง

ขั้นตอนที่ 7: เรนเดอร์ไฟล์และ export (Render & Publish)

เมื่อทุกอย่างเรียบร้อย ทำการสั่งตรวจเช็กโครงสร้างและเรนเดอร์วิดีโอออกเป็นไฟล์จริง:

# ตรวจสอบโครงสร้างไฟล์และสั่งเรนเดอร์วิดีโอในเครื่อง (MP4, MOV, WebM, GIF)
npx hyperframes check && npx hyperframes render

เทคนิคการใช้ Hyperframes ร่วมกับ Skill อื่นๆ

ในระบบมี Hyperframes catalog คลังคอมโพเนนต์สำเร็จรูปกว่า 200 รายการ เช่น ตัวหนังสือเรืองแสง (Neon Glow Text), กราฟแท่งวิ่ง (Bar Chart Race), ซีนแชท (Message Thread Reveal) และเอฟเฟกต์กล้องสั่น (Camera Shake) นอกจากนี้ยังสามารถใช้ Skill สายอื่นเข้ามาเสริมพลังได้ อ่านเพิ่มเติมเรื่องแนวคิดการใช้ Skill ได้ที่ Agent Skills คืออะไร

  • Grill Me (/grilling): สัมภาษณ์ล็อกโจทย์ให้แน่นก่อนเริ่มงาน เพราะการแก้ Storyboard ตัวหนังสือถูกกว่าการแก้วิดีโอที่อนิเมตเสร็จแล้ว
  • Prototype (/prototype): สร้างตัวอย่าง Visual หลายเวอร์ชันมาเปรียบเทียบก่อนเลือกแนวทางจริง
  • design-taste-frontend: บังคับให้ Agent ประกาศ "Design Read" ก่อนเริ่มงาน พร้อมยึดกฎทองคำ "MOTION MUST BE MOTIVATED" (ทุกอนิเมชันต้องมีวัตถุประสงค์ ห้ามใส่เพียงเพราะดูเท่)
แก้ตัวหนังสือถูกกว่าแก้วิดีโอที่อนิเมตเสร็จแล้ว

คำถามที่พบบ่อย: Hyperframes ฟรีไหม มีราคาหรือเสีย Credit หรือไม่?

ตัวเครื่องมือ Hyperframes เป็น Open Source ใช้งานได้ฟรี 100% การเรนเดอร์วิดีโอในเครื่องตัวเอง (Local Render) สามารถทำได้ฟรี ไม่เสียค่าใช้จ่ายและไม่มีระบบ credit มาคอยจำกัด คุณจะเสียเงินหรือใช้ credit ของ HeyGen ก็ต่อเมื่อเลือกใช้บริการฝั่ง Cloud Render หรือสั่งงานผ่าน Connector ที่เชื่อมกับระบบ Cloud เท่านั้น

เสีย credit เฉพาะตอนเลือกฝั่ง Cloud เท่านั้น

คำถามที่พบบ่อย: ต้องเขียนโค้ดเป็นไหม หากอยากทำคลิปด้วย Hyperframes?

ไม่ต้องเขียนโค้ดเป็นก็สามารถทำคลิปได้ เพราะกระบวนการทั้งหมดทำงานผ่านการสั่งงานด้วยภาษาพูดธรรมดากับ AI Agent หรือเลือกปรับแต่งหน้าตา สีสัน และข้อความบนวิดีโอผ่าน Studio visual editor ได้โดยตรง คุณทำหน้าที่เพียงแค่ระบุความต้องการ ตรวจงาน และสั่งปรับแก้เท่านั้น

คำถามที่พบบ่อย: Hyperframes ทำคลิปแนวตั้ง TikTok, Reels, Shorts ขนาด 1080x1920 ได้ไหม?

ทำได้ทันที โดยสามารถระบุสัดส่วนวิดีโอเป็นแนวตั้ง 1080x1920 (สัดส่วน 9:16) หรือระบุชื่อแพลตฟอร์ม เช่น TikTok, Instagram Reels หรือ YouTube Shorts เข้าไปในไฟล์ BRIEF.md หรือพิมพ์บอก AI Agent ใน Prompt ได้เลย ระบบจะปรับ Layout ของหน้าเว็บให้เหมาะสมกับหน้าจอแนวตั้งให้อัตโนมัติ

ระบุสัดส่วนหรือชื่อแพลตฟอร์มลงไปตรงๆ ได้เลย

คำถามที่พบบ่อย: การทำวิดีโอภาษาไทย ฟอนต์ไทย และพากย์เสียง AI ใน Hyperframes ทำอย่างไร?

Hyperframes รองรับการทำวิดีโอภาษาไทยเต็มรูปแบบ โดยมีข้อควรรู้ดังนี้:

  • ฟอนต์ไทย: สามารถระบุชื่อฟอนต์ไทย (เช่น Kanit, Prompt, หรือ Sarabun) ลงในไฟล์ frame.md เพื่อให้ระบบดึง Google Fonts มาใช้บนหน้าเว็บ
  • ข้อความบรรยาย: ควรทดสอบการเว้นวรรคและการตัดคำในภาษาไทยบนหน้า Preview เพื่อให้อ่านง่าย
  • พากย์เสียง AI: สามารถเชื่อมต่อเสียงพากย์ภาษาไทยผ่านระบบของ ElevenLabs หรืออัปโหลดไฟล์เสียงพากย์ภาษาไทยที่เตรียมไว้เข้าโฟลเดอร์ assets/ ได้โดยตรง
จุดที่ต้องเปิดหน้า Preview ดูด้วยตาเสมอ

คำถามที่พบบ่อย: เปรียบเทียบเสียงพากย์ AI ฟรี: Kokoro vs ElevenLabs ใช้ตัวไหนดี?

  • Kokoro-82M: เป็นระบบแปลงข้อความเป็นเสียง (Text-to-Speech) ที่สามารถรันได้ฟรีในเครื่องโดยตรง มีเสียงให้เลือกกว่า 54 เสียง เหมาะสำหรับงานทดลอง ร่างวิดีโอ หรือโปรเจกต์ที่ไม่ต้องการเสียค่าบริการ
  • ElevenLabs: เป็นบริการพากย์เสียง AI คุณภาพสูง ให้โทนเสียงและอารมณ์ที่สมจริงเป็นธรรมชาติ มีตัวเลือกเสียงภาษาไทยหลากหลาย เหมาะสำหรับวิดีโอเปิดตัวสินค้าหรือคลิปโฆษณาที่ต้องการความเป็นมืออาชีพสูง
ต่างกันที่เสียงถูกสร้างขึ้นที่ไหน

คำถามที่พบบ่อย: ต้องติดตั้ง Node.js หรือโปรแกรมอะไรเพิ่มไหมหากต้องการลงในเครื่อง?

หากต้องการรัน Hyperframes และเรนเดอร์ไฟล์ในเครื่องตัวเอง เครื่องของคุณต้องมี Node.js (เวอร์ชัน 22 ขึ้นไป) และ FFmpeg ติดตั้งอยู่ เพื่อใช้สำหรับประมวลผลการแปลงหน้าเว็บและรวมไฟล์วิดีโอออกมาเป็น MP4, MOV, WebM หรือ GIF

คำถามที่พบบ่อย: Hyperframes แก้ไขไฟล์วิดีโอเก่าหรือทำหลายเวอร์ชันพร้อมกันได้ไหม?

ทำได้ง่ายมาก เพราะผลลัพธ์ของ Hyperframes ถูกเก็บไว้ในรูปแบบโฟลเดอร์โปรเจกต์ (มีไฟล์ HTML, CSS, Brief, Storyboard) ไม่ใช่ไฟล์วิดีโอที่แก้ไขไม่ได้ คุณสามารถสั่ง AI Agent ให้กลับมาปรับแก้ซีน เปลี่ยนข้อความ หรือใช้ระบบ Variables เพื่อเจนวิดีโอออกมาหลายๆ เวอร์ชัน (เช่น หลายภาษา หรือหลายกลุ่มลูกค้า) ได้ทันที

ผลลัพธ์เป็นโฟลเดอร์โปรเจกต์ ไม่ใช่ไฟล์วิดีโอที่แก้ไม่ได้

แหล่งอ้างอิงและคู่มือการใช้งาน