# Prompt Library — สร้างวิดีโอด้วย HyperFrames + Claude Code

ไฟล์นี้รวม prompt ทั้งหมดในหนังสือ — copy ไปวางใน Claude Code ได้เลย

เปลี่ยนเฉพาะข้อความใน `[...]` ตามงานของคุณ

---

## บทที่ 1 — หนังสือเล่มนี้ทำอะไร และไม่ทำอะไร

### prompt · claude code

```text
สร้างวิดีโอแนวตั้ง 9:16 ความยาว 15 วินาที
เรื่อง "3 วิธีเริ่มใช้ AI ในงานประจำวัน"

ขอสไตล์ทันสมัย ตัวหนังสือใหญ่ อ่านง่าย
มี caption ภาษาไทย และจบด้วยคำว่า
"เริ่มวันนี้ ง่ายกว่าที่คิด"

ช่วยสร้างไฟล์ทั้งหมด เปิด HTML preview
ให้ฉันดูก่อน แก้ error และยังไม่ต้อง render
MP4 จนกว่าฉันจะสั่ง final render
```

### prompt · official-first

```text
ก่อนทำงานนี้ ให้คุณอ่าน official docs
หรือ official GitHub repo ล่าสุดก่อน
แล้วใช้วิธีที่เป็น official เท่านั้น

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


## บทที่ 2 — เตรียมเครื่องแบบไม่ต้องรู้โค้ด

### terminal

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

### powershell

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

### terminal

```bash
claude
```

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

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

ช่วยตรวจให้หน่อยว่า Claude Code
พร้อมใช้งานหรือยัง

ขอให้คุณ:
1. ตรวจว่าตอนนี้ฉันอยู่ในโฟลเดอร์ไหน
2. บอกฉันสั้นๆ ว่าพร้อมเริ่มโปรเจกต์
   วิดีโอหรือยัง
3. ถ้าขาดอะไร ให้บอกทีละขั้นแบบ
   ภาษาคนทั่วไป
4. อย่าให้ฉันทำคำสั่งเองถ้าไม่จำเป็น
```

### prompt · แก้ command not found

```text
ฉันกำลังติดตั้ง Claude Code แต่เปิด
คำสั่ง claude ไม่ได้

นี่คือ error ที่ขึ้น:
[วาง error ตรงนี้]

ฉันไม่รู้โค้ด ช่วยบอกวิธีแก้แบบทีละขั้น
สำหรับเครื่องของฉัน โดยใช้วิธี official
และไม่ให้ฉันทำอะไรเกินจำเป็น
```


## บทที่ 3 — ตั้งค่าโปรเจกต์วิดีโอแรกด้วย Prompt

### terminal

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

### powershell

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

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

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

สิ่งที่ต้องการ:
1. บอก path โฟลเดอร์ปัจจุบัน
2. ตรวจว่าโฟลเดอร์นี้เหมาะสำหรับเริ่ม
   โปรเจกต์ HyperFrames หรือไม่
3. ถ้ายังไม่เหมาะ ให้บอกวิธีแก้แบบสั้นที่สุด
4. ยังไม่ต้องติดตั้งอะไร และยังไม่ต้อง
   สร้างวิดีโอ
```

### prompt · อ่าน HyperFrames official repo

```text
ฉันต้องการสร้างโปรเจกต์วิดีโอด้วย
HyperFrames ในโฟลเดอร์นี้

ก่อนทำอะไร ให้คุณอ่าน official source
เหล่านี้ก่อน:
1. GitHub official ของ HyperFrames:
   https://github.com/heygen-com/hyperframes
2. documentation และ catalog ที่ repo
   official แนะนำ

หลังอ่านแล้ว ให้สรุปสั้นๆ ว่า
HyperFrames ใช้ทำอะไร workflow พื้นฐาน
คืออะไร และขั้นต่อไปควรทำอะไร

สำคัญ:
- ยังไม่ต้องติดตั้งอะไร
- ยังไม่ต้องสร้างไฟล์วิดีโอ
- ใช้ข้อมูลจาก official source เท่านั้น
```

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

```text
ช่วยสร้างไฟล์บันทึกเป้าหมายโปรเจกต์ชื่อ
PROJECT_BRIEF.md ในโฟลเดอร์นี้

เนื้อหาให้สั้นและชัดเจน:
- โปรเจกต์ใช้ HyperFrames + Claude Code
- ผู้ใช้ไม่รู้โค้ด ใช้ prompt ภาษาไทย
- Claude ต้องอ่าน official docs ก่อนติดตั้ง
- ใช้ HTML preview จนพอใจ แล้วค่อย render MP4
- ถ้ามี error ให้ Claude แก้เองก่อน
```


## บทที่ 4 — ให้ Claude ติดตั้ง HyperFrames Skills เอง

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

```text
จาก 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 ให้แก้เองก่อน
```

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

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

ขอให้คุณ:
1. บอกชื่อ skills ที่เกี่ยวกับ HyperFrames
   ที่พบ
2. อธิบายสั้นๆ ว่าแต่ละตัวใช้ทำอะไร
3. บอกว่าตอนนี้พร้อมเริ่มสร้างวิดีโอแรก
   หรือยัง
4. ถ้ายังไม่พร้อม ให้แก้หรือแนะนำขั้นตอน
   ถัดไปแบบสั้นที่สุด
```

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

```text
ใช้ /hyperframes สร้างวิดีโอแนะนำสินค้า
15 วินาที แนวตั้ง 9:16
```

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

```text
ช่วยใช้ HyperFrames skills ที่เหมาะสมเพื่อ
สร้างวิดีโอนี้และเปิด HTML preview ให้ฉัน
ดูก่อน ยังไม่ต้อง render MP4 จนกว่าฉันจะ
สั่ง final render
```

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

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

ช่วยทำตามนี้:
1. อ่าน error ล่าสุดทั้งหมด
2. ตรวจจาก official HyperFrames repo
   ว่าปัญหานี้เกี่ยวกับอะไร
3. ถ้าขาด dependency เช่น Node, Git,
   Git LFS หรืออย่างอื่น ให้บอกฉันสั้นๆ
4. ถ้าคุณแก้เองได้ ให้แก้เอง
5. ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอก
   ทีละขั้น และบอกเหตุผลสั้นๆ
6. หลังแก้แล้ว ให้ตรวจซ้ำว่า skills
   พร้อมใช้งานหรือยัง
```


## บทที่ 5 — สร้างวิดีโอแรกด้วย Prompt เดียว

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

```text
ใช้ /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"
```

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

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

ตอนนี้ฉันต้องการดู HTML preview ใน
browser ก่อน เพื่อแก้เร็วๆ

ช่วยทำให้ preview เล่นได้ แล้วบอกฉันว่า
ต้องเปิด URL หรือไฟล์ไหนเพื่อกด play ดู
รอ feedback จากฉันก่อน อย่า render จน
กว่าฉันจะสั่งว่า "final render"
```

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

```text
จาก preview ที่ดู ข้อความไทยบางจุด
ล้นจอหรืออ่านยาก

ช่วยแก้เฉพาะไฟล์ HTML/CSS ของ HyperFrames
ก่อน ยังไม่ต้อง render MP4

สิ่งที่ต้องแก้:
- ข้อความต้องไม่ล้นจอ
- ฟอนต์ต้องใหญ่พออ่านบนมือถือ
- ประโยคที่ยาวให้ย่อให้สั้นลง
- เปิด preview ให้ดูอีกครั้งหลังแก้
```

### prompt · final render

```text
ตอนนี้ฉันพอใจกับ 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

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

```text
จาก preview ล่าสุด ช่วยแก้วิดีโอนี้ให้
ดูดีขึ้น โดยยังคงเนื้อหาเดิม

สิ่งที่ต้องปรับ:
- ทำภาพรวมให้สะอาดขึ้น ไม่รก
- เพิ่ม contrast ให้ตัวหนังสืออ่านง่าย
- ทำตัวหนังสือใหญ่ขึ้น 15-20%
- ลด animation ที่ทำให้เสียสมาธิ
- ทำ transition ระหว่างประเด็นให้นุ่มขึ้น

ให้คุณ:
1. แก้ไฟล์ HTML/CSS/asset ที่จำเป็นเอง
2. อัปเดต preview ให้ฉันกด play ดู
3. ยังไม่ต้อง render MP4
4. รอ feedback จากฉันก่อน
```

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

```text
จาก preview ล่าสุด ช่วยปรับ mood สีให้
ดูพรีเมียมขึ้น

แนวทาง:
- ใช้สีหลักเป็นดำ ทอง ขาว
- พื้นหลังเรียบขึ้น
- ลดสีสดที่ไม่จำเป็น
- ให้ตัวหนังสือเด่นและอ่านง่าย
- transition ดูนิ่งและแพง ไม่เด้งเกินไป

แก้ใน HTML preview ก่อน ยังไม่ต้อง render
เปิด preview ให้ฉันดูอีกครั้งหลังแก้
```

### prompt · mood สดใส

```text
จาก preview ล่าสุด ช่วยปรับ mood สีให้
สดใส เหมาะกับ TikTok/Reels

แนวทาง:
- ใช้สีหลักไม่เกิน 3 สี
- พื้นหลังมี movement เบาๆ
- ตัวหนังสือสว่าง อ่านง่าย
- animation สนุก แต่ไม่รก
- จังหวะโดยรวมเร็วขึ้นเล็กน้อย
```

### prompt · final render รอบ iterate

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

ช่วย final render เป็น MP4

ให้คุณ:
1. ตรวจ preview ล่าสุดอีกครั้ง
2. render เป็น MP4 ใหม่ชื่อ
   output-final-v2.mp4
3. ถ้ามี error ตอน render ให้แก้เอง
4. ตรวจว่าไฟล์ MP4 เปิดได้
5. บอก path ของไฟล์ final

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

### prompt · บันทึก

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

ขอให้บันทึก:
- preview ล่าสุดใช้ไฟล์/URL อะไร
- MP4 final ล่าสุดอยู่ที่ไหน
- สิ่งที่ปรับจากเวอร์ชันแรก
- style ปัจจุบันของวิดีโอ
- จุดที่ยังควรปรับต่อ
```


## บทที่ 7 — ใช้ HyperFrames Catalog โดยไม่ต้องจำชื่อ Component

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

```text
ช่วยเปิด 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 พัง
ให้ถอดออกหรือเลือกตัวที่ง่ายกว่า
```

### prompt · caption

```text
ใช้ /hyperframes-registry ช่วยหา caption
style ที่เหมาะกับวิดีโอสั้นภาษาไทย

เกณฑ์เลือก:
- อ่านง่ายบนมือถือ
- movement ชัดแต่ไม่เวียนหัว
- รองรับข้อความสั้นหลาย scene
- ไม่ทำให้ layout ล้นจอ

เลือก 1 แบบ ติดตั้ง ใส่ในวิดีโอ
แล้วอัปเดต HTML preview ให้ดู
```

### prompt · transition

```text
ใช้ /hyperframes-registry หา transition
จาก catalog ที่เหมาะกับวิดีโอสั้นเพื่อ
ความรู้

ต้องการ:
- transition เรียบและนุ่ม
- ไม่ flashy เกินไป
- ไม่ทำให้อ่านข้อความยาก
- ใช้เฉพาะช่วงเปลี่ยนประเด็นหลัก

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

### prompt · effect

```text
ช่วยเลือก effect เบาๆ จาก catalog
เพื่อทำให้วิดีโอดูมี texture มากขึ้น

ต้องการ:
- grain หรือ shimmer เบาๆ ได้
- ห้ามทำให้ข้อความอ่านยาก
- ห้ามเพิ่มความรกของพื้นหลัง
- ใช้ opacity ต่ำพอประมาณ
```

### prompt · แก้ preview พัง

```text
หลังเพิ่ม component/block แล้ว preview
มีปัญหา

ช่วยทำตามนี้:
1. อ่าน error ล่าสุด
2. ระบุว่า component ไหนน่าจะเป็นต้นเหตุ
3. ถ้าแก้ให้เข้ากับโปรเจกต์ได้ ให้แก้เอง
4. ถ้าไม่คุ้ม ให้ถอดออก
5. คืน preview ให้เล่นได้ก่อน
6. ยังไม่ต้อง render MP4
```

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

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

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

ให้คุณ:
- เก็บเฉพาะ caption style ที่ช่วยให้อ่านง่าย
- ลดหรือถอด effect ที่ไม่จำเป็น
- ใช้ transition ให้น้อยลง
- ทำภาพรวมให้สะอาดขึ้น
```


## บทที่ 8 — ใส่เสียงบรรยายด้วย Gemini TTS

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

```text
ฉันต้องการใช้ 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
```

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

```text
ช่วยเขียนสคริปต์เสียงบรรยายภาษาไทย
สำหรับวิดีโอนี้

เงื่อนไข:
- ความยาววิดีโอ 12 วินาที
- เสียงต้องพูดจบภายใน 10-11 วินาที
- น้ำเสียงสดใส เข้าใจง่าย
- ภาษาคนทั่วไป ไม่เป็นทางการเกินไป

ขอ 3 เวอร์ชัน:
1. เวอร์ชันกระชับ
2. เวอร์ชันสนุก
3. เวอร์ชันพรีเมียม

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

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

```text
ใช้สคริปต์ที่เลือกไว้ สร้างไฟล์เสียงด้วย
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
  ในคำตอบ
```

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

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

ให้คุณ:
1. ใช้ไฟล์เสียง narration ล่าสุด
2. วางเสียงให้เริ่มพร้อมจังหวะเปิดวิดีโอ
   หรือหลังเปิดไม่เกิน 0.3 วินาที
3. ปรับความยาวภาพหรือ timing ถ้าจำเป็น
   เพื่อให้เสียงไม่โดนตัด
4. ถ้ามีเพลง ให้ลด volume ไม่ให้ชน
   เสียงพูด
5. preview เพื่อตรวจ timing
6. เปิด HTML preview ให้ฉันกด play ตรวจ
7. ยังไม่ต้อง render จนกว่าฉันจะสั่ง
   "final render พร้อมเสียง"
```

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

```text
ตอนนี้ฉันพอใจกับ 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 แบบที่ใช้จริง

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

```text
ใช้ /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
```

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

```text
ใช้ /hyperframes สร้างวิดีโอขายสินค้า
แนวตั้ง 9:16 ความยาว 15 วินาที

สินค้า/บริการ: "[ชื่อสินค้า]"
ขายให้ใคร: [กลุ่ม]
ปัญหาลูกค้า: [ปัญหา]
จุดเด่น: [จุดเด่น 1-3 ข้อ]
call to action: "[ทักแชท / สั่งวันนี้ / ทดลองฟรี]"

โครง:
1. เปิดด้วยปัญหาที่ลูกค้าเจอ
2. แนะนำสินค้าเป็นทางออก
3. โชว์จุดเด่น 2-3 ข้อแบบสั้น
4. ปิดด้วย CTA ชัดเจน

สไตล์:
- [พรีเมียม/สดใส/มินิมอล/สนุก]
- ตัวหนังสือไทยใหญ่ อ่านง่าย
- ภาพไม่รก เน้นขายชัด

เสียงบรรยายสั้นด้วย Gemini TTS
เปิด preview ก่อน · ไม่ render MP4
จนกว่าฉันจะสั่ง final
```

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

```text
ใช้ /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]"

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

### prompt · วิดีโอ data

```text
ใช้ /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%]"
```

### prompt · วิดีโอ quote

```text
ใช้ /hyperframes สร้างวิดีโอ quote
แนวตั้ง 9:16 ความยาว 8-12 วินาที

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

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

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

สไตล์:
- ตัวหนังสือเป็นพระเอกของวิดีโอ
- animation น้อยแต่ดูดี
- พื้นหลังไม่แย่งความสนใจ
- เสียงเป็นแบบสั้นมากหรือเสียงอ่าน
  quote แบบนุ่ม

สร้าง HTML preview · ตรวจข้อความไทย
ไม่ล้นจอ · ไม่ render MP4 จนกว่าจะ
สั่ง final
```

### prompt · กลาง

```text
ฉันต้องการสร้างวิดีโอด้วย HyperFrames
จากไอเดียนี้:
[วางไอเดียของคุณ]

ช่วยเลือก format ที่เหมาะที่สุดให้เอง
เช่น ความรู้ ขายสินค้า สรุปบทความ
ข้อมูล หรือ quote

ให้คุณ:
1. ถามฉันเฉพาะข้อมูลที่จำเป็นถ้ายังขาด
2. เขียนโครงวิดีโอให้ฉันตรวจสั้นๆ ก่อน
3. ใช้ HyperFrames skills ที่เหมาะสม
4. ใช้ catalog เฉพาะถ้าช่วยให้งานดีขึ้น
5. สร้างเสียงด้วย Gemini TTS ถ้าจำเป็น
6. เปิด HTML preview ให้ตรวจ
7. รอฉันอนุมัติก่อน final render

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


## บทที่ 10 — วิธีสั่งให้ Claude แก้ปัญหาเองเมื่อพัง

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

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

ให้คุณทำตามนี้:
1. อ่าน error ล่าสุดทั้งหมดก่อน
2. อธิบายสาเหตุที่น่าจะเป็นไปได้
   แบบสั้นๆ ภาษาไทย
3. ตรวจไฟล์ที่เกี่ยวข้องในโปรเจกต์
4. แก้เฉพาะจุดที่จำเป็น
5. เปิดหรืออัปเดต HTML preview เพื่อ
   ตรวจว่ากลับมาเล่นได้ไหม
6. ยังไม่ต้อง render MP4 จนกว่าฉันจะ
   สั่ง final render
7. ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอก
   ทีละขั้นแบบคนไม่รู้โค้ด

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

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

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

ช่วยแก้ตามลำดับนี้:
1. ตรวจว่า preview server ยังทำงานไหม
2. อ่าน error ที่ขึ้นทั้งหมด
3. ตรวจไฟล์ HyperFrames หลัก
   เช่น index.html
4. ตรวจ path ของรูป เสียง วิดีโอ
5. แก้ให้ preview กลับมาเล่นได้ก่อน
6. ยังไม่ต้อง render MP4
```

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

```text
จาก preview ล่าสุด ข้อความภาษาไทย
ล้นจอหรืออ่านยาก

ช่วยแก้:
- ตัดประโยคให้สั้นลง
- แบ่งบรรทัดให้เหมาะกับมือถือ
- เพิ่มระยะขอบซ้ายขวา
- ตรวจขนาดฟอนต์
- ตรวจทุก scene ที่มีข้อความไทย
```

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

```text
หลังเพิ่ม animation/transition แล้ว
preview มีปัญหา

ช่วยตรวจว่า animation หรือ component
ไหนเป็นต้นเหตุ

ให้คุณ:
1. ระบุส่วนที่น่าจะทำให้พัง
2. ลดความซับซ้อนก่อน
3. ถ้ายังพัง ให้ถอด component ออก
4. คืน preview ให้เล่นได้ก่อน
5. ยังไม่ต้อง render MP4

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

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

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

ช่วยแก้:
1. ตรวจความยาวไฟล์เสียง
2. ตรวจเวลาเริ่มของเสียง
3. ตรวจว่าเสียงโดนตัดท้ายไหม
4. ถ้าเสียงยาวเกิน ให้ย่อสคริปต์ก่อน
5. ถ้าเสียงสั้นไป ให้ปรับจังหวะ scene
6. อัปเดต preview ให้ตรวจใหม่
```

### prompt · Gemini TTS error

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

ช่วยแก้แบบปลอดภัย:
1. อ่าน error ล่าสุด
2. ตรวจ official docs ล่าสุดของ
   Gemini TTS
3. ตรวจชื่อ model ที่ใช้ตรง official
   docs ไหม
4. ตรวจ API key หรือ environment
   variable ที่ต้องใช้
5. ห้ามแสดง API key กลับมาในคำตอบ
6. ถ้าขาด setup ให้บอกทีละขั้นสั้นๆ
7. ถ้าแก้เองได้ ให้แก้และทดสอบสร้าง
   ไฟล์เสียงใหม่
```

### prompt · render fail

```text
preview เล่นได้แล้ว แต่ final render
MP4 ไม่สำเร็จ

ช่วยแก้เฉพาะปัญหาขั้น render:
1. อ่าน error ตอน render
2. ตรวจว่าปัญหาจาก asset, audio,
   codec, path, หรือ dependency
3. อย่าเปลี่ยนดีไซน์วิดีโอ
   ถ้าไม่จำเป็น
4. แก้ให้ render ผ่าน
5. ตรวจว่า MP4 เปิดได้
6. บอก path ไฟล์ final
```

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

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

ตอบเป็นหัวข้อ:
1. ตอนนี้อะไรทำงานแล้ว
2. อะไรยังพัง
3. error ล่าสุดคืออะไร
4. สาเหตุที่เป็นไปได้ 1-3 ข้อ
5. แผนแก้ที่สั้นที่สุดคืออะไร
6. จะเริ่มแก้จากไฟล์หรือจุดไหน

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

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

```text
เวอร์ชันล่าสุดแย่ลง ฉันอยากย้อนกลับ
ไปเวอร์ชันก่อนที่ preview ยังดูดี

ช่วย:
1. หาไฟล์/สถานะก่อนหน้าที่น่าจะดีที่สุด
2. สรุปว่าคุณจะย้อนอะไรกลับบ้าง
3. อย่าลบไฟล์สำคัญถ้าไม่จำเป็น
4. คืน preview ให้เหมือนเวอร์ชันที่
   เสถียรก่อนหน้า
```

### prompt · บันทึก error

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

ขอแบบสั้น:
- ปัญหาที่เจอ
- สาเหตุ
- วิธีแก้
- ไฟล์ที่เกี่ยวข้อง
- ถ้าเจออีกควรใช้ prompt อะไร
- สถานะล่าสุด preview และ MP4
```


## บทที่ 11 — Workflow สั้นที่สุดตั้งแต่เริ่มจนได้วิดีโอ

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

```text
ช่วยตรวจความพร้อมของโปรเจกต์นี้ก่อน
เริ่มทำวิดีโอ

ตรวจให้หน่อยว่า:
1. อยู่ในโฟลเดอร์โปรเจกต์ถูกต้องไหม
2. HyperFrames skills พร้อมใช้ไหม
3. มี PROJECT_BRIEF.md หรือ context เดิม
4. preview workflow พร้อมไหม
5. ถ้าขาดอะไร ให้แก้หรือบอกฉันสั้นที่สุด

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

### prompt · Master

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

กติกา:
- ฉันไม่รู้โค้ดเลย
- ใช้ prompt ภาษาไทยเป็นหลัก
- ใช้ official docs/repo เป็นฐาน
- ใช้ HyperFrames skills ที่เหมาะสม
- ใช้ CLI เองเท่าที่จำเป็น
- ทำ HTML preview ก่อน
- ห้าม render MP4 จนกว่าฉันจะสั่ง
  "final render"
- ถ้ามี error ให้แก้เองก่อน

งานที่ต้องทำ:
สร้างวิดีโอ [แนวตั้ง/แนวนอน] ความยาว
[จำนวน] วินาที เรื่อง "[หัวข้อ]"

รายละเอียด:
- กลุ่มคนดู: [กลุ่ม]
- โทนภาพ: [โทน]
- ประเด็นหลัก: [ประเด็น]
- call to action: "[CTA]"

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

### prompt · feedback

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

1. [จุดที่ 1]
2. [จุดที่ 2]
3. [จุดที่ 3]

ให้คุณแก้ไฟล์ที่จำเป็น แล้วอัปเดต
HTML preview ให้ฉันดูใหม่
ยังไม่ต้อง render MP4
```

### prompt · catalog

```text
ช่วยใช้ official HyperFrames catalog
เพื่อปรับวิดีโอ preview ล่าสุด

ฉันต้องการ:
- [เช่น caption อ่านง่ายขึ้น]
- [เช่น transition นุ่มขึ้น]

เลือกไม่เกิน 2-3 component/block
ใช้เฉพาะ official catalog
ติดตั้งและใส่เอง
อัปเดต HTML preview ให้ดู
```

### prompt · TTS

```text
ช่วยเพิ่มเสียงบรรยายภาษาไทยให้วิดีโอ
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 กลับมาในคำตอบ
```

### prompt · final

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

ช่วย final render เป็น MP4
ตั้งชื่อไฟล์ไม่ให้ทับของเดิม เช่น
output-final-v1.mp4
ถ้ามี error ตอน render ให้แก้เอง
ตรวจว่า MP4 เปิดได้ ถ้ามีเสียงให้ตรวจ
ว่าเสียงอยู่ในไฟล์จริง

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


## ภาคผนวก A — Prompt สั้นพร้อมใช้

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

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

ตรวจว่าอยู่ในโฟลเดอร์ถูกต้องไหม
มี HyperFrames skills พร้อมไหม
และ preview workflow พร้อมไหม
ถ้าขาดอะไร ให้แก้หรือบอกฉันสั้นที่สุด
ยังไม่ต้องสร้างวิดีโอ
```

### prompt · อ่าน repo

```text
ก่อนทำงาน HyperFrames ให้คุณอ่าน
official repo นี้ก่อน:
https://github.com/heygen-com/hyperframes

จากนั้นสรุปเฉพาะสิ่งที่จำเป็นต่อโปรเจกต์นี้
และใช้วิธี official เท่านั้น
```

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

```text
ช่วยติดตั้ง HyperFrames skills ตามวิธี
จาก official HyperFrames repo

ให้คุณรันคำสั่งเองถ้าจำเป็น ใช้วิธี
official เท่านั้น
ถ้าติด error ให้แก้เองก่อน แล้วสรุปสั้นๆ
```

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

```text
ใช้ /hyperframes สร้างวิดีโอ
[แนวตั้ง/แนวนอน] ความยาว [จำนวน] วินาที
เรื่อง "[หัวข้อ]"

กลุ่มคนดู: [กลุ่ม]
โทนภาพ: [โทน]
ประเด็นหลัก: [ประเด็น]
CTA: "[CTA]"

ให้สร้าง HTML preview ให้ฉันกด play
ดูก่อน ยังไม่ต้อง render MP4 จนกว่าฉัน
จะสั่ง "final render"
```

### prompt · feedback

```text
หลังดู preview แล้ว ขอแก้:
1. [จุดที่ 1]
2. [จุดที่ 2]
3. [จุดที่ 3]

แก้ไฟล์ที่จำเป็น แล้วอัปเดต HTML preview
ให้ดูใหม่ ยังไม่ต้อง render MP4
```

### prompt · catalog

```text
ช่วยเลือก block/component จาก official
HyperFrames catalog ที่เหมาะกับวิดีโอนี้

เป้าหมายคือ [caption อ่านง่ายขึ้น /
transition นุ่มขึ้น / effect เบาๆ]
เลือกไม่เกิน 3 รายการ ใส่ในโปรเจกต์
แล้วอัปเดต HTML preview
ยังไม่ต้อง render MP4
```

### prompt · Gemini TTS

```text
ช่วยเพิ่มเสียงบรรยายภาษาไทยด้วย
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
ในคำตอบ
```

### prompt · แก้ error

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

อ่าน error ล่าสุด หาสาเหตุ แก้เฉพาะ
จุดที่จำเป็น แล้วทำให้ HTML preview
กลับมาเล่นได้ก่อน
ยังไม่ต้อง render MP4 จนกว่าฉันจะสั่ง
final render
ถ้าจำเป็นต้องให้ฉันทำอะไร ให้บอกทีละขั้น
แบบคนไม่รู้โค้ด
```

### prompt · final

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

ช่วย final render เป็น MP4
ตั้งชื่อไฟล์ไม่ให้ทับของเดิม
ถ้ามี error ตอน render ให้แก้เอง
ตรวจว่า MP4 เปิดได้
แล้วบอก path ไฟล์ final

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

### prompt · บันทึก

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

บันทึก:
- หัวข้อวิดีโอ
- style ที่ใช้
- component ที่เพิ่ม
- ไฟล์เสียง
- path preview
- path MP4 final
- ปัญหาที่เจอ
- สิ่งที่ควรปรับต่อ
```