Resources

Video to Website
Claude Code Skill

สร้างเว็บไซต์สวยๆ จากวิดีโอ ด้วย Claude Code ในไม่กี่นาที — ดาวน์โหลด Skill ฟรี

Video to Website — Claude Code Skill
ดูวิดีโอ Tutorial
ดาวน์โหลด Skill

มันทำอะไรได้?

Skill ตัวนี้จะสอนให้ Claude Code สร้าง scroll-driven animated website จากไฟล์วิดีโอของคุณโดยอัตโนมัติ

  • Extract frames จากวิดีโอ
  • สร้าง premium scroll animation ด้วย GSAP + Canvas
  • Serve locally ให้คุณ preview ได้ทันที

เหมาะสำหรับ: freelancer, เจ้าของกิจการ, นักธุรกิจ, คนที่อยากลอง Claude Code ครั้งแรก หรือใครก็ตามที่อยากสร้าง portfolio website จากวิดีโอของตัวเอง

ตัวอย่าง scroll-driven animation website สร้างจากวิดีโอ crazycof coffee

ความเร็ว/ความต่อเนื่องของการแสดงผล ขึ้นอยู่กับการ scroll หรือการเลื่อน

วิธีติดตั้ง Skill

01
สร้างโฟลเดอร์ใน project.claude/skills/video-to-website/
02
ดาวน์โหลด SKILL.md แล้ววางในโฟลเดอร์นั้น
03
เปิด Claude Code แล้วพิมพ์คำสั่ง/video-to-website
04
อัปโหลดวิดีโอแล้วบอก Claudeสร้างเว็บ scroll-driven จากวิดีโอนี้

ดาวน์โหลด SKILL.md

วางไฟล์ในโฟลเดอร์ที่กำหนด แล้ว Claude Code จะใช้ Skill ได้ทันที

Frontend Design Skill

.claude/skills/frontend-design/ดาวน์โหลด SKILL.md

Video to Website Skill

.claude/skills/video-to-website/ดาวน์โหลด SKILL.md

ตัวอย่าง Prompts ที่ใช้

สร้างรูปและวิดีโอด้วย Google Flow แล้วส่งต่อให้ Claude Code สร้างเว็บ

Image Generation — Google Flow
a professional studio-grade image of a coffee bean bag. it should be against a plain all-black background with no shadows, no hands, no reflections. keep the logo and name of this product (crazycof)
Video Generation — Google Flow
A cinematic, magical product video beginning with a blue Crazycof coffee bean bag centered on a pure black background. The bag slowly and magically unseals itself at the top — no hands, as if moved by an invisible force. As the bag opens, the camera begins a smooth, slow crane movement upward and inward, transitioning from a front-facing product shot to a top-down overhead perspective. As the camera moves overhead, dark roasted coffee beans begin to rise and float upward out of the open bag in slow motion, tumbling and rotating gracefully through the air toward the camera lens. The beans accelerate gently toward the viewer, filling the frame. Mid-air, each bean begins to shimmer and magically dissolve and transform — morphing fluidly into droplets of dark liquid coffee, as if by magic. The droplets arc and fall in a smooth, gravity-defying curve downward. The camera pulls back slowly and descends, revealing the end scene: the same blue Crazycof bag standing upright on a black surface, with a dark ceramic mug filled with steaming black coffee placed in front of it, and coffee beans scattered naturally around the base. The entire sequence is seamless, smooth, and cinematic. No hands, no shadows, no reflections. The lighting is dramatic and moody — deep blacks, rich blues from the bag, warm amber highlights on the coffee and beans. The mood is magical, premium, and elegant.
Claude Code — สร้างเว็บจากวิดีโอ
i have a video called crazycof_coffee_beans.mp4 , help me create a one page product landing page for this product. it should be modern, feel very professional, have smooth animations and design throughout (ive added 2 skills in .claude). all of the text should be easy to read, and the background of the website should be completely black. it should be dark mode and it should blend into the background of the crazycof image so that it looks like it is one fluid webpage

ลองทำแล้ว? มาโชว์กัน!

Comment ใต้วิดีโอ YouTube พร้อมลิงก์เว็บที่สร้าง หรือแท็ก @everydaywithcaptain บน TikTok/IG ผลงานที่น่าสนใจจะถูกแชร์ใน community

Everyday with Captain