เมื่อไม่มี frame.md Claude ต้องเดาทุกอย่างใหม่ตั้งแต่ต้น — ทำให้วิดีโอของคุณดูไม่เป็น brand เดียวกัน
อธิบายง่ายๆ สำหรับผู้ที่ไม่ได้เขียนโค้ด
ทำครั้งเดียว ใช้ได้ตลอด — ใช้เวลาประมาณ 5 นาที
https://hyperframes.heygen.com/mcp
npx skills add heygen-com/hyperframes/hyperframes
frame.md แบ่งเป็น 2 ส่วนหลัก — ส่วน YAML (ตัวเลขและค่า) และส่วน Prose (คำอธิบายภาษาคน)
--- (เริ่มต้น YAML Frontmatter) name: ชื่อ brand ของคุณ colors: primary: "#สีพื้นหลักหลัก" # พื้นหลังของวิดีโอ on-primary: "#สีข้อความ" # ข้อความบนพื้นหลัก accent: "#สีเน้น/CTA" # ปุ่ม, จุดเน้นสำคัญ typography: headline: fontFamily: ชื่อ Font หัวข้อ fontSize: 4rem # ขนาดตัวอักษรหัวข้อ fontWeight: 700 body: fontFamily: ชื่อ Font เนื้อหา fontSize: 1rem fontWeight: 400 rounded: sm: 4px # มุมของ element เล็ก md: 12px # มุมของ card/box lg: 24px # มุมกลมมาก spacing: sm: 8px md: 24px lg: 48px motion: energy: high # high / moderate / calm easing: entry: "expo.out" # ความเร็ว element เข้า exit: "power4.in" # ความเร็ว element ออก duration: entrance: 0.4 # วินาที hold: 1.5 transition: 0.6 atmosphere: - grain-overlay # เอฟเฟกต์พื้นหลัง transition: cinematic-zoom --- (จบ YAML Frontmatter) ## Overview บอกบุคลิกและ mood ของ brand นี้ใน 2-3 ประโยค เช่น "วิดีโอสำหรับแบรนด์ premium ที่ดูสะอาด มีน้ำหนัก..." ## Colors อธิบายการใช้แต่ละสี — สีหลักใช้เมื่อไหร่ สีเน้นเน้นอะไร ## Typography อธิบาย font pairing — หัวข้อควรดูอย่างไร เนื้อหาควรอ่านง่ายแค่ไหน ## Layout หลักการจัด layout ของ frame — ซ้าย/กลาง/ขวา ช่องไฟ ## Elevation ใช้เงา (shadow) มากน้อยแค่ไหน — flat / subtle / layered ## Components กฎการ style element พิเศษ เช่น caption bar, logo placement ## Do's and Don'ts # สิ่งที่ห้ามทำเด็ดขาด — Claude จะหลีกเลี่ยงทั้งหมด - อย่าใช้ gradient สีดิ้น - อย่าวาง text ทับพื้นที่วุ่นวาย - ห้ามใช้ animation ที่เร็วเกินไปสำหรับ brand นี้
ทุก element ในวิดีโอถูกควบคุมผ่าน frame.md — Claude ไม่ประดิษฐ์อะไรเองนอกจากที่คุณกำหนด
สีที่กำหนดใน frame.md จะถูกนำไปใช้ใน ทุก element โดยอัตโนมัติ ไม่ว่าจะเป็นพื้นหลัง ตัวอักษร กรอบ หรือจุดเน้น
ค่าที่ตั้งได้ ตัวอย่างcolors: primary: "#080c12" # พื้นหลังดำ on-primary: "#e8edf5" # ข้อความสีขาวนวล accent: "#3d8ef5" # จุดเน้นสีน้ำเงินสด
กำหนดฟอนต์แยก headline กับ body — HyperFrames จะ embed ฟอนต์จาก Google Fonts โดยอัตโนมัติ แค่ระบุชื่อก็พอ
หลักการเลือก font pairingtypography: headline: fontFamily: Fraunces # ฟอนต์ serif สวยงาม fontSize: 5rem # ใหญ่ — วิดีโอต้องอ่านได้ fontWeight: 700 body: fontFamily: Instrument Sans fontSize: 1.2rem fontWeight: 300
motion section เป็นส่วนที่ทำให้วิดีโอ "รู้สึก" ถึง brand — brand luxury เคลื่อนช้า, brand tech เคลื่อนเร็วและเฉียบ
ระดับ Energy ตัวอย่างmotion: energy: high easing: entry: "expo.out" # เข้าเร็วหยุดนิ่ง exit: "power4.in" # ออกเร็ว duration: entrance: 0.4 # วินาที hold: 1.5 # แสดงค้างไว้นานแค่ไหน transition: 0.6 transition: cinematic-zoom
atmosphere คือ "เนื้อสัมผัส" พื้นหลังที่ทำให้วิดีโอดูมี production quality — ไม่ใช่แค่พื้นสีแบน
Effects ที่ใช้ได้atmosphere: - grain-overlay # เพิ่มเนื้อสัมผัสแบบฟิล์ม - radial-glow # แสงเรืองสีน้ำเงิน
เลือก pattern ที่ตรงกับ brand ของคุณ แล้วปรับค่าให้เป็นสีและฟอนต์ของตัวเอง
data-width="1080" data-height="1920" ใน composition — Claude จะตั้งค่าให้โดยอัตโนมัติเมื่อคุณบอกว่าต้องการ Reelsคัดลอกไปใช้ได้เลย แล้วแก้สีและฟอนต์ตาม brand ของคุณ
--- name: Business Premium colors: primary: "#080c12" on-primary: "#e8edf5" accent: "#3d8ef5" typography: headline: fontFamily: Fraunces fontSize: 5rem fontWeight: 700 body: fontFamily: Instrument Sans fontSize: 1.1rem fontWeight: 300 rounded: sm: 2px md: 6px spacing: sm: 16px md: 32px lg: 64px motion: energy: moderate easing: entry: "sine.inOut" exit: "power2.in" duration: entrance: 0.8 hold: 2.5 transition: 1.0 atmosphere: - grain-overlay - radial-glow transition: cross-warp-morph --- ## Overview วิดีโอสำหรับแบรนด์ธุรกิจระดับสูง บรรยากาศ dark premium เน้นความน่าเชื่อถือ มืออาชีพ และ trustworthy ## Colors พื้นหลังดำสนิท สร้างบรรยากาศ premium สีน้ำเงินสดใช้เน้นตัวเลข, CTA และจุดสำคัญ ## Typography Fraunces serif สำหรับ headline สร้าง authority Instrument Sans บาง (300) สำหรับ body อ่านง่าย ## Do's and Don'ts - ✅ ใช้ space เยอะ ไม่อัดแน่น - ✅ ตัวเลขต้องใหญ่และโดดเด่น - ❌ ห้ามใช้สีสดหลายสีพร้อมกัน - ❌ ห้าม animation ที่เร็วหรือกระตุก
--- name: Lifestyle Warm colors: primary: "#fdf6ef" on-primary: "#2a1810" accent: "#e8631a" typography: headline: fontFamily: DM Serif Display fontSize: 4.5rem fontWeight: 400 fontStyle: italic body: fontFamily: Schibsted Grotesk fontSize: 1rem fontWeight: 400 rounded: sm: 8px md: 20px lg: 40px motion: energy: calm easing: entry: "sine.inOut" exit: "power1.inOut" duration: entrance: 1.2 hold: 3.0 transition: 1.5 atmosphere: - soft-gradient - warm-grain transition: thermal-distortion --- ## Overview วิดีโอ lifestyle อบอุ่น ดูสบาย เป็นธรรมชาติ เน้นความรู้สึก ไม่ใช่ตัวเลข ## Do's and Don'ts - ✅ ใช้ space เยอะ ไม่อัดแน่น - ✅ ภาพอาหาร/ผลิตภัณฑ์ควรดู appetizing - ❌ ห้ามใช้ dark background - ❌ ห้าม text บาง หรืออ่านยาก
--- name: Tech Startup colors: primary: "#070f0b" on-primary: "#d8f0e4" accent: "#22c77a" typography: headline: fontFamily: Bricolage Grotesque fontSize: 5.5rem fontWeight: 800 textTransform: uppercase body: fontFamily: IBM Plex Serif fontSize: 1rem fontWeight: 300 rounded: sm: 4px md: 8px motion: energy: high easing: entry: "expo.out" exit: "power4.in" duration: entrance: 0.4 hold: 1.5 transition: 0.6 atmosphere: - particle-field - grid-lines transition: cinematic-zoom --- ## Overview วิดีโอสำหรับ tech brand ที่เน้นความเร็ว นวัตกรรม และความทันสมัย — ทุก frame ต้องรู้สึก cutting-edge ## Do's and Don'ts - ✅ ตัวเลข metric ต้องโดดเด่น ใหญ่ - ✅ ใช้ monospace font สำหรับ code/stats - ❌ ห้ามใช้สีอ่อนหรือ pastel - ❌ ห้าม animation ช้าหรือ fade เบลอ
เมื่อมี frame.md อยู่ในโฟลเดอร์โปรเจกต์แล้ว — นี่คือวิธีสั่ง Claude ให้สร้างวิดีโอ
| สิ่งที่ต้องทำ | ก่อนมี frame.md | หลังมี frame.md |
|---|---|---|
| ระบุสี brand | ต้องพิมพ์ทุกครั้ง | อัตโนมัติ |
| ระบุฟอนต์ | ต้องพิมพ์ทุกครั้ง | อัตโนมัติ |
| กำหนด animation speed | Claude เดาเอง | อัตโนมัติ |
| ความสม่ำเสมอของวิดีโอ | ไม่แน่นอน | 100% consistent |
| เวลาต่อ prompt | นาน (ต้องอธิบายเยอะ) | สั้นมาก |