ตั้งค่าโปรเจกต์วิดีโอแรกด้วย Prompt | Prompt-First Video: สร้างวิดีโอด้วย HyperFrames + Claude Code | Vibe Coding Thailand$ cat 03-first-video-project.md บทที่ 3ตั้งค่าโปรเจกต์วิดีโอแรกด้วย Prompt
ตอนนี้คุณเปิด Claude Code ได้แล้ว
บทนี้เราจะสร้างพื้นที่ทำงานสำหรับวิดีโอแรก และสั่งให้ Claude อ่าน official HyperFrames repo ก่อนทำอะไร
ยังไม่ต้องสร้างวิดีโอ
ยังไม่ต้องติดตั้ง skills
ยังไม่ต้องจำคำสั่ง HyperFrames
เป้าหมายของบทนี้คือให้ Claude เข้าใจว่าโปรเจกต์นี้จะใช้ HyperFrames และต้องยึดข้อมูลจาก official source
โปรเจกต์คืออะไร
โปรเจกต์ในที่นี้คือโฟลเดอร์หนึ่งโฟลเดอร์ที่เก็บทุกอย่างของวิดีโอ
เช่น
- ไฟล์งานวิดีโอ
- รูปภาพ
- เสียง
- ไฟล์ preview
- ไฟล์ MP4 ที่ render เสร็จ
เราแยกเป็นโฟลเดอร์เพื่อไม่ให้ไฟล์ปนกับงานอื่น
ภาพตัวอย่างโฟลเดอร์โปรเจกต์ HyperFrames ที่ให้ Claude อ่าน official repo ก่อน
ภาพนี้คือเป้าหมายของบทนี้: มีโฟลเดอร์งานที่เป็นระเบียบ ให้ Claude อ่าน official repo ก่อน และยังไม่รีบสร้างวิดีโอจริงจนกว่าจะพร้อม
สร้างโฟลเดอร์งานแบบง่าย
คุณเลือกได้ 2 วิธี
วิธีที่ง่ายที่สุด: สร้างด้วยเมาส์
- ไปที่ Desktop
- สร้างโฟลเดอร์ใหม่
- ตั้งชื่อว่า
hyperframes-video
- เปิด Terminal / PowerShell ในโฟลเดอร์นั้น
ถ้าไม่รู้วิธีเปิด Terminal ในโฟลเดอร์ ให้ใช้วิธีคำสั่งด้านล่างแทน
วิธีใช้คำสั่งครั้งเดียว
macOS / Linux:
mkdir -p ~/Desktop/hyperframes-video && cd ~/Desktop/hyperframes-video && claude
Windows PowerShell:
mkdir "$HOME\Desktop\hyperframes-video"; cd "$HOME\Desktop\hyperframes-video"; claude
คำสั่งนี้ทำ 3 อย่างติดกัน
- สร้างโฟลเดอร์บน Desktop
- เข้าไปในโฟลเดอร์นั้น
- เปิด Claude Code
นี่เป็นหนึ่งในไม่กี่ครั้งที่เรายอมใช้คำสั่ง เพราะเป็นขั้นเปิดโปรเจกต์
ให้ Claude ตรวจว่าอยู่ถูกโฟลเดอร์
เมื่อ Claude Code เปิดในโฟลเดอร์ hyperframes-video แล้ว ให้ส่ง prompt นี้
ถ้า Claude บอกว่าอยู่ในโฟลเดอร์ถูกต้อง ให้ไปต่อ
ถ้าไม่ถูก ให้ทำตามที่ Claude แนะนำแบบสั้นๆ
ให้ Claude อ่าน HyperFrames official repo
เราจะไม่เริ่มจากสิ่งที่ Claude “จำได้” แต่จะให้ Claude อ่าน source จริงก่อน
Screenshot: official GitHub repo ของ HyperFramesเวลาเห็น prompt ให้ Claude อ่าน repo นี้ ให้เข้าใจว่าเราใช้หน้า official เป็นฐาน ไม่ได้ให้ AI เดาสุ่มจากความจำเก่า
บทนี้ให้ Claude อ่านและสรุปก่อนเท่านั้น
ถ้า Claude รีบติดตั้งหรือสร้างไฟล์ ให้หยุดไว้ด้วย prompt นี้
สิ่งที่ Claude ควรสรุปได้
คำตอบของ Claude ไม่จำเป็นต้องเหมือนกันทุกเครื่อง แต่ควรมีใจความประมาณนี้
- HyperFrames ใช้สร้างวิดีโอจาก HTML/CSS/JS
- เหมาะกับ AI agent เพราะ AI เขียนไฟล์เหล่านี้แทนคนได้
- preview ได้ก่อน render
- render ออกมาเป็น MP4
- มี skills และ catalog ช่วยให้ทำงานง่ายขึ้น
- ขั้นต่อไปคือให้ Claude ติดตั้ง HyperFrames skills ตามวิธี official
ถ้าคำตอบยาวเกินไป ให้สั่งแบบนี้
สร้างไฟล์บันทึกเป้าหมายโปรเจกต์
ขั้นนี้ไม่จำเป็น แต่แนะนำ
ให้ Claude สร้างไฟล์สั้นๆ ไว้ในโฟลเดอร์โปรเจกต์ เพื่อให้ทุก session ต่อจากนี้รู้ว่าโปรเจกต์นี้ทำอะไร
ไฟล์นี้เหมือนป้ายกำกับโปรเจกต์
เวลาเปิด Claude Code รอบใหม่ Claude จะมีหลักให้ยึดง่ายขึ้น
อย่าเพิ่งทำวิดีโอแรก
ตอนนี้คุณอาจอยากลองสั่งสร้างวิดีโอทันที
- Claude อ่าน HyperFrames official repo แล้ว
- Claude เข้าใจเป้าหมายโปรเจกต์แล้ว
- ติดตั้ง HyperFrames skills ก่อน
- ค่อยสร้างวิดีโอแรก
ถ้าข้าม skills ไป Claude ยังอาจทำได้ แต่มีโอกาสเขียนโครงงานไม่ตรง pattern มากกว่า
เช็กก่อนจบบท
ก่อนข้ามไปบทต่อไป คุณควรมีสิ่งเหล่านี้
- โฟลเดอร์
hyperframes-video
- เปิด Claude Code ในโฟลเดอร์นั้นได้
- Claude อ่าน official HyperFrames repo แล้ว
- Claude สรุป workflow พื้นฐานให้คุณเข้าใจแล้ว
- มีไฟล์
PROJECT_BRIEF.md ถ้าคุณเลือกให้ Claude สร้าง
บทต่อไปเราจะให้ Claude ติดตั้ง HyperFrames skills เอง โดยอ้างอิงวิธีจาก official repo ที่อ่านไปแล้ว
อัปเดตล่าสุด: 25 พ.ค. 2569
ความคิดเห็น
ยังไม่มีความคิดเห็น
เป็นคนแรกได้เลย