$ loading

$ loading ~/vibecoding

$ wget free/hyperframes-claude-code.pdf

สร้างวิดีโอด้วยการคุยกับ AI

คู่มือทำวิดีโอด้วย HyperFrames + Claude Code สำหรับคนไทยที่ไม่รู้โค้ดเลย รวม 11 บท พร้อมคลังพรอมต์กว่า 60 ตัว คัดลอกไปใช้ได้ทันที

ดาวน์โหลด PDF ฟรีeBook ฟรี · 97 หน้า

อยากให้ส่งของใหม่ ๆ ทางอีเมลด้วยมั้ย?

กดสมัคร = ยินยอมรับเทคนิค AI และของแจกใหม่ทางอีเมล ยกเลิกได้ทุกเมื่อ

นโยบายความเป็นส่วนตัว

$ grep -r "prompt" ~/book

คลังพรอมต์ · 69 พรอมต์

พรอมต์และคำสั่งทุกอันในหนังสือ · กดขยายแต่ละบท แล้วคัดลอกไปวางใน Claude Code ได้เลย · เปลี่ยนเฉพาะข้อความใน [...] ตามงานของคุณ

บทที่ 1: หนังสือเล่มนี้ทำอะไร และไม่ทำอะไร · 2 พรอมต์

text · prompt · claude code

สร้างวิดีโอแนวตั้ง 9:16 ความยาว 15 วินาที

เรื่อง "3 วิธีเริ่มใช้ AI ในงานประจำวัน"

ขอสไตล์ทันสมัย ตัวหนังสือใหญ่ อ่านง่าย

มี caption ภาษาไทย และจบด้วยคำว่า

"เริ่มวันนี้ ง่ายกว่าที่คิด"

ช่วยสร้างไฟล์ทั้งหมด เปิด HTML preview

ให้ฉันดูก่อน แก้ error และยังไม่ต้อง render

MP4 จนกว่าฉันจะสั่ง final render

text · prompt · official-first

ก่อนทำงานนี้ ให้คุณอ่าน official docs

หรือ official GitHub repo ล่าสุดก่อน

แล้วใช้วิธีที่เป็น official เท่านั้น

ถ้าข้อมูลในเว็บกับสิ่งที่คุณจำได้ไม่ตรงกัน

ให้ยึดข้อมูลจาก official source ล่าสุด

บทที่ 2: เตรียมเครื่องแบบไม่ต้องรู้โค้ด · 5 พรอมต์

bash · terminal

curl -fsSL https://claude.ai/install.sh | bash

bash · powershell

irm https://claude.ai/install.ps1 | iex

bash · terminal

claude

text · prompt · ตรวจความพร้อม

ฉันเป็นมือใหม่ ไม่มีพื้นฐานโค้ดเลย

ช่วยตรวจให้หน่อยว่า Claude Code

พร้อมใช้งานหรือยัง

ขอให้คุณ:

1. ตรวจว่าตอนนี้ฉันอยู่ในโฟลเดอร์ไหน

2. บอกฉันสั้นๆ ว่าพร้อมเริ่มโปรเจกต์

วิดีโอหรือยัง

3. ถ้าขาดอะไร ให้บอกทีละขั้นแบบ

ภาษาคนทั่วไป

4. อย่าให้ฉันทำคำสั่งเองถ้าไม่จำเป็น

text · prompt · แก้ command not found

ฉันกำลังติดตั้ง Claude Code แต่เปิด

คำสั่ง claude ไม่ได้

นี่คือ error ที่ขึ้น:

[วาง error ตรงนี้]

ฉันไม่รู้โค้ด ช่วยบอกวิธีแก้แบบทีละขั้น

สำหรับเครื่องของฉัน โดยใช้วิธี official

และไม่ให้ฉันทำอะไรเกินจำเป็น

บทที่ 3: ตั้งค่าโปรเจกต์วิดีโอแรกด้วย Prompt · 5 พรอมต์

bash · terminal

mkdir -p ~/Desktop/hyperframes-video && cd ~/Desktop/hyperframes-video && claude

bash · powershell

mkdir "$HOME\Desktop\hyperframes-video"; cd "$HOME\Desktop\hyperframes-video"; claude

text · prompt · ตรวจโฟลเดอร์

ช่วยตรวจให้หน่อยว่าตอนนี้เราอยู่ใน

โฟลเดอร์โปรเจกต์วิดีโอที่ถูกต้องหรือยัง

สิ่งที่ต้องการ:

1. บอก path โฟลเดอร์ปัจจุบัน

2. ตรวจว่าโฟลเดอร์นี้เหมาะสำหรับเริ่ม

โปรเจกต์ HyperFrames หรือไม่

3. ถ้ายังไม่เหมาะ ให้บอกวิธีแก้แบบสั้นที่สุด

4. ยังไม่ต้องติดตั้งอะไร และยังไม่ต้อง

สร้างวิดีโอ

text · prompt · อ่าน HyperFrames official repo

ฉันต้องการสร้างโปรเจกต์วิดีโอด้วย

HyperFrames ในโฟลเดอร์นี้

ก่อนทำอะไร ให้คุณอ่าน official source

เหล่านี้ก่อน:

1. GitHub official ของ HyperFrames:

https://github.com/heygen-com/hyperframes

2. documentation และ catalog ที่ repo

official แนะนำ

หลังอ่านแล้ว ให้สรุปสั้นๆ ว่า

HyperFrames ใช้ทำอะไร workflow พื้นฐาน

คืออะไร และขั้นต่อไปควรทำอะไร

สำคัญ:

- ยังไม่ต้องติดตั้งอะไร

- ยังไม่ต้องสร้างไฟล์วิดีโอ

- ใช้ข้อมูลจาก official source เท่านั้น

text · prompt · สร้าง PROJECT_BRIEF.md

ช่วยสร้างไฟล์บันทึกเป้าหมายโปรเจกต์ชื่อ

PROJECT_BRIEF.md ในโฟลเดอร์นี้

เนื้อหาให้สั้นและชัดเจน:

- โปรเจกต์ใช้ HyperFrames + Claude Code

- ผู้ใช้ไม่รู้โค้ด ใช้ prompt ภาษาไทย

- Claude ต้องอ่าน official docs ก่อนติดตั้ง

- ใช้ HTML preview จนพอใจ แล้วค่อย render MP4

- ถ้ามี error ให้ Claude แก้เองก่อน

บทที่ 4: ให้ Claude ติดตั้ง HyperFrames Skills เอง · 5 พรอมต์

text · prompt · ติดตั้ง skills จาก official repo

จาก official HyperFrames repo ที่คุณ

อ่านแล้ว ช่วยติดตั้ง HyperFrames skills

ให้ Claude Code ใช้งานในโปรเจกต์นี้

ให้ทำตามนี้:

1. ตรวจวิธีติดตั้ง skills จากหน้า

official repo: github.com/heygen-com/hyperframes

2. ใช้วิธี official เท่านั้น

3. ถ้าต้องรันคำสั่ง ให้คุณรันเอง

4. ถ้าระบบถาม permission ให้บอกฉันสั้นๆ

ว่าคำสั่งนั้นทำอะไร ก่อนให้ฉันอนุมัติ

5. หลังติดตั้งเสร็จ ให้ตรวจว่ามี skills

สำคัญอะไรใช้งานได้บ้าง

6. สรุปเป็นภาษาไทยแบบสั้น ไม่เกิน 10 บรรทัด

ถ้าติด error ให้แก้เองก่อน

text · prompt · ตรวจว่า skills พร้อมใช้

ช่วยตรวจให้หน่อยว่า HyperFrames skills

ที่ติดตั้งไว้พร้อมใช้งานหรือยัง

ขอให้คุณ:

1. บอกชื่อ skills ที่เกี่ยวกับ HyperFrames

ที่พบ

2. อธิบายสั้นๆ ว่าแต่ละตัวใช้ทำอะไร

3. บอกว่าตอนนี้พร้อมเริ่มสร้างวิดีโอแรก

หรือยัง

4. ถ้ายังไม่พร้อม ให้แก้หรือแนะนำขั้นตอน

ถัดไปแบบสั้นที่สุด

text · prompt · เรียก skill โดยตรง

ใช้ /hyperframes สร้างวิดีโอแนะนำสินค้า

15 วินาที แนวตั้ง 9:16

text · prompt · ให้ Claude เลือก skill

ช่วยใช้ HyperFrames skills ที่เหมาะสมเพื่อ

สร้างวิดีโอนี้และเปิด HTML preview ให้ฉัน

ดูก่อน ยังไม่ต้อง render MP4 จนกว่าฉันจะ

สั่ง final render

text · prompt · แก้ error ติดตั้ง skills

การติดตั้ง HyperFrames skills ยังไม่สำเร็จ

ช่วยทำตามนี้:

1. อ่าน error ล่าสุดทั้งหมด

2. ตรวจจาก official HyperFrames repo

ว่าปัญหานี้เกี่ยวกับอะไร

3. ถ้าขาด dependency เช่น Node, Git,

Git LFS หรืออย่างอื่น ให้บอกฉันสั้นๆ

4. ถ้าคุณแก้เองได้ ให้แก้เอง

5. ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอก

ทีละขั้น และบอกเหตุผลสั้นๆ

6. หลังแก้แล้ว ให้ตรวจซ้ำว่า skills

พร้อมใช้งานหรือยัง

บทที่ 5: สร้างวิดีโอแรกด้วย Prompt เดียว · 4 พรอมต์

text · prompt · สร้างวิดีโอแรก

ใช้ /hyperframes สร้างวิดีโอแนวตั้ง 9:16

ความยาว 12 วินาที หัวข้อ

"3 เหตุผลที่ควรเริ่มใช้ AI ทำวิดีโอ"

สไตล์ภาพ:

- สดใส ทันสมัย เหมาะกับ TikTok/Reels

- พื้นหลัง gradient เคลื่อนไหวเบาๆ

- ตัวหนังสือภาษาไทยใหญ่ อ่านง่าย

- มี caption เด้งตามจังหวะ แต่ไม่รก

โครงวิดีโอ:

1. hook: "ทำวิดีโอด้วย AI ไม่ต้องเขียนโค้ด"

2. ประเด็น 1: "เริ่มจาก prompt ภาษาไทย"

3. ประเด็น 2: "ให้ AI จัดการไฟล์และ preview"

4. ประเด็น 3: "แก้ได้เหมือนคุยกับ editor"

5. CTA: "ลองทำวิดีโอแรกวันนี้"

ให้คุณทำเอง:

- สร้างไฟล์ที่จำเป็น

- ใช้ HyperFrames skills ที่เหมาะสม

- เปิด HTML preview ให้ฉันกด play ดู

- ตรวจว่าข้อความไทยไม่ล้นจอ

- ยังไม่ต้อง render MP4 จนกว่าฉันจะ

พิมพ์ว่า "final render"

text · prompt · หยุดก่อน render

หยุดก่อน ยังไม่ต้อง render MP4

ตอนนี้ฉันต้องการดู HTML preview ใน

browser ก่อน เพื่อแก้เร็วๆ

ช่วยทำให้ preview เล่นได้ แล้วบอกฉันว่า

ต้องเปิด URL หรือไฟล์ไหนเพื่อกด play ดู

รอ feedback จากฉันก่อน อย่า render จน

กว่าฉันจะสั่งว่า "final render"

text · prompt · แก้ข้อความล้นจอ

จาก preview ที่ดู ข้อความไทยบางจุด

ล้นจอหรืออ่านยาก

ช่วยแก้เฉพาะไฟล์ HTML/CSS ของ HyperFrames

ก่อน ยังไม่ต้อง render MP4

สิ่งที่ต้องแก้:

- ข้อความต้องไม่ล้นจอ

- ฟอนต์ต้องใหญ่พออ่านบนมือถือ

- ประโยคที่ยาวให้ย่อให้สั้นลง

- เปิด preview ให้ดูอีกครั้งหลังแก้

text · prompt · final render

ตอนนี้ฉันพอใจกับ preview แล้ว

ช่วยทำ final render เป็น MP4

ให้คุณ:

1. ตรวจไฟล์ HyperFrames ล่าสุด

2. render เป็น MP4 คุณภาพเหมาะสำหรับ

ส่งงาน

3. ตั้งชื่อไฟล์ output-final-v1.mp4

4. ถ้ามี error ตอน render ให้แก้เอง

5. หลังเสร็จ ให้บอก path ของไฟล์ MP4 final

ตอนนี้อนุญาตให้ render MP4 ได้

บทที่ 6: แก้วิดีโอแบบคุยกับ AI เหมือนคุยกับ Editor · 5 พรอมต์

text · prompt · แก้รอบแรก

จาก preview ล่าสุด ช่วยแก้วิดีโอนี้ให้

ดูดีขึ้น โดยยังคงเนื้อหาเดิม

สิ่งที่ต้องปรับ:

- ทำภาพรวมให้สะอาดขึ้น ไม่รก

- เพิ่ม contrast ให้ตัวหนังสืออ่านง่าย

- ทำตัวหนังสือใหญ่ขึ้น 15-20%

- ลด animation ที่ทำให้เสียสมาธิ

- ทำ transition ระหว่างประเด็นให้นุ่มขึ้น

ให้คุณ:

1. แก้ไฟล์ HTML/CSS/asset ที่จำเป็นเอง

2. อัปเดต preview ให้ฉันกด play ดู

3. ยังไม่ต้อง render MP4

4. รอ feedback จากฉันก่อน

text · prompt · mood พรีเมียม

จาก preview ล่าสุด ช่วยปรับ mood สีให้

ดูพรีเมียมขึ้น

แนวทาง:

- ใช้สีหลักเป็นดำ ทอง ขาว

- พื้นหลังเรียบขึ้น

- ลดสีสดที่ไม่จำเป็น

- ให้ตัวหนังสือเด่นและอ่านง่าย

- transition ดูนิ่งและแพง ไม่เด้งเกินไป

แก้ใน HTML preview ก่อน ยังไม่ต้อง render

เปิด preview ให้ฉันดูอีกครั้งหลังแก้

text · prompt · mood สดใส

จาก preview ล่าสุด ช่วยปรับ mood สีให้

สดใส เหมาะกับ TikTok/Reels

แนวทาง:

- ใช้สีหลักไม่เกิน 3 สี

- พื้นหลังมี movement เบาๆ

- ตัวหนังสือสว่าง อ่านง่าย

- animation สนุก แต่ไม่รก

- จังหวะโดยรวมเร็วขึ้นเล็กน้อย

text · prompt · final render รอบ iterate

ตอนนี้ฉันพอใจกับ preview ล่าสุดแล้ว

ช่วย final render เป็น MP4

ให้คุณ:

1. ตรวจ preview ล่าสุดอีกครั้ง

2. render เป็น MP4 ใหม่ชื่อ

output-final-v2.mp4

3. ถ้ามี error ตอน render ให้แก้เอง

4. ตรวจว่าไฟล์ MP4 เปิดได้

5. บอก path ของไฟล์ final

ตอนนี้อนุญาตให้ render MP4 ได้

text · prompt · บันทึก

ช่วยสรุปการแก้วิดีโอรอบนี้ลง

PROJECT_BRIEF.md

ขอให้บันทึก:

- preview ล่าสุดใช้ไฟล์/URL อะไร

- MP4 final ล่าสุดอยู่ที่ไหน

- สิ่งที่ปรับจากเวอร์ชันแรก

- style ปัจจุบันของวิดีโอ

- จุดที่ยังควรปรับต่อ

บทที่ 7: ใช้ HyperFrames Catalog โดยไม่ต้องจำชื่อ Component · 6 พรอมต์

text · prompt · เลือกจาก catalog

ช่วยเปิด official HyperFrames catalog

แล้วเลือก block/component ที่เหมาะกับ

วิดีโอ preview ล่าสุดของฉัน

เป้าหมาย:

- caption อ่านง่ายและมี movement

- transition ระหว่าง scene นุ่มขึ้น

- effect เบาๆ ให้ภาพไม่แบน แต่ห้ามรก

เงื่อนไข:

1. ใช้เฉพาะของจาก official catalog

2. เลือกไม่เกิน 3 รายการในรอบนี้

3. ก่อนติดตั้ง ให้สรุปชื่อที่เลือกและ

เหตุผลสั้นๆ

4. ติดตั้งและใส่ในโปรเจกต์เอง

5. อัปเดต HTML preview ให้ฉันกด play ดู

6. ยังไม่ต้อง render MP4

ถ้า component ไหนทำให้ preview พัง

ให้ถอดออกหรือเลือกตัวที่ง่ายกว่า

text · prompt · caption

ใช้ /hyperframes-registry ช่วยหา caption

style ที่เหมาะกับวิดีโอสั้นภาษาไทย

เกณฑ์เลือก:

- อ่านง่ายบนมือถือ

- movement ชัดแต่ไม่เวียนหัว

- รองรับข้อความสั้นหลาย scene

- ไม่ทำให้ layout ล้นจอ

เลือก 1 แบบ ติดตั้ง ใส่ในวิดีโอ

แล้วอัปเดต HTML preview ให้ดู

text · prompt · transition

ใช้ /hyperframes-registry หา transition

จาก catalog ที่เหมาะกับวิดีโอสั้นเพื่อ

ความรู้

ต้องการ:

- transition เรียบและนุ่ม

- ไม่ flashy เกินไป

- ไม่ทำให้อ่านข้อความยาก

- ใช้เฉพาะช่วงเปลี่ยนประเด็นหลัก

เลือก 1 แบบที่เหมาะที่สุด ใส่ในวิดีโอ

แล้วเปิด preview ให้ดู

text · prompt · effect

ช่วยเลือก effect เบาๆ จาก catalog

เพื่อทำให้วิดีโอดูมี texture มากขึ้น

ต้องการ:

- grain หรือ shimmer เบาๆ ได้

- ห้ามทำให้ข้อความอ่านยาก

- ห้ามเพิ่มความรกของพื้นหลัง

- ใช้ opacity ต่ำพอประมาณ

text · prompt · แก้ preview พัง

หลังเพิ่ม component/block แล้ว preview

มีปัญหา

ช่วยทำตามนี้:

1. อ่าน error ล่าสุด

2. ระบุว่า component ไหนน่าจะเป็นต้นเหตุ

3. ถ้าแก้ให้เข้ากับโปรเจกต์ได้ ให้แก้เอง

4. ถ้าไม่คุ้ม ให้ถอดออก

5. คืน preview ให้เล่นได้ก่อน

6. ยังไม่ต้อง render MP4

text · prompt · ลดลูกเล่นที่รก

จาก preview ล่าสุด วิดีโอเริ่มรกเกินไป

ช่วยลดลูกเล่นจาก catalog ให้เหลือเฉพาะ

ที่จำเป็น

ให้คุณ:

- เก็บเฉพาะ caption style ที่ช่วยให้อ่านง่าย

- ลดหรือถอด effect ที่ไม่จำเป็น

- ใช้ transition ให้น้อยลง

- ทำภาพรวมให้สะอาดขึ้น

บทที่ 8: ใส่เสียงบรรยายด้วย Gemini TTS · 5 พรอมต์

text · prompt · ตั้งค่า Google Cloud + gcloud

ฉันต้องการใช้ Gemini Flash TTS ผ่าน

Google Cloud/gcloud เพื่อสร้างเสียง

บรรยายให้วิดีโอ HyperFrames

ช่วยพาฉันตั้งค่าตาม official docs ทีละขั้น

ให้คุณ:

1. อ่าน Free Trial docs ว่าได้เครดิตเท่าไร

2. อ่าน docs ติดตั้ง gcloud CLI

3. อ่าน docs ของ Gemini-TTS / Vertex AI

4. บอกฉันว่าต้องทำอะไรในเว็บ Google Cloud

เช่น สมัคร Free Trial, สร้าง project,

เปิด billing, enable API

5. ถ้าเครื่องยังไม่มี gcloud ให้บอกวิธี

ติดตั้งจาก official docs

6. หลังติดตั้งแล้ว ให้พาฉัน login

ด้วย gcloud และตั้งค่า project

7. ใช้ Application Default Credentials

ถ้าเหมาะสม

8. ห้ามให้ฉันแปะ API key ลง chat

text · prompt · เขียนสคริปต์ 3 เวอร์ชัน

ช่วยเขียนสคริปต์เสียงบรรยายภาษาไทย

สำหรับวิดีโอนี้

เงื่อนไข:

- ความยาววิดีโอ 12 วินาที

- เสียงต้องพูดจบภายใน 10-11 วินาที

- น้ำเสียงสดใส เข้าใจง่าย

- ภาษาคนทั่วไป ไม่เป็นทางการเกินไป

ขอ 3 เวอร์ชัน:

1. เวอร์ชันกระชับ

2. เวอร์ชันสนุก

3. เวอร์ชันพรีเมียม

ยังไม่ต้องสร้างเสียง รอให้ฉันเลือกก่อน

text · prompt · สร้างไฟล์เสียง

ใช้สคริปต์ที่เลือกไว้ สร้างไฟล์เสียงด้วย

Gemini TTS ผ่าน Google Cloud/gcloud

ตาม official docs ล่าสุด

เงื่อนไข:

- ใช้ Google Cloud project ที่ตั้งค่าไว้

- ใช้ Application Default Credentials

หรือวิธี official ที่ปลอดภัย

- ใช้ Flash TTS model ที่ official docs

รองรับจริงตอนนี้

- ถ้ามี Gemini 3.x Flash TTS ใน docs

ให้ใช้ตัวนั้น

- ถ้าไม่มี ให้ใช้ Flash TTS model

official ที่เหมาะที่สุด และบอกฉัน

ว่าใช้ชื่อ model อะไร

- เลือกเสียงที่เหมาะกับวิดีโอสั้น

- เก็บไฟล์ใน assets/audio

- ตั้งชื่อ narration-v1.wav หรือ .mp3

- ห้ามแสดง token / credential / API key

ในคำตอบ

text · prompt · ใส่เสียงใน HyperFrames

ช่วยใส่ไฟล์เสียงบรรยายล่าสุดลงในวิดีโอ

HyperFrames เวอร์ชันล่าสุด

ให้คุณ:

1. ใช้ไฟล์เสียง narration ล่าสุด

2. วางเสียงให้เริ่มพร้อมจังหวะเปิดวิดีโอ

หรือหลังเปิดไม่เกิน 0.3 วินาที

3. ปรับความยาวภาพหรือ timing ถ้าจำเป็น

เพื่อให้เสียงไม่โดนตัด

4. ถ้ามีเพลง ให้ลด volume ไม่ให้ชน

เสียงพูด

5. preview เพื่อตรวจ timing

6. เปิด HTML preview ให้ฉันกด play ตรวจ

7. ยังไม่ต้อง render จนกว่าฉันจะสั่ง

"final render พร้อมเสียง"

text · prompt · final render + เสียง

ตอนนี้ฉันพอใจกับ preview พร้อมเสียงแล้ว

ช่วย final render เป็น MP4 พร้อมเสียง

ให้คุณ:

1. ตรวจ preview ล่าสุดอีกครั้ง

2. render เป็นไฟล์ output-final-with-voice-v1.mp4

3. ถ้ามี error ตอน render ให้แก้เอง

4. ตรวจว่า MP4 เปิดได้และมีเสียง

5. บอก path ของไฟล์ final

ตอนนี้อนุญาตให้ render MP4 ได้

บทที่ 9: ทำวิดีโอจากไอเดีย 5 แบบที่ใช้จริง · 6 พรอมต์

text · prompt · วิดีโอความรู้

ใช้ /hyperframes สร้างวิดีโอความรู้

แนวตั้ง 9:16 ความยาว ~30 วินาที

หัวข้อ: "[หัวข้อ]"

กลุ่มเป้าหมาย: [กลุ่ม]

โทน: [เข้าใจง่าย/สนุก/จริงจัง/มืออาชีพ]

โครงวิดีโอ:

1. hook 2 วินาทีแรก: ดึงความสนใจทันที

2. ประเด็นหลัก 3 ข้อ:

- [ประเด็นที่ 1]

- [ประเด็นที่ 2]

- [ประเด็นที่ 3]

3. สรุปท้ายคลิปแบบจำง่าย

4. call to action: "[CTA]"

ขอให้มี:

- caption ภาษาไทยใหญ่ อ่านง่ายบนมือถือ

- ภาพรวมสะอาด ไม่รก

- transition เรียบระหว่างประเด็น

- เสียงบรรยายไทยด้วย Gemini TTS

- HTML preview ก่อน ไม่ render MP4

จนกว่าฉันจะสั่ง final render

text · prompt · วิดีโอขายสินค้า

ใช้ /hyperframes สร้างวิดีโอขายสินค้า

แนวตั้ง 9:16 ความยาว 15 วินาที

สินค้า/บริการ: "[ชื่อสินค้า]"

ขายให้ใคร: [กลุ่ม]

ปัญหาลูกค้า: [ปัญหา]

จุดเด่น: [จุดเด่น 1-3 ข้อ]

call to action: "[ทักแชท / สั่งวันนี้ / ทดลองฟรี]"

โครง:

1. เปิดด้วยปัญหาที่ลูกค้าเจอ

2. แนะนำสินค้าเป็นทางออก

3. โชว์จุดเด่น 2-3 ข้อแบบสั้น

4. ปิดด้วย CTA ชัดเจน

สไตล์:

- [พรีเมียม/สดใส/มินิมอล/สนุก]

- ตัวหนังสือไทยใหญ่ อ่านง่าย

- ภาพไม่รก เน้นขายชัด

เสียงบรรยายสั้นด้วย Gemini TTS

เปิด preview ก่อน · ไม่ render MP4

จนกว่าฉันจะสั่ง final

text · prompt · สรุปบทความ

ใช้ /hyperframes สร้างวิดีโอสรุป

เนื้อหาแนวตั้ง 9:16 ~30-45 วินาที

เนื้อหาต้นฉบับ:

[วางบทความ/โพสต์/โน้ตที่นี่]

ช่วยทำตามนี้:

1. อ่านเนื้อหาต้นฉบับ

2. สรุปเป็น 3-5 ประเด็นที่คนทั่วไป

เข้าใจง่าย

3. เขียน hook 2 วินาทีแรก

4. สร้างวิดีโอจากสรุปนั้น

5. ใช้ caption ภาษาไทยอ่านง่าย

6. เลือก catalog component เฉพาะ

ที่ช่วยให้อ่านง่าย

7. สร้างเสียงบรรยายภาษาไทย

8. ใส่เสียงแล้วเปิด HTML preview

9. รอฉันอนุมัติก่อน final render

โทน: [สรุปข่าว/เข้าใจง่าย/มืออาชีพ]

CTA ท้ายคลิป: "[CTA]"

ห้ามคัดลอกทั้งบทความมายัดลงจอ

text · prompt · วิดีโอ data

ใช้ /hyperframes สร้างวิดีโอข้อมูล

แนวตั้ง 9:16 ~20-30 วินาที

หัวข้อ: "[หัวข้อข้อมูล]"

โทน: [มืออาชีพ/เข้าใจง่าย/สนุก]

ข้อมูล:

[วางข้อมูลเป็น list หรือ table ง่ายๆ

เช่น

เดือน,ยอดขาย

มกราคม,120000

กุมภาพันธ์,150000

มีนาคม,210000]

ให้คุณ:

1. ตรวจข้อมูลว่าพอทำวิดีโอได้ไหม

2. ถ้าข้อมูลไม่ชัด ให้ถามฉันก่อน

3. เลือกวิธีนำเสนอที่ง่ายที่สุด

เช่น bar chart, number count,

หรือ highlight card

4. ทำให้ตัวเลขอ่านง่ายบนมือถือ

5. ใส่ caption สรุป insight

6. เพิ่มเสียงบรรยาย

7. เปิด HTML preview ให้ตรวจ

Insight ที่อยากให้จำ: "[เช่น ยอดโต 75%]"

text · prompt · วิดีโอ quote

ใช้ /hyperframes สร้างวิดีโอ quote

แนวตั้ง 9:16 ความยาว 8-12 วินาที

ข้อความหลัก:

"[ข้อความหลัก]"

ข้อความรอง ถ้ามี:

"[ข้อความรอง]"

โทนภาพ: [มินิมอล/พรีเมียม/cinematic/สดใส]

CTA: "[เจอกันวันที่... / ติดตามต่อ / สมัครเลย]"

สไตล์:

- ตัวหนังสือเป็นพระเอกของวิดีโอ

- animation น้อยแต่ดูดี

- พื้นหลังไม่แย่งความสนใจ

- เสียงเป็นแบบสั้นมากหรือเสียงอ่าน

quote แบบนุ่ม

สร้าง HTML preview · ตรวจข้อความไทย

ไม่ล้นจอ · ไม่ render MP4 จนกว่าจะ

สั่ง final

text · prompt · กลาง

ฉันต้องการสร้างวิดีโอด้วย HyperFrames

จากไอเดียนี้:

[วางไอเดียของคุณ]

ช่วยเลือก format ที่เหมาะที่สุดให้เอง

เช่น ความรู้ ขายสินค้า สรุปบทความ

ข้อมูล หรือ quote

ให้คุณ:

1. ถามฉันเฉพาะข้อมูลที่จำเป็นถ้ายังขาด

2. เขียนโครงวิดีโอให้ฉันตรวจสั้นๆ ก่อน

3. ใช้ HyperFrames skills ที่เหมาะสม

4. ใช้ catalog เฉพาะถ้าช่วยให้งานดีขึ้น

5. สร้างเสียงด้วย Gemini TTS ถ้าจำเป็น

6. เปิด HTML preview ให้ตรวจ

7. รอฉันอนุมัติก่อน final render

ฉันไม่รู้โค้ด ใช้ภาษาไทยง่ายๆ

บทที่ 10: วิธีสั่งให้ Claude แก้ปัญหาเองเมื่อพัง · 10 พรอมต์

text · prompt · แก้ error กลาง

งานนี้ยังไม่สำเร็จ ช่วยแก้ให้เองแบบ

เป็นระบบ

ให้คุณทำตามนี้:

1. อ่าน error ล่าสุดทั้งหมดก่อน

2. อธิบายสาเหตุที่น่าจะเป็นไปได้

แบบสั้นๆ ภาษาไทย

3. ตรวจไฟล์ที่เกี่ยวข้องในโปรเจกต์

4. แก้เฉพาะจุดที่จำเป็น

5. เปิดหรืออัปเดต HTML preview เพื่อ

ตรวจว่ากลับมาเล่นได้ไหม

6. ยังไม่ต้อง render MP4 จนกว่าฉันจะ

สั่ง final render

7. ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอก

ทีละขั้นแบบคนไม่รู้โค้ด

อย่าให้ฉันแก้โค้ดเองถ้าไม่จำเป็นจริงๆ

text · prompt · preview เปิดไม่ได้

ตอนนี้ HTML preview เปิดไม่ได้หรือ

เล่นไม่ได้

ช่วยแก้ตามลำดับนี้:

1. ตรวจว่า preview server ยังทำงานไหม

2. อ่าน error ที่ขึ้นทั้งหมด

3. ตรวจไฟล์ HyperFrames หลัก

เช่น index.html

4. ตรวจ path ของรูป เสียง วิดีโอ

5. แก้ให้ preview กลับมาเล่นได้ก่อน

6. ยังไม่ต้อง render MP4

text · prompt · ข้อความล้นจอ

จาก preview ล่าสุด ข้อความภาษาไทย

ล้นจอหรืออ่านยาก

ช่วยแก้:

- ตัดประโยคให้สั้นลง

- แบ่งบรรทัดให้เหมาะกับมือถือ

- เพิ่มระยะขอบซ้ายขวา

- ตรวจขนาดฟอนต์

- ตรวจทุก scene ที่มีข้อความไทย

text · prompt · effect ทำให้พัง

หลังเพิ่ม animation/transition แล้ว

preview มีปัญหา

ช่วยตรวจว่า animation หรือ component

ไหนเป็นต้นเหตุ

ให้คุณ:

1. ระบุส่วนที่น่าจะทำให้พัง

2. ลดความซับซ้อนก่อน

3. ถ้ายังพัง ให้ถอด component ออก

4. คืน preview ให้เล่นได้ก่อน

5. ยังไม่ต้อง render MP4

ความเสถียรสำคัญกว่าลูกเล่น

text · prompt · เสียงไม่ตรง

เสียงบรรยายใน preview ยังไม่ตรงกับภาพ

ช่วยแก้:

1. ตรวจความยาวไฟล์เสียง

2. ตรวจเวลาเริ่มของเสียง

3. ตรวจว่าเสียงโดนตัดท้ายไหม

4. ถ้าเสียงยาวเกิน ให้ย่อสคริปต์ก่อน

5. ถ้าเสียงสั้นไป ให้ปรับจังหวะ scene

6. อัปเดต preview ให้ตรวจใหม่

text · prompt · Gemini TTS error

Gemini TTS ยังสร้างเสียงไม่ได้

ช่วยแก้แบบปลอดภัย:

1. อ่าน error ล่าสุด

2. ตรวจ official docs ล่าสุดของ

Gemini TTS

3. ตรวจชื่อ model ที่ใช้ตรง official

docs ไหม

4. ตรวจ API key หรือ environment

variable ที่ต้องใช้

5. ห้ามแสดง API key กลับมาในคำตอบ

6. ถ้าขาด setup ให้บอกทีละขั้นสั้นๆ

7. ถ้าแก้เองได้ ให้แก้และทดสอบสร้าง

ไฟล์เสียงใหม่

text · prompt · render fail

preview เล่นได้แล้ว แต่ final render

MP4 ไม่สำเร็จ

ช่วยแก้เฉพาะปัญหาขั้น render:

1. อ่าน error ตอน render

2. ตรวจว่าปัญหาจาก asset, audio,

codec, path, หรือ dependency

3. อย่าเปลี่ยนดีไซน์วิดีโอ

ถ้าไม่จำเป็น

4. แก้ให้ render ผ่าน

5. ตรวจว่า MP4 เปิดได้

6. บอก path ไฟล์ final

text · prompt · บังคับให้สรุปสถานะ

หยุดแก้ก่อน แล้วช่วยสรุปสถานะปัจจุบัน

แบบสั้นๆ

ตอบเป็นหัวข้อ:

1. ตอนนี้อะไรทำงานแล้ว

2. อะไรยังพัง

3. error ล่าสุดคืออะไร

4. สาเหตุที่เป็นไปได้ 1-3 ข้อ

5. แผนแก้ที่สั้นที่สุดคืออะไร

6. จะเริ่มแก้จากไฟล์หรือจุดไหน

หลังสรุปแล้ว รอฉันยืนยันก่อนค่อยแก้ต่อ

text · prompt · ย้อนเวอร์ชัน

เวอร์ชันล่าสุดแย่ลง ฉันอยากย้อนกลับ

ไปเวอร์ชันก่อนที่ preview ยังดูดี

ช่วย:

1. หาไฟล์/สถานะก่อนหน้าที่น่าจะดีที่สุด

2. สรุปว่าคุณจะย้อนอะไรกลับบ้าง

3. อย่าลบไฟล์สำคัญถ้าไม่จำเป็น

4. คืน preview ให้เหมือนเวอร์ชันที่

เสถียรก่อนหน้า

text · prompt · บันทึก error

ช่วยบันทึกปัญหาที่เพิ่งแก้ลง

PROJECT_BRIEF.md

ขอแบบสั้น:

- ปัญหาที่เจอ

- สาเหตุ

- วิธีแก้

- ไฟล์ที่เกี่ยวข้อง

- ถ้าเจออีกควรใช้ prompt อะไร

- สถานะล่าสุด preview และ MP4

บทที่ 11: Workflow สั้นที่สุดตั้งแต่เริ่มจนได้วิดีโอ · 6 พรอมต์

text · prompt · ตรวจความพร้อม

ช่วยตรวจความพร้อมของโปรเจกต์นี้ก่อน

เริ่มทำวิดีโอ

ตรวจให้หน่อยว่า:

1. อยู่ในโฟลเดอร์โปรเจกต์ถูกต้องไหม

2. HyperFrames skills พร้อมใช้ไหม

3. มี PROJECT_BRIEF.md หรือ context เดิม

4. preview workflow พร้อมไหม

5. ถ้าขาดอะไร ให้แก้หรือบอกฉันสั้นที่สุด

ยังไม่ต้องสร้างวิดีโอ

text · prompt · Master

ฉันต้องการให้คุณเป็นผู้ช่วยสร้างวิดีโอ

ด้วย HyperFrames ในโปรเจกต์นี้

กติกา:

- ฉันไม่รู้โค้ดเลย

- ใช้ prompt ภาษาไทยเป็นหลัก

- ใช้ official docs/repo เป็นฐาน

- ใช้ HyperFrames skills ที่เหมาะสม

- ใช้ CLI เองเท่าที่จำเป็น

- ทำ HTML preview ก่อน

- ห้าม render MP4 จนกว่าฉันจะสั่ง

"final render"

- ถ้ามี error ให้แก้เองก่อน

งานที่ต้องทำ:

สร้างวิดีโอ [แนวตั้ง/แนวนอน] ความยาว

[จำนวน] วินาที เรื่อง "[หัวข้อ]"

รายละเอียด:

- กลุ่มคนดู: [กลุ่ม]

- โทนภาพ: [โทน]

- ประเด็นหลัก: [ประเด็น]

- call to action: "[CTA]"

เริ่มจากสร้าง HTML preview ให้ฉันกด play

ดูก่อน

text · prompt · feedback

หลังดู preview แล้ว ขอแก้จุดนี้:

1. [จุดที่ 1]

2. [จุดที่ 2]

3. [จุดที่ 3]

ให้คุณแก้ไฟล์ที่จำเป็น แล้วอัปเดต

HTML preview ให้ฉันดูใหม่

ยังไม่ต้อง render MP4

text · prompt · catalog

ช่วยใช้ official HyperFrames catalog

เพื่อปรับวิดีโอ preview ล่าสุด

ฉันต้องการ:

- [เช่น caption อ่านง่ายขึ้น]

- [เช่น transition นุ่มขึ้น]

เลือกไม่เกิน 2-3 component/block

ใช้เฉพาะ official catalog

ติดตั้งและใส่เอง

อัปเดต HTML preview ให้ดู

text · prompt · TTS

ช่วยเพิ่มเสียงบรรยายภาษาไทยให้วิดีโอ

preview ล่าสุดด้วย Gemini TTS

ให้ทำตามนี้:

1. อ่าน official Gemini TTS docs ล่าสุด

2. ตรวจ model TTS ที่ใช้ได้จริง

3. ถ้าชื่อ model ที่ฉันพูดไม่ตรง docs

ให้บอกตรงๆ และเลือก official ที่เหมาะ

4. เขียนสคริปต์เสียงไทยให้พอดี

5. สร้างไฟล์เสียงโดยเก็บ API key

อย่างปลอดภัย

6. ใส่เสียงในวิดีโอ และเปิด preview

ให้ตรวจ sync

7. ยังไม่ต้อง render จนกว่าจะสั่ง

"final render พร้อมเสียง"

ห้ามแสดง API key กลับมาในคำตอบ

text · prompt · final

ตอนนี้ฉันพอใจกับ preview ล่าสุดแล้ว

ช่วย final render เป็น MP4

ตั้งชื่อไฟล์ไม่ให้ทับของเดิม เช่น

output-final-v1.mp4

ถ้ามี error ตอน render ให้แก้เอง

ตรวจว่า MP4 เปิดได้ ถ้ามีเสียงให้ตรวจ

ว่าเสียงอยู่ในไฟล์จริง

ตอนนี้อนุญาตให้ render MP4 ได้

ภาคผนวก A: Prompt สั้นพร้อมใช้ · 10 พรอมต์

text · prompt · ตรวจความพร้อม

ช่วยตรวจความพร้อมของโปรเจกต์นี้ก่อน

เริ่มงาน

ตรวจว่าอยู่ในโฟลเดอร์ถูกต้องไหม

มี HyperFrames skills พร้อมไหม

และ preview workflow พร้อมไหม

ถ้าขาดอะไร ให้แก้หรือบอกฉันสั้นที่สุด

ยังไม่ต้องสร้างวิดีโอ

text · prompt · อ่าน repo

ก่อนทำงาน HyperFrames ให้คุณอ่าน

official repo นี้ก่อน:

https://github.com/heygen-com/hyperframes

จากนั้นสรุปเฉพาะสิ่งที่จำเป็นต่อโปรเจกต์นี้

และใช้วิธี official เท่านั้น

text · prompt · ติดตั้ง skills

ช่วยติดตั้ง HyperFrames skills ตามวิธี

จาก official HyperFrames repo

ให้คุณรันคำสั่งเองถ้าจำเป็น ใช้วิธี

official เท่านั้น

ถ้าติด error ให้แก้เองก่อน แล้วสรุปสั้นๆ

text · prompt · สร้างวิดีโอ

ใช้ /hyperframes สร้างวิดีโอ

[แนวตั้ง/แนวนอน] ความยาว [จำนวน] วินาที

เรื่อง "[หัวข้อ]"

กลุ่มคนดู: [กลุ่ม]

โทนภาพ: [โทน]

ประเด็นหลัก: [ประเด็น]

CTA: "[CTA]"

ให้สร้าง HTML preview ให้ฉันกด play

ดูก่อน ยังไม่ต้อง render MP4 จนกว่าฉัน

จะสั่ง "final render"

text · prompt · feedback

หลังดู preview แล้ว ขอแก้:

1. [จุดที่ 1]

2. [จุดที่ 2]

3. [จุดที่ 3]

แก้ไฟล์ที่จำเป็น แล้วอัปเดต HTML preview

ให้ดูใหม่ ยังไม่ต้อง render MP4

text · prompt · catalog

ช่วยเลือก block/component จาก official

HyperFrames catalog ที่เหมาะกับวิดีโอนี้

เป้าหมายคือ [caption อ่านง่ายขึ้น /

transition นุ่มขึ้น / effect เบาๆ]

เลือกไม่เกิน 3 รายการ ใส่ในโปรเจกต์

แล้วอัปเดต HTML preview

ยังไม่ต้อง render MP4

text · prompt · Gemini TTS

ช่วยเพิ่มเสียงบรรยายภาษาไทยด้วย

Gemini Flash TTS ผ่าน Google Cloud/gcloud

ก่อนทำงานให้อ่าน official docs ล่าสุดของ

Google Cloud Free Trial, gcloud CLI

และ Gemini-TTS

ให้คุณ:

1. พาฉันตั้งค่า Google Cloud

แบบมือใหม่ ถ้ายังไม่พร้อม

2. ตรวจชื่อ Flash TTS model ที่

official docs รองรับจริง

3. ใช้ gcloud/Application Default

Credentials หรือวิธี official

ที่ปลอดภัย

4. เขียนสคริปต์เสียงให้พอดีกับวิดีโอ

5. สร้างไฟล์เสียง ใส่ใน preview

และตรวจ sync

6. ยังไม่ต้อง render MP4 จนกว่าฉัน

จะสั่ง final render พร้อมเสียง

ห้ามแสดง token / credential / API key

ในคำตอบ

text · prompt · แก้ error

งานนี้ยังไม่สำเร็จ ช่วยแก้ให้เอง

แบบเป็นระบบ

อ่าน error ล่าสุด หาสาเหตุ แก้เฉพาะ

จุดที่จำเป็น แล้วทำให้ HTML preview

กลับมาเล่นได้ก่อน

ยังไม่ต้อง render MP4 จนกว่าฉันจะสั่ง

final render

ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอกทีละขั้น

แบบคนไม่รู้โค้ด

text · prompt · final

ตอนนี้ฉันพอใจกับ preview ล่าสุดแล้ว

ช่วย final render เป็น MP4

ตั้งชื่อไฟล์ไม่ให้ทับของเดิม

ถ้ามี error ตอน render ให้แก้เอง

ตรวจว่า MP4 เปิดได้

แล้วบอก path ไฟล์ final

ตอนนี้อนุญาตให้ render MP4 ได้

text · prompt · บันทึก

ช่วยอัปเดต PROJECT_BRIEF.md

บันทึก:

- หัวข้อวิดีโอ

- style ที่ใช้

- component ที่เพิ่ม

- ไฟล์เสียง

- path preview

- path MP4 final

- ปัญหาที่เจอ

- สิ่งที่ควรปรับต่อ

$ ls ~/downloads

ดาวน์โหลด

หนังสือเต็มเล่ม + คลังพรอมต์แยกไฟล์ ไว้เปิดอ่านออฟไลน์ หรือใช้เป็นไฟล์อ้างอิงให้ AI ตัวอื่น

$ cd ~/community

มาเจอกันในคอมมูนิตี้

เข้ากลุ่ม Facebook ของเรา

$ wget free/[slug].pdf

$ wget free/hyperframes-claude-code.pdf

สร้างวิดีโอด้วยการคุยกับ AI

ดาวน์โหลด PDF ฟรีeBook ฟรี · 97 หน้า

อยากให้ส่งของใหม่ ๆ ทางอีเมลด้วยมั้ย?

กดสมัคร = ยินยอมรับเทคนิค AI และของแจกใหม่ทางอีเมล ยกเลิกได้ทุกเมื่อ

นโยบายความเป็นส่วนตัว

$ grep -r "prompt" ~/book

คลังพรอมต์ · 69 พรอมต์

บทที่ 1: หนังสือเล่มนี้ทำอะไร และไม่ทำอะไร · 2 พรอมต์

text · prompt · claude code

สร้างวิดีโอแนวตั้ง 9:16 ความยาว 15 วินาที

เรื่อง "3 วิธีเริ่มใช้ AI ในงานประจำวัน"

ขอสไตล์ทันสมัย ตัวหนังสือใหญ่ อ่านง่าย

มี caption ภาษาไทย และจบด้วยคำว่า

"เริ่มวันนี้ ง่ายกว่าที่คิด"

ช่วยสร้างไฟล์ทั้งหมด เปิด HTML preview

ให้ฉันดูก่อน แก้ error และยังไม่ต้อง render

MP4 จนกว่าฉันจะสั่ง final render

text · prompt · official-first

ก่อนทำงานนี้ ให้คุณอ่าน official docs

หรือ official GitHub repo ล่าสุดก่อน

แล้วใช้วิธีที่เป็น official เท่านั้น

ถ้าข้อมูลในเว็บกับสิ่งที่คุณจำได้ไม่ตรงกัน

ให้ยึดข้อมูลจาก official source ล่าสุด

บทที่ 2: เตรียมเครื่องแบบไม่ต้องรู้โค้ด · 5 พรอมต์

bash · terminal

curl -fsSL https://claude.ai/install.sh | bash

bash · powershell

irm https://claude.ai/install.ps1 | iex

bash · terminal

claude

text · prompt · ตรวจความพร้อม

ฉันเป็นมือใหม่ ไม่มีพื้นฐานโค้ดเลย

ช่วยตรวจให้หน่อยว่า Claude Code

พร้อมใช้งานหรือยัง

ขอให้คุณ:

1. ตรวจว่าตอนนี้ฉันอยู่ในโฟลเดอร์ไหน

2. บอกฉันสั้นๆ ว่าพร้อมเริ่มโปรเจกต์

วิดีโอหรือยัง

3. ถ้าขาดอะไร ให้บอกทีละขั้นแบบ

ภาษาคนทั่วไป

4. อย่าให้ฉันทำคำสั่งเองถ้าไม่จำเป็น

text · prompt · แก้ command not found

ฉันกำลังติดตั้ง Claude Code แต่เปิด

คำสั่ง claude ไม่ได้

นี่คือ error ที่ขึ้น:

[วาง error ตรงนี้]

ฉันไม่รู้โค้ด ช่วยบอกวิธีแก้แบบทีละขั้น

สำหรับเครื่องของฉัน โดยใช้วิธี official

และไม่ให้ฉันทำอะไรเกินจำเป็น

บทที่ 3: ตั้งค่าโปรเจกต์วิดีโอแรกด้วย Prompt · 5 พรอมต์

bash · terminal

mkdir -p ~/Desktop/hyperframes-video && cd ~/Desktop/hyperframes-video && claude

bash · powershell

mkdir "$HOME\Desktop\hyperframes-video"; cd "$HOME\Desktop\hyperframes-video"; claude

text · prompt · ตรวจโฟลเดอร์

ช่วยตรวจให้หน่อยว่าตอนนี้เราอยู่ใน

โฟลเดอร์โปรเจกต์วิดีโอที่ถูกต้องหรือยัง

สิ่งที่ต้องการ:

1. บอก path โฟลเดอร์ปัจจุบัน

2. ตรวจว่าโฟลเดอร์นี้เหมาะสำหรับเริ่ม

โปรเจกต์ HyperFrames หรือไม่

3. ถ้ายังไม่เหมาะ ให้บอกวิธีแก้แบบสั้นที่สุด

4. ยังไม่ต้องติดตั้งอะไร และยังไม่ต้อง

สร้างวิดีโอ

text · prompt · อ่าน HyperFrames official repo

ฉันต้องการสร้างโปรเจกต์วิดีโอด้วย

HyperFrames ในโฟลเดอร์นี้

ก่อนทำอะไร ให้คุณอ่าน official source

เหล่านี้ก่อน:

1. GitHub official ของ HyperFrames:

https://github.com/heygen-com/hyperframes

2. documentation และ catalog ที่ repo

official แนะนำ

หลังอ่านแล้ว ให้สรุปสั้นๆ ว่า

HyperFrames ใช้ทำอะไร workflow พื้นฐาน

คืออะไร และขั้นต่อไปควรทำอะไร

สำคัญ:

- ยังไม่ต้องติดตั้งอะไร

- ยังไม่ต้องสร้างไฟล์วิดีโอ

- ใช้ข้อมูลจาก official source เท่านั้น

text · prompt · สร้าง PROJECT_BRIEF.md

ช่วยสร้างไฟล์บันทึกเป้าหมายโปรเจกต์ชื่อ

PROJECT_BRIEF.md ในโฟลเดอร์นี้

เนื้อหาให้สั้นและชัดเจน:

- โปรเจกต์ใช้ HyperFrames + Claude Code

- ผู้ใช้ไม่รู้โค้ด ใช้ prompt ภาษาไทย

- Claude ต้องอ่าน official docs ก่อนติดตั้ง

- ใช้ HTML preview จนพอใจ แล้วค่อย render MP4

- ถ้ามี error ให้ Claude แก้เองก่อน

บทที่ 4: ให้ Claude ติดตั้ง HyperFrames Skills เอง · 5 พรอมต์

text · prompt · ติดตั้ง skills จาก official repo

จาก official HyperFrames repo ที่คุณ

อ่านแล้ว ช่วยติดตั้ง HyperFrames skills

ให้ Claude Code ใช้งานในโปรเจกต์นี้

ให้ทำตามนี้:

1. ตรวจวิธีติดตั้ง skills จากหน้า

official repo: github.com/heygen-com/hyperframes

2. ใช้วิธี official เท่านั้น

3. ถ้าต้องรันคำสั่ง ให้คุณรันเอง

4. ถ้าระบบถาม permission ให้บอกฉันสั้นๆ

ว่าคำสั่งนั้นทำอะไร ก่อนให้ฉันอนุมัติ

5. หลังติดตั้งเสร็จ ให้ตรวจว่ามี skills

สำคัญอะไรใช้งานได้บ้าง

6. สรุปเป็นภาษาไทยแบบสั้น ไม่เกิน 10 บรรทัด

ถ้าติด error ให้แก้เองก่อน

text · prompt · ตรวจว่า skills พร้อมใช้

ช่วยตรวจให้หน่อยว่า HyperFrames skills

ที่ติดตั้งไว้พร้อมใช้งานหรือยัง

ขอให้คุณ:

1. บอกชื่อ skills ที่เกี่ยวกับ HyperFrames

ที่พบ

2. อธิบายสั้นๆ ว่าแต่ละตัวใช้ทำอะไร

3. บอกว่าตอนนี้พร้อมเริ่มสร้างวิดีโอแรก

หรือยัง

4. ถ้ายังไม่พร้อม ให้แก้หรือแนะนำขั้นตอน

ถัดไปแบบสั้นที่สุด

text · prompt · เรียก skill โดยตรง

ใช้ /hyperframes สร้างวิดีโอแนะนำสินค้า

15 วินาที แนวตั้ง 9:16

text · prompt · ให้ Claude เลือก skill

ช่วยใช้ HyperFrames skills ที่เหมาะสมเพื่อ

สร้างวิดีโอนี้และเปิด HTML preview ให้ฉัน

ดูก่อน ยังไม่ต้อง render MP4 จนกว่าฉันจะ

สั่ง final render

text · prompt · แก้ error ติดตั้ง skills

การติดตั้ง HyperFrames skills ยังไม่สำเร็จ

ช่วยทำตามนี้:

1. อ่าน error ล่าสุดทั้งหมด

2. ตรวจจาก official HyperFrames repo

ว่าปัญหานี้เกี่ยวกับอะไร

3. ถ้าขาด dependency เช่น Node, Git,

Git LFS หรืออย่างอื่น ให้บอกฉันสั้นๆ

4. ถ้าคุณแก้เองได้ ให้แก้เอง

5. ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอก

ทีละขั้น และบอกเหตุผลสั้นๆ

6. หลังแก้แล้ว ให้ตรวจซ้ำว่า skills

พร้อมใช้งานหรือยัง

บทที่ 5: สร้างวิดีโอแรกด้วย Prompt เดียว · 4 พรอมต์

text · prompt · สร้างวิดีโอแรก

ใช้ /hyperframes สร้างวิดีโอแนวตั้ง 9:16

ความยาว 12 วินาที หัวข้อ

"3 เหตุผลที่ควรเริ่มใช้ AI ทำวิดีโอ"

สไตล์ภาพ:

- สดใส ทันสมัย เหมาะกับ TikTok/Reels

- พื้นหลัง gradient เคลื่อนไหวเบาๆ

- ตัวหนังสือภาษาไทยใหญ่ อ่านง่าย

- มี caption เด้งตามจังหวะ แต่ไม่รก

โครงวิดีโอ:

1. hook: "ทำวิดีโอด้วย AI ไม่ต้องเขียนโค้ด"

2. ประเด็น 1: "เริ่มจาก prompt ภาษาไทย"

3. ประเด็น 2: "ให้ AI จัดการไฟล์และ preview"

4. ประเด็น 3: "แก้ได้เหมือนคุยกับ editor"

5. CTA: "ลองทำวิดีโอแรกวันนี้"

ให้คุณทำเอง:

- สร้างไฟล์ที่จำเป็น

- ใช้ HyperFrames skills ที่เหมาะสม

- เปิด HTML preview ให้ฉันกด play ดู

- ตรวจว่าข้อความไทยไม่ล้นจอ

- ยังไม่ต้อง render MP4 จนกว่าฉันจะ

พิมพ์ว่า "final render"

text · prompt · หยุดก่อน render

หยุดก่อน ยังไม่ต้อง render MP4

ตอนนี้ฉันต้องการดู HTML preview ใน

browser ก่อน เพื่อแก้เร็วๆ

ช่วยทำให้ preview เล่นได้ แล้วบอกฉันว่า

ต้องเปิด URL หรือไฟล์ไหนเพื่อกด play ดู

รอ feedback จากฉันก่อน อย่า render จน

กว่าฉันจะสั่งว่า "final render"

text · prompt · แก้ข้อความล้นจอ

จาก preview ที่ดู ข้อความไทยบางจุด

ล้นจอหรืออ่านยาก

ช่วยแก้เฉพาะไฟล์ HTML/CSS ของ HyperFrames

ก่อน ยังไม่ต้อง render MP4

สิ่งที่ต้องแก้:

- ข้อความต้องไม่ล้นจอ

- ฟอนต์ต้องใหญ่พออ่านบนมือถือ

- ประโยคที่ยาวให้ย่อให้สั้นลง

- เปิด preview ให้ดูอีกครั้งหลังแก้

text · prompt · final render

ตอนนี้ฉันพอใจกับ preview แล้ว

ช่วยทำ final render เป็น MP4

ให้คุณ:

1. ตรวจไฟล์ HyperFrames ล่าสุด

2. render เป็น MP4 คุณภาพเหมาะสำหรับ

ส่งงาน

3. ตั้งชื่อไฟล์ output-final-v1.mp4

4. ถ้ามี error ตอน render ให้แก้เอง

5. หลังเสร็จ ให้บอก path ของไฟล์ MP4 final

ตอนนี้อนุญาตให้ render MP4 ได้

บทที่ 6: แก้วิดีโอแบบคุยกับ AI เหมือนคุยกับ Editor · 5 พรอมต์

text · prompt · แก้รอบแรก

จาก preview ล่าสุด ช่วยแก้วิดีโอนี้ให้

ดูดีขึ้น โดยยังคงเนื้อหาเดิม

สิ่งที่ต้องปรับ:

- ทำภาพรวมให้สะอาดขึ้น ไม่รก

- เพิ่ม contrast ให้ตัวหนังสืออ่านง่าย

- ทำตัวหนังสือใหญ่ขึ้น 15-20%

- ลด animation ที่ทำให้เสียสมาธิ

- ทำ transition ระหว่างประเด็นให้นุ่มขึ้น

ให้คุณ:

1. แก้ไฟล์ HTML/CSS/asset ที่จำเป็นเอง

2. อัปเดต preview ให้ฉันกด play ดู

3. ยังไม่ต้อง render MP4

4. รอ feedback จากฉันก่อน

text · prompt · mood พรีเมียม

จาก preview ล่าสุด ช่วยปรับ mood สีให้

ดูพรีเมียมขึ้น

แนวทาง:

- ใช้สีหลักเป็นดำ ทอง ขาว

- พื้นหลังเรียบขึ้น

- ลดสีสดที่ไม่จำเป็น

- ให้ตัวหนังสือเด่นและอ่านง่าย

- transition ดูนิ่งและแพง ไม่เด้งเกินไป

แก้ใน HTML preview ก่อน ยังไม่ต้อง render

เปิด preview ให้ฉันดูอีกครั้งหลังแก้

text · prompt · mood สดใส

จาก preview ล่าสุด ช่วยปรับ mood สีให้

สดใส เหมาะกับ TikTok/Reels

แนวทาง:

- ใช้สีหลักไม่เกิน 3 สี

- พื้นหลังมี movement เบาๆ

- ตัวหนังสือสว่าง อ่านง่าย

- animation สนุก แต่ไม่รก

- จังหวะโดยรวมเร็วขึ้นเล็กน้อย

text · prompt · final render รอบ iterate

ตอนนี้ฉันพอใจกับ preview ล่าสุดแล้ว

ช่วย final render เป็น MP4

ให้คุณ:

1. ตรวจ preview ล่าสุดอีกครั้ง

2. render เป็น MP4 ใหม่ชื่อ

output-final-v2.mp4

3. ถ้ามี error ตอน render ให้แก้เอง

4. ตรวจว่าไฟล์ MP4 เปิดได้

5. บอก path ของไฟล์ final

ตอนนี้อนุญาตให้ render MP4 ได้

text · prompt · บันทึก

ช่วยสรุปการแก้วิดีโอรอบนี้ลง

PROJECT_BRIEF.md

ขอให้บันทึก:

- preview ล่าสุดใช้ไฟล์/URL อะไร

- MP4 final ล่าสุดอยู่ที่ไหน

- สิ่งที่ปรับจากเวอร์ชันแรก

- style ปัจจุบันของวิดีโอ

- จุดที่ยังควรปรับต่อ

บทที่ 7: ใช้ HyperFrames Catalog โดยไม่ต้องจำชื่อ Component · 6 พรอมต์

text · prompt · เลือกจาก catalog

ช่วยเปิด official HyperFrames catalog

แล้วเลือก block/component ที่เหมาะกับ

วิดีโอ preview ล่าสุดของฉัน

เป้าหมาย:

- caption อ่านง่ายและมี movement

- transition ระหว่าง scene นุ่มขึ้น

- effect เบาๆ ให้ภาพไม่แบน แต่ห้ามรก

เงื่อนไข:

1. ใช้เฉพาะของจาก official catalog

2. เลือกไม่เกิน 3 รายการในรอบนี้

3. ก่อนติดตั้ง ให้สรุปชื่อที่เลือกและ

เหตุผลสั้นๆ

4. ติดตั้งและใส่ในโปรเจกต์เอง

5. อัปเดต HTML preview ให้ฉันกด play ดู

6. ยังไม่ต้อง render MP4

ถ้า component ไหนทำให้ preview พัง

ให้ถอดออกหรือเลือกตัวที่ง่ายกว่า

text · prompt · caption

ใช้ /hyperframes-registry ช่วยหา caption

style ที่เหมาะกับวิดีโอสั้นภาษาไทย

เกณฑ์เลือก:

- อ่านง่ายบนมือถือ

- movement ชัดแต่ไม่เวียนหัว

- รองรับข้อความสั้นหลาย scene

- ไม่ทำให้ layout ล้นจอ

เลือก 1 แบบ ติดตั้ง ใส่ในวิดีโอ

แล้วอัปเดต HTML preview ให้ดู

text · prompt · transition

ใช้ /hyperframes-registry หา transition

จาก catalog ที่เหมาะกับวิดีโอสั้นเพื่อ

ความรู้

ต้องการ:

- transition เรียบและนุ่ม

- ไม่ flashy เกินไป

- ไม่ทำให้อ่านข้อความยาก

- ใช้เฉพาะช่วงเปลี่ยนประเด็นหลัก

เลือก 1 แบบที่เหมาะที่สุด ใส่ในวิดีโอ

แล้วเปิด preview ให้ดู

text · prompt · effect

ช่วยเลือก effect เบาๆ จาก catalog

เพื่อทำให้วิดีโอดูมี texture มากขึ้น

ต้องการ:

- grain หรือ shimmer เบาๆ ได้

- ห้ามทำให้ข้อความอ่านยาก

- ห้ามเพิ่มความรกของพื้นหลัง

- ใช้ opacity ต่ำพอประมาณ

text · prompt · แก้ preview พัง

หลังเพิ่ม component/block แล้ว preview

มีปัญหา

ช่วยทำตามนี้:

1. อ่าน error ล่าสุด

2. ระบุว่า component ไหนน่าจะเป็นต้นเหตุ

3. ถ้าแก้ให้เข้ากับโปรเจกต์ได้ ให้แก้เอง

4. ถ้าไม่คุ้ม ให้ถอดออก

5. คืน preview ให้เล่นได้ก่อน

6. ยังไม่ต้อง render MP4

text · prompt · ลดลูกเล่นที่รก

จาก preview ล่าสุด วิดีโอเริ่มรกเกินไป

ช่วยลดลูกเล่นจาก catalog ให้เหลือเฉพาะ

ที่จำเป็น

ให้คุณ:

- เก็บเฉพาะ caption style ที่ช่วยให้อ่านง่าย

- ลดหรือถอด effect ที่ไม่จำเป็น

- ใช้ transition ให้น้อยลง

- ทำภาพรวมให้สะอาดขึ้น

บทที่ 8: ใส่เสียงบรรยายด้วย Gemini TTS · 5 พรอมต์

text · prompt · ตั้งค่า Google Cloud + gcloud

ฉันต้องการใช้ Gemini Flash TTS ผ่าน

Google Cloud/gcloud เพื่อสร้างเสียง

บรรยายให้วิดีโอ HyperFrames

ช่วยพาฉันตั้งค่าตาม official docs ทีละขั้น

ให้คุณ:

1. อ่าน Free Trial docs ว่าได้เครดิตเท่าไร

2. อ่าน docs ติดตั้ง gcloud CLI

3. อ่าน docs ของ Gemini-TTS / Vertex AI

4. บอกฉันว่าต้องทำอะไรในเว็บ Google Cloud

เช่น สมัคร Free Trial, สร้าง project,

เปิด billing, enable API

5. ถ้าเครื่องยังไม่มี gcloud ให้บอกวิธี

ติดตั้งจาก official docs

6. หลังติดตั้งแล้ว ให้พาฉัน login

ด้วย gcloud และตั้งค่า project

7. ใช้ Application Default Credentials

ถ้าเหมาะสม

8. ห้ามให้ฉันแปะ API key ลง chat

text · prompt · เขียนสคริปต์ 3 เวอร์ชัน

ช่วยเขียนสคริปต์เสียงบรรยายภาษาไทย

สำหรับวิดีโอนี้

เงื่อนไข:

- ความยาววิดีโอ 12 วินาที

- เสียงต้องพูดจบภายใน 10-11 วินาที

- น้ำเสียงสดใส เข้าใจง่าย

- ภาษาคนทั่วไป ไม่เป็นทางการเกินไป

ขอ 3 เวอร์ชัน:

1. เวอร์ชันกระชับ

2. เวอร์ชันสนุก

3. เวอร์ชันพรีเมียม

ยังไม่ต้องสร้างเสียง รอให้ฉันเลือกก่อน

text · prompt · สร้างไฟล์เสียง

ใช้สคริปต์ที่เลือกไว้ สร้างไฟล์เสียงด้วย

Gemini TTS ผ่าน Google Cloud/gcloud

ตาม official docs ล่าสุด

เงื่อนไข:

- ใช้ Google Cloud project ที่ตั้งค่าไว้

- ใช้ Application Default Credentials

หรือวิธี official ที่ปลอดภัย

- ใช้ Flash TTS model ที่ official docs

รองรับจริงตอนนี้

- ถ้ามี Gemini 3.x Flash TTS ใน docs

ให้ใช้ตัวนั้น

- ถ้าไม่มี ให้ใช้ Flash TTS model

official ที่เหมาะที่สุด และบอกฉัน

ว่าใช้ชื่อ model อะไร

- เลือกเสียงที่เหมาะกับวิดีโอสั้น

- เก็บไฟล์ใน assets/audio

- ตั้งชื่อ narration-v1.wav หรือ .mp3

- ห้ามแสดง token / credential / API key

ในคำตอบ

text · prompt · ใส่เสียงใน HyperFrames

ช่วยใส่ไฟล์เสียงบรรยายล่าสุดลงในวิดีโอ

HyperFrames เวอร์ชันล่าสุด

ให้คุณ:

1. ใช้ไฟล์เสียง narration ล่าสุด

2. วางเสียงให้เริ่มพร้อมจังหวะเปิดวิดีโอ

หรือหลังเปิดไม่เกิน 0.3 วินาที

3. ปรับความยาวภาพหรือ timing ถ้าจำเป็น

เพื่อให้เสียงไม่โดนตัด

4. ถ้ามีเพลง ให้ลด volume ไม่ให้ชน

เสียงพูด

5. preview เพื่อตรวจ timing

6. เปิด HTML preview ให้ฉันกด play ตรวจ

7. ยังไม่ต้อง render จนกว่าฉันจะสั่ง

"final render พร้อมเสียง"

text · prompt · final render + เสียง

ตอนนี้ฉันพอใจกับ preview พร้อมเสียงแล้ว

ช่วย final render เป็น MP4 พร้อมเสียง

ให้คุณ:

1. ตรวจ preview ล่าสุดอีกครั้ง

2. render เป็นไฟล์ output-final-with-voice-v1.mp4

3. ถ้ามี error ตอน render ให้แก้เอง

4. ตรวจว่า MP4 เปิดได้และมีเสียง

5. บอก path ของไฟล์ final

ตอนนี้อนุญาตให้ render MP4 ได้

บทที่ 9: ทำวิดีโอจากไอเดีย 5 แบบที่ใช้จริง · 6 พรอมต์

text · prompt · วิดีโอความรู้

ใช้ /hyperframes สร้างวิดีโอความรู้

แนวตั้ง 9:16 ความยาว ~30 วินาที

หัวข้อ: "[หัวข้อ]"

กลุ่มเป้าหมาย: [กลุ่ม]

โทน: [เข้าใจง่าย/สนุก/จริงจัง/มืออาชีพ]

โครงวิดีโอ:

1. hook 2 วินาทีแรก: ดึงความสนใจทันที

2. ประเด็นหลัก 3 ข้อ:

- [ประเด็นที่ 1]

- [ประเด็นที่ 2]

- [ประเด็นที่ 3]

3. สรุปท้ายคลิปแบบจำง่าย

4. call to action: "[CTA]"

ขอให้มี:

- caption ภาษาไทยใหญ่ อ่านง่ายบนมือถือ

- ภาพรวมสะอาด ไม่รก

- transition เรียบระหว่างประเด็น

- เสียงบรรยายไทยด้วย Gemini TTS

- HTML preview ก่อน ไม่ render MP4

จนกว่าฉันจะสั่ง final render

text · prompt · วิดีโอขายสินค้า

ใช้ /hyperframes สร้างวิดีโอขายสินค้า

แนวตั้ง 9:16 ความยาว 15 วินาที

สินค้า/บริการ: "[ชื่อสินค้า]"

ขายให้ใคร: [กลุ่ม]

ปัญหาลูกค้า: [ปัญหา]

จุดเด่น: [จุดเด่น 1-3 ข้อ]

call to action: "[ทักแชท / สั่งวันนี้ / ทดลองฟรี]"

โครง:

1. เปิดด้วยปัญหาที่ลูกค้าเจอ

2. แนะนำสินค้าเป็นทางออก

3. โชว์จุดเด่น 2-3 ข้อแบบสั้น

4. ปิดด้วย CTA ชัดเจน

สไตล์:

- [พรีเมียม/สดใส/มินิมอล/สนุก]

- ตัวหนังสือไทยใหญ่ อ่านง่าย

- ภาพไม่รก เน้นขายชัด

เสียงบรรยายสั้นด้วย Gemini TTS

เปิด preview ก่อน · ไม่ render MP4

จนกว่าฉันจะสั่ง final

text · prompt · สรุปบทความ

ใช้ /hyperframes สร้างวิดีโอสรุป

เนื้อหาแนวตั้ง 9:16 ~30-45 วินาที

เนื้อหาต้นฉบับ:

[วางบทความ/โพสต์/โน้ตที่นี่]

ช่วยทำตามนี้:

1. อ่านเนื้อหาต้นฉบับ

2. สรุปเป็น 3-5 ประเด็นที่คนทั่วไป

เข้าใจง่าย

3. เขียน hook 2 วินาทีแรก

4. สร้างวิดีโอจากสรุปนั้น

5. ใช้ caption ภาษาไทยอ่านง่าย

6. เลือก catalog component เฉพาะ

ที่ช่วยให้อ่านง่าย

7. สร้างเสียงบรรยายภาษาไทย

8. ใส่เสียงแล้วเปิด HTML preview

9. รอฉันอนุมัติก่อน final render

โทน: [สรุปข่าว/เข้าใจง่าย/มืออาชีพ]

CTA ท้ายคลิป: "[CTA]"

ห้ามคัดลอกทั้งบทความมายัดลงจอ

text · prompt · วิดีโอ data

ใช้ /hyperframes สร้างวิดีโอข้อมูล

แนวตั้ง 9:16 ~20-30 วินาที

หัวข้อ: "[หัวข้อข้อมูล]"

โทน: [มืออาชีพ/เข้าใจง่าย/สนุก]

ข้อมูล:

[วางข้อมูลเป็น list หรือ table ง่ายๆ

เช่น

เดือน,ยอดขาย

มกราคม,120000

กุมภาพันธ์,150000

มีนาคม,210000]

ให้คุณ:

1. ตรวจข้อมูลว่าพอทำวิดีโอได้ไหม

2. ถ้าข้อมูลไม่ชัด ให้ถามฉันก่อน

3. เลือกวิธีนำเสนอที่ง่ายที่สุด

เช่น bar chart, number count,

หรือ highlight card

4. ทำให้ตัวเลขอ่านง่ายบนมือถือ

5. ใส่ caption สรุป insight

6. เพิ่มเสียงบรรยาย

7. เปิด HTML preview ให้ตรวจ

Insight ที่อยากให้จำ: "[เช่น ยอดโต 75%]"

text · prompt · วิดีโอ quote

ใช้ /hyperframes สร้างวิดีโอ quote

แนวตั้ง 9:16 ความยาว 8-12 วินาที

ข้อความหลัก:

"[ข้อความหลัก]"

ข้อความรอง ถ้ามี:

"[ข้อความรอง]"

โทนภาพ: [มินิมอล/พรีเมียม/cinematic/สดใส]

CTA: "[เจอกันวันที่... / ติดตามต่อ / สมัครเลย]"

สไตล์:

- ตัวหนังสือเป็นพระเอกของวิดีโอ

- animation น้อยแต่ดูดี

- พื้นหลังไม่แย่งความสนใจ

- เสียงเป็นแบบสั้นมากหรือเสียงอ่าน

quote แบบนุ่ม

สร้าง HTML preview · ตรวจข้อความไทย

ไม่ล้นจอ · ไม่ render MP4 จนกว่าจะ

สั่ง final

text · prompt · กลาง

ฉันต้องการสร้างวิดีโอด้วย HyperFrames

จากไอเดียนี้:

[วางไอเดียของคุณ]

ช่วยเลือก format ที่เหมาะที่สุดให้เอง

เช่น ความรู้ ขายสินค้า สรุปบทความ

ข้อมูล หรือ quote

ให้คุณ:

1. ถามฉันเฉพาะข้อมูลที่จำเป็นถ้ายังขาด

2. เขียนโครงวิดีโอให้ฉันตรวจสั้นๆ ก่อน

3. ใช้ HyperFrames skills ที่เหมาะสม

4. ใช้ catalog เฉพาะถ้าช่วยให้งานดีขึ้น

5. สร้างเสียงด้วย Gemini TTS ถ้าจำเป็น

6. เปิด HTML preview ให้ตรวจ

7. รอฉันอนุมัติก่อน final render

ฉันไม่รู้โค้ด ใช้ภาษาไทยง่ายๆ

บทที่ 10: วิธีสั่งให้ Claude แก้ปัญหาเองเมื่อพัง · 10 พรอมต์

text · prompt · แก้ error กลาง

งานนี้ยังไม่สำเร็จ ช่วยแก้ให้เองแบบ

เป็นระบบ

ให้คุณทำตามนี้:

1. อ่าน error ล่าสุดทั้งหมดก่อน

2. อธิบายสาเหตุที่น่าจะเป็นไปได้

แบบสั้นๆ ภาษาไทย

3. ตรวจไฟล์ที่เกี่ยวข้องในโปรเจกต์

4. แก้เฉพาะจุดที่จำเป็น

5. เปิดหรืออัปเดต HTML preview เพื่อ

ตรวจว่ากลับมาเล่นได้ไหม

6. ยังไม่ต้อง render MP4 จนกว่าฉันจะ

สั่ง final render

7. ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอก

ทีละขั้นแบบคนไม่รู้โค้ด

อย่าให้ฉันแก้โค้ดเองถ้าไม่จำเป็นจริงๆ

text · prompt · preview เปิดไม่ได้

ตอนนี้ HTML preview เปิดไม่ได้หรือ

เล่นไม่ได้

ช่วยแก้ตามลำดับนี้:

1. ตรวจว่า preview server ยังทำงานไหม

2. อ่าน error ที่ขึ้นทั้งหมด

3. ตรวจไฟล์ HyperFrames หลัก

เช่น index.html

4. ตรวจ path ของรูป เสียง วิดีโอ

5. แก้ให้ preview กลับมาเล่นได้ก่อน

6. ยังไม่ต้อง render MP4

text · prompt · ข้อความล้นจอ

จาก preview ล่าสุด ข้อความภาษาไทย

ล้นจอหรืออ่านยาก

ช่วยแก้:

- ตัดประโยคให้สั้นลง

- แบ่งบรรทัดให้เหมาะกับมือถือ

- เพิ่มระยะขอบซ้ายขวา

- ตรวจขนาดฟอนต์

- ตรวจทุก scene ที่มีข้อความไทย

text · prompt · effect ทำให้พัง

หลังเพิ่ม animation/transition แล้ว

preview มีปัญหา

ช่วยตรวจว่า animation หรือ component

ไหนเป็นต้นเหตุ

ให้คุณ:

1. ระบุส่วนที่น่าจะทำให้พัง

2. ลดความซับซ้อนก่อน

3. ถ้ายังพัง ให้ถอด component ออก

4. คืน preview ให้เล่นได้ก่อน

5. ยังไม่ต้อง render MP4

ความเสถียรสำคัญกว่าลูกเล่น

text · prompt · เสียงไม่ตรง

เสียงบรรยายใน preview ยังไม่ตรงกับภาพ

ช่วยแก้:

1. ตรวจความยาวไฟล์เสียง

2. ตรวจเวลาเริ่มของเสียง

3. ตรวจว่าเสียงโดนตัดท้ายไหม

4. ถ้าเสียงยาวเกิน ให้ย่อสคริปต์ก่อน

5. ถ้าเสียงสั้นไป ให้ปรับจังหวะ scene

6. อัปเดต preview ให้ตรวจใหม่

text · prompt · Gemini TTS error

Gemini TTS ยังสร้างเสียงไม่ได้

ช่วยแก้แบบปลอดภัย:

1. อ่าน error ล่าสุด

2. ตรวจ official docs ล่าสุดของ

Gemini TTS

3. ตรวจชื่อ model ที่ใช้ตรง official

docs ไหม

4. ตรวจ API key หรือ environment

variable ที่ต้องใช้

5. ห้ามแสดง API key กลับมาในคำตอบ

6. ถ้าขาด setup ให้บอกทีละขั้นสั้นๆ

7. ถ้าแก้เองได้ ให้แก้และทดสอบสร้าง

ไฟล์เสียงใหม่

text · prompt · render fail

preview เล่นได้แล้ว แต่ final render

MP4 ไม่สำเร็จ

ช่วยแก้เฉพาะปัญหาขั้น render:

1. อ่าน error ตอน render

2. ตรวจว่าปัญหาจาก asset, audio,

codec, path, หรือ dependency

3. อย่าเปลี่ยนดีไซน์วิดีโอ

ถ้าไม่จำเป็น

4. แก้ให้ render ผ่าน

5. ตรวจว่า MP4 เปิดได้

6. บอก path ไฟล์ final

text · prompt · บังคับให้สรุปสถานะ

หยุดแก้ก่อน แล้วช่วยสรุปสถานะปัจจุบัน

แบบสั้นๆ

ตอบเป็นหัวข้อ:

1. ตอนนี้อะไรทำงานแล้ว

2. อะไรยังพัง

3. error ล่าสุดคืออะไร

4. สาเหตุที่เป็นไปได้ 1-3 ข้อ

5. แผนแก้ที่สั้นที่สุดคืออะไร

6. จะเริ่มแก้จากไฟล์หรือจุดไหน

หลังสรุปแล้ว รอฉันยืนยันก่อนค่อยแก้ต่อ

text · prompt · ย้อนเวอร์ชัน

เวอร์ชันล่าสุดแย่ลง ฉันอยากย้อนกลับ

ไปเวอร์ชันก่อนที่ preview ยังดูดี

ช่วย:

1. หาไฟล์/สถานะก่อนหน้าที่น่าจะดีที่สุด

2. สรุปว่าคุณจะย้อนอะไรกลับบ้าง

3. อย่าลบไฟล์สำคัญถ้าไม่จำเป็น

4. คืน preview ให้เหมือนเวอร์ชันที่

เสถียรก่อนหน้า

text · prompt · บันทึก error

ช่วยบันทึกปัญหาที่เพิ่งแก้ลง

PROJECT_BRIEF.md

ขอแบบสั้น:

- ปัญหาที่เจอ

- สาเหตุ

- วิธีแก้

- ไฟล์ที่เกี่ยวข้อง

- ถ้าเจออีกควรใช้ prompt อะไร

- สถานะล่าสุด preview และ MP4

บทที่ 11: Workflow สั้นที่สุดตั้งแต่เริ่มจนได้วิดีโอ · 6 พรอมต์

text · prompt · ตรวจความพร้อม

ช่วยตรวจความพร้อมของโปรเจกต์นี้ก่อน

เริ่มทำวิดีโอ

ตรวจให้หน่อยว่า:

1. อยู่ในโฟลเดอร์โปรเจกต์ถูกต้องไหม

2. HyperFrames skills พร้อมใช้ไหม

3. มี PROJECT_BRIEF.md หรือ context เดิม

4. preview workflow พร้อมไหม

5. ถ้าขาดอะไร ให้แก้หรือบอกฉันสั้นที่สุด

ยังไม่ต้องสร้างวิดีโอ

text · prompt · Master

ฉันต้องการให้คุณเป็นผู้ช่วยสร้างวิดีโอ

ด้วย HyperFrames ในโปรเจกต์นี้

กติกา:

- ฉันไม่รู้โค้ดเลย

- ใช้ prompt ภาษาไทยเป็นหลัก

- ใช้ official docs/repo เป็นฐาน

- ใช้ HyperFrames skills ที่เหมาะสม

- ใช้ CLI เองเท่าที่จำเป็น

- ทำ HTML preview ก่อน

- ห้าม render MP4 จนกว่าฉันจะสั่ง

"final render"

- ถ้ามี error ให้แก้เองก่อน

งานที่ต้องทำ:

สร้างวิดีโอ [แนวตั้ง/แนวนอน] ความยาว

[จำนวน] วินาที เรื่อง "[หัวข้อ]"

รายละเอียด:

- กลุ่มคนดู: [กลุ่ม]

- โทนภาพ: [โทน]

- ประเด็นหลัก: [ประเด็น]

- call to action: "[CTA]"

เริ่มจากสร้าง HTML preview ให้ฉันกด play

ดูก่อน

text · prompt · feedback

หลังดู preview แล้ว ขอแก้จุดนี้:

1. [จุดที่ 1]

2. [จุดที่ 2]

3. [จุดที่ 3]

ให้คุณแก้ไฟล์ที่จำเป็น แล้วอัปเดต

HTML preview ให้ฉันดูใหม่

ยังไม่ต้อง render MP4

text · prompt · catalog

ช่วยใช้ official HyperFrames catalog

เพื่อปรับวิดีโอ preview ล่าสุด

ฉันต้องการ:

- [เช่น caption อ่านง่ายขึ้น]

- [เช่น transition นุ่มขึ้น]

เลือกไม่เกิน 2-3 component/block

ใช้เฉพาะ official catalog

ติดตั้งและใส่เอง

อัปเดต HTML preview ให้ดู

text · prompt · TTS

ช่วยเพิ่มเสียงบรรยายภาษาไทยให้วิดีโอ

preview ล่าสุดด้วย Gemini TTS

ให้ทำตามนี้:

1. อ่าน official Gemini TTS docs ล่าสุด

2. ตรวจ model TTS ที่ใช้ได้จริง

3. ถ้าชื่อ model ที่ฉันพูดไม่ตรง docs

ให้บอกตรงๆ และเลือก official ที่เหมาะ

4. เขียนสคริปต์เสียงไทยให้พอดี

5. สร้างไฟล์เสียงโดยเก็บ API key

อย่างปลอดภัย

6. ใส่เสียงในวิดีโอ และเปิด preview

ให้ตรวจ sync

7. ยังไม่ต้อง render จนกว่าจะสั่ง

"final render พร้อมเสียง"

ห้ามแสดง API key กลับมาในคำตอบ

text · prompt · final

ตอนนี้ฉันพอใจกับ preview ล่าสุดแล้ว

ช่วย final render เป็น MP4

ตั้งชื่อไฟล์ไม่ให้ทับของเดิม เช่น

output-final-v1.mp4

ถ้ามี error ตอน render ให้แก้เอง

ตรวจว่า MP4 เปิดได้ ถ้ามีเสียงให้ตรวจ

ว่าเสียงอยู่ในไฟล์จริง

ตอนนี้อนุญาตให้ render MP4 ได้

ภาคผนวก A: Prompt สั้นพร้อมใช้ · 10 พรอมต์

text · prompt · ตรวจความพร้อม

ช่วยตรวจความพร้อมของโปรเจกต์นี้ก่อน

เริ่มงาน

ตรวจว่าอยู่ในโฟลเดอร์ถูกต้องไหม

มี HyperFrames skills พร้อมไหม

และ preview workflow พร้อมไหม

ถ้าขาดอะไร ให้แก้หรือบอกฉันสั้นที่สุด

ยังไม่ต้องสร้างวิดีโอ

text · prompt · อ่าน repo

ก่อนทำงาน HyperFrames ให้คุณอ่าน

official repo นี้ก่อน:

https://github.com/heygen-com/hyperframes

จากนั้นสรุปเฉพาะสิ่งที่จำเป็นต่อโปรเจกต์นี้

และใช้วิธี official เท่านั้น

text · prompt · ติดตั้ง skills

ช่วยติดตั้ง HyperFrames skills ตามวิธี

จาก official HyperFrames repo

ให้คุณรันคำสั่งเองถ้าจำเป็น ใช้วิธี

official เท่านั้น

ถ้าติด error ให้แก้เองก่อน แล้วสรุปสั้นๆ

text · prompt · สร้างวิดีโอ

ใช้ /hyperframes สร้างวิดีโอ

[แนวตั้ง/แนวนอน] ความยาว [จำนวน] วินาที

เรื่อง "[หัวข้อ]"

กลุ่มคนดู: [กลุ่ม]

โทนภาพ: [โทน]

ประเด็นหลัก: [ประเด็น]

CTA: "[CTA]"

ให้สร้าง HTML preview ให้ฉันกด play

ดูก่อน ยังไม่ต้อง render MP4 จนกว่าฉัน

จะสั่ง "final render"

text · prompt · feedback

หลังดู preview แล้ว ขอแก้:

1. [จุดที่ 1]

2. [จุดที่ 2]

3. [จุดที่ 3]

แก้ไฟล์ที่จำเป็น แล้วอัปเดต HTML preview

ให้ดูใหม่ ยังไม่ต้อง render MP4

text · prompt · catalog

ช่วยเลือก block/component จาก official

HyperFrames catalog ที่เหมาะกับวิดีโอนี้

เป้าหมายคือ [caption อ่านง่ายขึ้น /

transition นุ่มขึ้น / effect เบาๆ]

เลือกไม่เกิน 3 รายการ ใส่ในโปรเจกต์

แล้วอัปเดต HTML preview

ยังไม่ต้อง render MP4

text · prompt · Gemini TTS

ช่วยเพิ่มเสียงบรรยายภาษาไทยด้วย

Gemini Flash TTS ผ่าน Google Cloud/gcloud

ก่อนทำงานให้อ่าน official docs ล่าสุดของ

Google Cloud Free Trial, gcloud CLI

และ Gemini-TTS

ให้คุณ:

1. พาฉันตั้งค่า Google Cloud

แบบมือใหม่ ถ้ายังไม่พร้อม

2. ตรวจชื่อ Flash TTS model ที่

official docs รองรับจริง

3. ใช้ gcloud/Application Default

Credentials หรือวิธี official

ที่ปลอดภัย

4. เขียนสคริปต์เสียงให้พอดีกับวิดีโอ

5. สร้างไฟล์เสียง ใส่ใน preview

และตรวจ sync

6. ยังไม่ต้อง render MP4 จนกว่าฉัน

จะสั่ง final render พร้อมเสียง

ห้ามแสดง token / credential / API key

ในคำตอบ

text · prompt · แก้ error

งานนี้ยังไม่สำเร็จ ช่วยแก้ให้เอง

แบบเป็นระบบ

อ่าน error ล่าสุด หาสาเหตุ แก้เฉพาะ

จุดที่จำเป็น แล้วทำให้ HTML preview

กลับมาเล่นได้ก่อน

ยังไม่ต้อง render MP4 จนกว่าฉันจะสั่ง

final render

ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอกทีละขั้น

แบบคนไม่รู้โค้ด

text · prompt · final

ตอนนี้ฉันพอใจกับ preview ล่าสุดแล้ว

ช่วย final render เป็น MP4

ตั้งชื่อไฟล์ไม่ให้ทับของเดิม

ถ้ามี error ตอน render ให้แก้เอง

ตรวจว่า MP4 เปิดได้

แล้วบอก path ไฟล์ final

ตอนนี้อนุญาตให้ render MP4 ได้

text · prompt · บันทึก

ช่วยอัปเดต PROJECT_BRIEF.md

บันทึก:

- หัวข้อวิดีโอ

- style ที่ใช้

- component ที่เพิ่ม

- ไฟล์เสียง

- path preview

- path MP4 final

- ปัญหาที่เจอ

- สิ่งที่ควรปรับต่อ

$ ls ~/downloads

ดาวน์โหลด

หนังสือเต็มเล่ม · PDF

97 หน้า · 16 MB

คลังพรอมต์ · Markdown

50 KB

คลังพรอมต์ · Plain text

54 KB

$ cd ~/community

มาเจอกันในคอมมูนิตี้

เข้ากลุ่ม Facebook ของเรา