หน้านี้อ่านจาก repo Vincentwei1021/video-shotcraft (อ่านเมื่อ 2026-10-13) และใช้ภาพที่ได้รับเป็นโครงเรื่อง ป้ายกำกับในตารางมีสามแบบ: อ่านจาก repo, จากภาพ และ ตีความ
🎯 แก่นของเรื่อง
แนวคิดหลัก: ไม่ได้ใช้ AI สร้างภาพวิดีโอ แต่ให้ agent เขียนโค้ดวาดทุกเฟรมจากภาพหน้าจอและข้อความจริงของสินค้า โดยเลือกท่าเคลื่อนไหวสำเร็จรูปจากคลัง แล้วเรนเดอร์ด้วย Remotion อ่านจาก repo (2026-10-13)
ทำไมจึงได้ผล (กลไก):
- ทุกเฟรมมาจากโค้ดและภาพจริง ตัวหนังสือและโลโก้จึงคมและไม่เพี้ยนแบบวิดีโอที่ AI สร้างขึ้นเอง
ตีความ - ท่าเคลื่อนไหวเป็นสูตรสำเร็จที่ตรวจสอบมาแล้ว agent จึงเลือกและประกอบได้ แทนที่จะคิดการเคลื่อนไหวใหม่ทุกครั้ง
ตีความ - ผลลัพธ์เป็นโปรเจกต์ Remotion ที่แก้ได้ การแก้ครั้งถัดไปจึงไม่ต้องสั่ง agent ใหม่ทั้งหมด
อ่านจาก repo
20% ที่สำคัญที่สุดในทางปฏิบัติ:
| ต้องเข้าใจก่อน | รอได้ |
|---|---|
| คลิปมาจากภาพหน้าจอและข้อความของเราเอง คุณภาพข้อมูลนำเข้าจึงตัดสินคุณภาพคลิป | ทำความเข้าใจคลังท่าทั้งหมด |
หลังส่งมอบ ให้แก้ต่อใน Workbench ด้วยคำสั่ง node workbench/scripts/open.mjs <project> |
การส่งออกเป็นร่าง JianYing |
| Preview กับ render ตรงกันทุกเฟรม ดูในเบราว์เซอร์แล้วเชื่อผลได้ | การเลือกเพลง BGM และการวิเคราะห์จังหวะ |
📈 ช่วยให้ดีขึ้นอย่างไร
| สถานการณ์ | ถ้าไม่มีเครื่องมือนี้ | เมื่อใช้ | วัดอย่างไร | หลักฐาน |
|---|---|---|---|---|
| ตัดต่อโปรโมตสินค้า | ตัดมือในโปรแกรมตัดต่อ เลือกท่าและเอฟเฟกต์เอง | agent เลือกท่าจากคลังและประกอบให้ | นับเวลาตั้งแต่เริ่มสั่งจนได้ไฟล์ MP4 แรก เทียบกับวิธีเดิม | ยังไม่ทดสอบ |
| แก้ข้อความหรือสีหลังส่งมอบ | สั่ง agent ทำใหม่หรือเปิดโปรเจกต์โค้ดเอง | แก้ผ่าน inspector ใน Workbench | จำนวนครั้งที่ต้องสั่ง agent ซ้ำเพื่อแก้จุดเล็ก ๆ | ตีความ |
| ความตรงกันของภาพตัวอย่างกับไฟล์จริง | ภาพตัวอย่างอาจต่างจากไฟล์ที่เรนเดอร์ | Preview และ render ตรงกันทุกเฟรม | เทียบเฟรมเดียวกันจากสองทางด้วยตา หรือดึงเฟรมด้วย ffmpeg | จากภาพ และอ่านจาก repo ตรงกัน ยังไม่ได้ทดสอบเอง |
| ความสม่ำเสมอของภาพ | AI วิดีโอทั่วไปอาจทำตัวหนังสือเพี้ยน | วาดจากข้อความและภาพจริงของเรา | ตรวจตัวหนังสือในทุกเฟรมว่าตรงกับข้อความต้นทาง | ตีความ |
ยังไม่มีตัวเลขเวลาที่ประหยัดได้จากหลักฐานที่อ่าน จึงไม่ควรอ้างว่าเร็วขึ้นกี่เท่า
🛠️ ภาพรวมการทำงาน
ขั้นตอนต่อไปนี้อ่านจาก repo (2026-10-13)
flowchart LR A[อธิบายคลิปให้ agent] --> B[จับภาพหน้าเว็บจริง] B --> C[เลือกท่าจากคลัง + storyboard] C --> D[ทำแอนิเมชันด้วย Remotion] D --> E[ตัดตามจังหวะเพลง + ใส่เสียง] E --> F[ตรวจทุกเฟรม] F --> G[ส่งมอบ MP4 + Workbench] G --> H[แก้ต่อในเบราว์เซอร์แล้วส่งออก]
| ขั้น | สิ่งที่เกิดขึ้น | เครื่องมือที่ต้องมี |
|---|---|---|
| 1. สั่งงาน | บอก agent ว่าอยากได้คลิปแบบไหน | Claude Code หรือ Codex |
| 2. จับภาพ | เก็บภาพหน้าจริงของสินค้า | puppeteer (ติดตั้งเมื่อจำเป็น) |
| 3. เลือกท่าและวาง storyboard | เลือกจากคลังท่าเคลื่อนไหว | ในตัว skill |
| 4. ทำแอนิเมชัน | วาดทุกเฟรมด้วยโค้ด | Node.js, npm, Remotion |
| 5. ตัดตามจังหวะและใส่เสียง | วิเคราะห์จังหวะเพลง ใส่ SFX | uv (เฉพาะวิเคราะห์ BGM) |
| 6. ตรวจคุณภาพ | ตรวจทุกเฟรม | ffmpeg, ffprobe |
| 7. ส่งมอบ | ได้ MP4, Motion Workbench และร่าง JianYing (ถ้าเลือก) |
ผลลัพธ์เป็นไฟล์ 1920×1080 ที่ 30 fps รหัส h264 พร้อมโปรเจกต์ Remotion ที่แก้ต่อได้ อ่านจาก repo
🎬 Motion Workbench
เป็นตัวแก้ไขแบบ CapCut ในเบราว์เซอร์ที่เปิดหลังส่งมอบ จากภาพ และ อ่านจาก repo
node workbench/scripts/open.mjs <project>
ส่วนประกอบของหน้าจอ
| ส่วน | ตำแหน่ง | หน้าที่ |
|---|---|---|
| คลังคลิปและสื่อ | ซ้าย | นำคลิปเข้าและเลือกชิ้นส่วนมาใช้ จากภาพ |
| พรีวิว | กลาง | เล่นภาพ แสดงเวลา 00:04.00 / 00:37.05 ปุ่มวน ขนาด 1920×1080 ที่ 30 fps จากภาพ |
| Inspector | ขวา | แก้ข้อความ ขนาดตัวอักษร สี ตามสคีมา จากภาพ |
| ไทม์ไลน์ | ล่าง | แยกแทร็กเป็น shot, transition, caption และ SFX จากภาพ |
| ปุ่มส่งออก | บนขวา | ส่งออกผ่าน Remotion และมีปุ่มส่งออก JSON (ข้อความบนปุ่มเป็นภาษาจีน อ่านไม่ชัด) |
สิ่งที่แก้ได้
- แก้ข้อความ ขนาดตัวอักษร และสีของแต่ละช็อต
- ย้าย ตัด หรือเร่ง/หน่วงความเร็วคลิป (speed-ramp)
- ลากท่าเคลื่อนไหวจากคลังมาใส่
- ส่งออกด้วย Remotion
อ่านจาก repo
ความต่างระหว่างภาพกับ repo
| หัวข้อ | ภาพแสดง | repo (2026-10-13) | ข้อสรุป |
|---|---|---|---|
| จำนวนท่า | 157 แบบ (ท่ากล้องสำเร็จรูป) และ 216 demo motions | 150 shots, 124 recipe cards, 149 SFX, 5 BGM (216 คือจำนวน demo ใน What's new) | ใช้ตัวเลขของ repo ภาพอาจเป็นเวอร์ชันเก่า ไม่ยืนยันว่า 216 ผูกกับ Workbench |
| การรับประกันภาพตรงกัน | pixel-parity verified | frame-identical | ความหมายใกล้กัน แต่คำที่ใช้ต่างกัน |
| ดาว | 11k stars | ไม่ได้ตรวจ | ใช้เป็นตัวเลขจากภาพเท่านั้น |
🚀 ลองใช้
ติดตั้ง อ่านจาก repo
npx skills add Vincentwei1021/video-shotcraft
หรือ clone แล้วทำ symlink ไปที่ ~/.claude/skills/video-shotcraft สำหรับ Claude Code
ตัวอย่างประกอบ (ตัวเลขเป็นของเราเอง)
สมมติต้องการคลิปโปรโมต 30 วินาที จัดช็อตละ 3 วินาที
| รายการ | ค่า | วิธีคำนวณ |
|---|---|---|
| จำนวนช็อต | 10 | 30 ÷ 3 |
| เฟรมต่อช็อต | 90 | 3 × 30 fps |
| เฟรมทั้งคลิป | 900 | 30 × 30 fps |
| ถ้าเปลี่ยนความยาวช็อตเป็น 4 วินาที | 7.5 ช็อต ต้องปรับเป็น 8 ช็อตหรือให้ช็อตสุดท้ายสั้นลง | 30 ÷ 4 |
เมื่อเทียบกับตัวเลขในภาพ ไทม์ไลน์ตัวอย่างยาว 00:37.05 ที่ 30 fps ได้ประมาณ 1,111 เฟรม (37.05 × 30 = 1,111.5 จึงปัดลง/ขึ้นตามตัวเรนเดอร์ ตีความ)
ควรใช้เมื่อไร
| ใช้ | ไม่ควรใช้ | ต้องมีก่อน |
|---|---|---|
| โปรโมตเว็บ แอป หรือ SaaS ที่มีหน้าจอจริงให้จับภาพ | ต้องการภาพถ่ายคนหรือฉากสมจริงที่ไม่มีอยู่จริง | Node.js, npm, ffmpeg/ffprobe |
| ต้องการแก้ข้อความหรือสีซ้ำหลายรอบ | ต้องการคลิปจากข้อความเพียงอย่างเดียวโดยไม่มีภาพสินค้า | ข้อความโฆษณาและภาพหน้าจอที่พร้อม |
| ต้องการภาพตัวหนังสือคมและควบคุมได้ | บริษัทที่ยังไม่ได้ตรวจเงื่อนไขสิทธิ์ใช้ Remotion | ตรวจสิทธิ์ Remotion สำหรับองค์กร |
ก้าวแรกที่เล็กที่สุด
- ติดตั้ง skill ตามคำสั่งด้านบน
- สั่ง agent ให้ทำคลิปสั้น 10 วินาทีจากหน้าเดียวของสินค้า
- เปิด Workbench ด้วย
node workbench/scripts/open.mjs <project>แล้วลองแก้ข้อความหนึ่งช็อต
วิธีตรวจว่าช่วยได้จริง
| ตัวชี้วัด | ฐานเปรียบเทียบ | เงื่อนไขผ่าน (กำหนดก่อนทดลอง) |
|---|---|---|
| เวลาตั้งแต่สั่งจนได้ MP4 แรก | เวลาที่ใช้ตัดมือแบบเดิมกับคลิปเนื้อหาเดียวกัน | น้อยกว่าฐานเดิม |
| จำนวนรอบที่ต้องสั่ง agent ใหม่เพื่อแก้ข้อความ | ทดลองแก้ข้อความ 3 จุด | แก้ใน Workbench ได้ทั้งหมดโดยไม่ต้องสั่งใหม่ |
| ความตรงกันของ preview กับไฟล์จริง | เฟรมที่ 0, กลาง และสุดท้าย | ภาพตรงกันเมื่อเทียบด้วยตา |
✅ แนวปฏิบัติที่ดี
- เตรียมภาพหน้าจอที่สะอาดและข้อความโฆษณาสั้นก่อนสั่ง เพราะคลิปสร้างจากสิ่งเหล่านี้โดยตรง
ตีความ - แก้ในสคีมาของ Inspector แทนการแก้โค้ดเมื่อเป็นเรื่องข้อความ สี หรือขนาด
ตีความ - ตรวจไฟล์ส่งออกในสภาพแวดล้อมที่จะใช้เผยแพร่จริง ไม่ใช่แค่ดู preview
ตีความ
⚠️ Risks
Warning — สิทธิ์ใช้งานและสภาพแวดล้อมมีเงื่อนไข: โค้ดและเอกสารใช้สัญญา Apache-2.0 แต่เสียงใน
assets/audio/มีสัญญาแยกตามไฟล์ และ Remotion มีสัญญาของตัวเอง ซึ่งฟรีสำหรับบุคคลและทีมเล็ก ส่วนบริษัทอาจต้องซื้อสิทธิ์อ่านจาก repo
| ความเสี่ยงหรือข้อจำกัด | รายละเอียด | หลักฐาน |
|---|---|---|
| ตัวเลขในภาพไม่ตรงกับ repo | จำนวนท่าและ demo ต่างกัน อย่าอ้างตัวเลขจากภาพ | อ่านจาก repo |
| Linux แบบไม่มีหน้าจอหรือ CI | อาจต้องใช้ --concurrency=1 และ --browser-executable=<path> |
อ่านจาก repo |
| Remotion ดาวน์โหลด Chrome ของตัวเองเมื่อเรนเดอร์ครั้งแรก | ต้องใช้อินเทอร์เน็ตและพื้นที่ดิสก์ | อ่านจาก repo |
| ข้อความภาษาจีนบน UI และคำอธิบาย Workbench | คู่มือหลักเป็นภาษาจีน ผู้ใช้ภาษาไทยอาจต้องแปล | จากภาพ |
| ความเร็วและคุณภาพที่แท้จริง | ยังไม่ได้รันและวัดเอง | ยังไม่ทดสอบ |
| เนื้อหาใน repo | อ่านผ่านการดึงเว็บและสรุป ไม่ได้ clone หรือรันโค้ด จึงไม่ได้ตรวจไฟล์รายตัว | ข้อจำกัดของการอ่านครั้งนี้ |
❌ ข้อผิดพลาดที่พบบ่อย
| ข้อผิดพลาด | ผลที่ตามมา | วิธีเลี่ยง |
|---|---|---|
| เข้าใจว่าเป็นเครื่องมือ AI สร้างวิดีโอ | คาดหวังฉากที่ไม่มีในภาพต้นทางไม่ได้ | จำไว้ว่าทุกเฟรมวาดจากภาพและข้อความของเรา |
| ติดตั้ง ffmpeg ไม่ครบ | ขั้นตรวจเฟรมล้มเหลว | ตรวจ prerequisites ก่อนเริ่ม |
| ใช้เพลงหรือเสียงโดยไม่ดูสัญญาของไฟล์ | ปัญหาลิขสิทธิ์ | อ่าน ATTRIBUTION.md ก่อนเผยแพร่ |
| ใช้เชิงพาณิชย์ในบริษัทโดยไม่ตรวจสิทธิ์ Remotion | ผิดเงื่อนไขสัญญา | ตรวจเงื่อนไข Remotion ก่อน |
✔️ Checklist ก่อนส่งงาน
| รายการ | สถานะ |
|---|---|
| ติดตั้ง skill และ prerequisites แล้ว | ⚪ |
| เตรียมภาพหน้าจอและข้อความแล้ว | ⚪ |
| เปิด Workbench แล้วแก้ข้อความทดสอบได้ | ⚪ |
| ตรวจเฟรมต้น กลาง ท้ายของ MP4 | ⚪ |
| ตรวจสัญญาเสียงและ Remotion | ⚪ |
🧠 ทดสอบความเข้าใจ
| คำถาม | คำตอบ | คำตอบที่ผิดบ่อย |
|---|---|---|
| ทำไมตัวหนังสือในคลิปจึงคมกว่าวิดีโอที่ AI สร้างทั้งภาพ | เพราะทุกเฟรมวาดด้วยโค้ดจากข้อความและภาพจริง ไม่ได้ให้โมเดลสร้างพิกเซลเอง | "เพราะใช้โมเดลที่ดีกว่า" |
| ถ้าต้องการเปลี่ยนสีหัวข้อช็อตหนึ่งหลังส่งมอบ ควรทำอย่างไร | เปิด Workbench แล้วแก้ใน Inspector แล้วส่งออกใหม่ ไม่ต้องสั่ง agent ทำใหม่ | "สั่ง agent ให้สร้างคลิปทั้งหมดใหม่" |
| คลิปยาว 20 วินาทีที่ 30 fps มีกี่เฟรม และถ้าลดเหลือ 24 fps จะเหลือกี่เฟรม | 600 เฟรม และ 480 เฟรม (20 × fps) | "ความยาวเท่าเดิม เฟรมจึงเท่าเดิม" |
| ภาพบอกว่ามี 157 แบบ แต่ repo บอก 150 shots เราควรเชื่ออะไรและทำอย่างไร | เชื่อ repo ณ วันที่อ่าน และระบุว่าตัวเลขต่างกัน (ภาพอาจเป็นเวอร์ชันอื่น) | "เชื่อตัวเลขในภาพเพราะเห็นชัดกว่า" |
| (กับดัก) Preview ตรงกับ render ทุกเฟรม แปลว่าเผยแพร่ได้ทุกข้อกำหนดใช่หรือไม่ | ไม่ใช่ ความตรงกันเป็นเรื่องภาพ ส่วนสิทธิ์เสียงและ Remotion ต้องตรวจแยก | "ตรงกันแล้วเผยแพร่ได้เลย" |
🗂️ โครงสร้าง repo
โฟลเดอร์ระดับบนสุด อ่านจาก repo ได้แก่ SKILL.md, references/, demos/, gallery/, template/, jianying-export/, publish/, workbench/ และ assets/
| ส่วน | บทบาท (ตีความจากชื่อ ยังไม่ได้เปิดอ่านไฟล์ข้างใน) |
|---|---|
SKILL.md |
คำสั่งให้ agent ทำงานตาม skill |
workbench/ |
โค้ดของตัวแก้ไขในเบราว์เซอร์ (มี scripts/open.mjs ตามคำสั่งในภาพ) |
template/ |
โปรเจกต์ Remotion ต้นแบบ |
jianying-export/ |
ส่งออกร่างสำหรับ JianYing |
assets/ |
เสียงและวัสดุอื่น ๆ |
Sources
| แหล่ง | รายละเอียด |
|---|---|
| Vincentwei1021/video-shotcraft | อ่าน README ผ่านเว็บ (ไม่ใช้ gh) commit 13c74a7 เมื่อ 2026-10-13 Apache-2.0 |
| Remotion | เงื่อนไขสัญญาตามที่ README ระบุ ไม่ได้อ่านสัญญาฉบับเต็ม |
ผลการอ่านจำกัดอยู่ที่ README และรายการโครงสร้างระดับบนสุด ไม่ได้เปิดไฟล์ในโฟลเดอร์ย่อยทีละไฟล์ ภาพต้นฉบับคือ input.jpg ในโฟลเดอร์เดียวกับต้นทางของหน้านี้
ตัวย่อที่ใช้ในหน้านี้
| ตัวย่อ | ชื่อเต็ม | คืออะไร | อ่านค่าอย่างไร |
|---|---|---|---|
| AI | Artificial Intelligence | ปัญญาประดิษฐ์ | "AI Video" = วิดีโอที่ทำด้วย AI |
| MP4 | MPEG-4 Part 14 | ไฟล์วิดีโอที่เปิดได้ทั่วไป | ผลลัพธ์ที่ได้คือไฟล์ .mp4 |
| SFX | Sound Effects | เสียงประกอบ | 149 SFX = 149 เสียง (ตาม repo) |
| BGM | Background Music | เพลงพื้นหลัง | 5 BGM = 5 เพลง |
| fps | frames per second | จำนวนเฟรมต่อวินาที | 30 fps = 30 ภาพต่อ 1 วินาที |
| UI | User Interface | หน้าจอที่ผู้ใช้โต้ตอบ | Inspector และ Timeline เป็นส่วนของ UI |
| CI | Continuous Integration | ระบบรันงานอัตโนมัติ | อาจต้องตั้งค่าเรนเดอร์พิเศษ |
| JSON | JavaScript Object Notation | รูปแบบไฟล์ข้อมูลข้อความ | ปุ่ม "export JSON" ส่งออกข้อมูลโปรเจกต์ |
| npm / npx | Node Package Manager / package runner | ตัวติดตั้งและรันแพ็กเกจของ Node.js | npx skills add ... ติดตั้ง skill |
| h264 | H.264 video codec | วิธีบีบอัดวิดีโอ | ไฟล์ส่งออกใช้รหัสนี้ |
| 1920×1080 | ความละเอียดภาพ | กว้าง × สูงเป็นพิกเซล | Full HD |
| ffmpeg / ffprobe | เครื่องมือวิดีโอแบบบรรทัดคำสั่ง | ใช้ตัด ตรวจ และอ่านข้อมูลวิดีโอ | ใช้ตรวจเฟรมใน QA |
| QA | Quality Assurance | การตรวจคุณภาพ | "ตรวจทุกเฟรม" คือ QA ขั้นหนึ่ง |
| uv | uv (ตัวจัดการ Python) | เครื่องมือรัน Python | ใช้เฉพาะวิเคราะห์จังหวะ BGM |
| GitHub | GitHub | เว็บโฮสต์ซอร์สโค้ด | owner/repo = เจ้าของ/ชื่อโปรเจกต์ |
| k (ใน 11k) | kilo = พัน | หน่วยพัน | 11k stars = ประมาณ 11,000 ดาว (ตัวเลขจากภาพ) |
| Apache-2.0 | Apache License 2.0 | สัญญาโอเพนซอร์ส | ใช้ได้ตามเงื่อนไขของสัญญา |
| CapCut / JianYing | CapCut / 剪映 | โปรแกรมตัดต่อวิดีโอ | Workbench หน้าตาแบบ CapCut และส่งออกร่าง JianYing ได้ |
00:04.00 / 00:37.05 |
เวลาปัจจุบัน / เวลารวม | นาที:วินาที | ตำแหน่ง 4 วินาที จากทั้งหมด 37.05 วินาที |
ตัวย่อทั้งหมดในตารางนี้มีความหมายจากความรู้ทั่วไป ยกเว้นคำที่ README หรือภาพใช้อธิบายเอง (SFX, BGM, fps ตามที่ README ใช้) ความหมายของ k, QA, CI, uv และ CapCut/JianYing เป็นความรู้ทั่วไป ไม่ได้ให้ไว้ในภาพ
Summary
- video-shotcraft เป็น skill ที่ให้ Claude Code หรือ Codex ทำคลิปโปรโมตจากภาพและข้อความจริงของสินค้า โดยวาดทุกเฟรมด้วยโค้ดผ่าน Remotion ไม่ใช่การให้ AI สร้างภาพวิดีโอ
- หลังส่งมอบ ใช้ Motion Workbench เปิดด้วย
node workbench/scripts/open.mjs <project>เพื่อแก้ข้อความ สี และจังหวะคลิปบนเบราว์เซอร์แล้วส่งออกด้วย Remotion - ตัวเลขในภาพ (157 แบบ, 216 motions) ไม่ตรงกับ repo ที่อ่านเมื่อ 2026-10-13 (150 shots, 124 recipe cards, 149 SFX, 5 BGM) ให้ใช้ตัวเลขของ repo
- ประโยชน์ด้านความเร็วยังไม่ได้ทดสอบ ให้วัดเองด้วยตารางตรวจผลก่อนสรุป
- ก่อนใช้งานเชิงพาณิชย์ ให้ตรวจสัญญาของ Remotion และสัญญาเสียงรายไฟล์
