สร้างเว็บหลักแสนในราคาหลักพัน เผยปั้นเว็บ 3D ลดขนาดวิดีโอ 6MB เหลือ 650KB ด้วย AI โดยที่ภาพยัง…

15 เมษายน 2569 คุณ Kyle Skelly จะสอนวิธีสร้างเว็บไซต์ที่ดูน่าทึ่งมาก ๆ โดยใช้ Claude Code และเพื่อให้เว็บไซต์มีชีวิตชีวา เราจะใช้ Seedance 2.0 ซึ่งเป็นโมเดลสร้างวิดีโอใหม่ที่เผยแพร่บน Hugging Face (ผู้สนับสนุนวิดีโอในวันนี้) ไปลุยกันเลยครับ

สรุปคลิป Youtube: Claude Code + Seedance 2.0 = Insane Websites จากช่อง Kyle Skelly

คุณ Kyle บอกว่า ไม่ว่าคุณจะเป็นนักออกแบบ นักพัฒนา หรือผู้สร้างอิสระ บทแนะนำนี้จะช่วยให้คุณสร้างเว็บไซต์ที่น่าประทับใจได้เร็วกว่าที่เคย โดยไม่ต้องเขียนโค้ด

สิ่งที่คุณจะได้เรียนรู้:
– วิธีต่างๆ ในการนำดีไซน์เข้าสู่ Claude
– วิธีการปรับแต่งดีไซน์ของคุณใน Claude
– ทำให้ดีไซน์มีชีวิตชีวาโดยใช้ AI
– การเผยแพร่เว็บไซต์ของคุณสู่สาธารณะ

📌 คำว่า 0 บาท คือ ค่า Host และค่า Deploy เท่านั้น

💎 ขั้นตอนการสร้างเว็บ

✅ ขั้นตอนที่ 1: เปลี่ยน Figma Design เป็นโค้ดด้วย Claude Code
หากคุณมี Figma Pro: เปิด Dev Mode → ไปที่แถบ MCP → คัดลอก Prompt ตัวอย่างมาได้เลย

คุณ Kyle บอกว่า คุณไม่จำเป็นต้องสมัครสมาชิก Figma แบบเสียเงินก็ได้ แค่แคปหน้าจอ Design ที่อยากได้ แล้วโยนเข้าไปให้ Claude Opus 4.6 เขียนโค้ดพื้นฐานให้

ใช้ Prompt ว่า Make this into a full-screen hero sectional website. The font is Manual, H1 size is 80px.

เลือกโมเดลเป็น Claude Opus (เวอร์ชันล่าสุด) → กด Run

ผลลัพธ์ที่ได้ถือว่าดีมาก Claude สร้างปุ่มออกมาได้ แถมยังสร้างไอคอนดาวแทนที่ไฟล์ต้นฉบับได้เอง

✅ ขั้นตอนที่ 2: ย้ายไป Terminal และปรับแต่งละเอียด
ผมมักสลับจาก Desktop App ไปใช้ Claude in Terminal เพื่อความคล่องตัว คุณสามารถบอก Claude ว่า I want to continue this with Claude in the terminal, how do I do that?

- จัดหน้าจอ: ซ้าย = เว็บไซต์, ขวา = Terminal Claude
- ปรับ Micro-adjustments เช่น H1 should be regular and semi-bold weight และแก้ไอคอนดาวที่ปลายคำว่า 3D magic ที่แสดงผิด
- Refresh หน้าเว็บ → ไอคอนเปลี่ยนเป็น Emoji (ใช้แทนไปก่อนได้)

✅ ขั้นตอนที่ 3: เพิ่มพื้นหลัง Grid แบบ SVG และทำ Vignette Mask
- ใน Figma: Export กริดลายเส้นเป็น grid.svg → สร้างโฟลเดอร์ images ในโปรเจกต์ → บันทึกไฟล์ลงนั้น
- บอก Claude ว่า Add the grid.svg from the images folder to the full-screen background. It should sit behind everything, filling the entire page.
- ผลลัพธ์: กริดขยายเต็มจอโดยอัตโนมัติ
- เพิ่มความนุ่มนวล: Add a radial mask to create a vignette effect, fading off at the edges. Tighten it up a bit so lines don't overlap the nav links.

Refresh → กริดจางลงบริเวณขอบ ไม่รบกวน Navigation

✅ ขั้นตอนที่ 4: แทนที่ Assets (โลโก้ & ไอคอน)
- Export โลโก้, ไอคอนปุ่ม, ไอคอนดาว จาก Figma → ตั้งชื่อ logo.svg, button-icon.svg, star.svg → ใส่ในโฟลเดอร์ images
- บอก Claude ให้แทนที่ไฟล์เก่าด้วย SVG ใหม่ → Refresh → โลโก้และไอคอนแสดงถูกต้อง

✅ ขั้นตอนที่ 5: สร้างตัวละครด้วย AI + ทำให้เคลื่อนไหวด้วย Seedance 2.0

นี่คือ ส่วนที่จะทำให้เว็บดู Unique สุด ๆ:
- ไปที่ Hugging Face → เลือกโมเดลสร้างภาพ (เช่น Nano Banana 2 / Pro)
- ใช้ Prompt: Create a Pixar-style character on a white background, similar style to characters from Up, wearing a miner helmet and a knitted jumper. → Generate หลายรอบจนได้ภาพที่พอใจ
- Export ตัวละครเป็น PNG → บอก Claude ให้เพิ่มลงในเว็บตามตำแหน่งที่กำหนด → Refresh → ตัวละครปรากฏในเว็บ
- กลับมาที่ Hugging Face → เลือกหมวด Video → เลือก Seedance 2.0
- อัปโหลด PNG ตัวละคร → ใช้ Prompt: This character is on a solid white background. He's looking around. Static camera positioning, no panning.

Seedance 2.0 ควบคุมการเคลื่อนไหวได้แม่นยำมาก ตัวละครไม่เลื่อนหลุดเฟรม ไม่ถูกครอปขอบ
- ดาวน์โหลดวิดีโอ → ทำแบบเดียวกันกับตัวละครที่สอง → นำวิดีโอเข้าโฟลเดอร์ images
- บอก Claude ให้แทนที่รูปภาพด้วยวิดีโอที่ตรงกัน → Refresh → ตัวละครขยับหัวมองไปมาได้จริง

✅ ขั้นตอนที่ 6: ลบพื้นหลังวิดีโอ + ปรับ Blend Mode
- วิดีโอจาก AI มักมีพื้นหลังไม่ขาวสนิท → เปิด DaVinci Resolve
- ลากวิดีโอเข้า Timeline → ใช้ Magic Mask → ระบายรอบตัวละคร → กด Run
- เพิ่มพื้นหลังสีขาว Solid ด้านหลัง → พื้นหลังจะถูกแยกออก
- บอก Claude: Set the blend mode of the videos to darken. → คำสั่งนี้จะตัดค่าสีขาวออก ทำให้วิดีโอดูเหมือนมีพื้นหลังโปร่งใสบนกริดได้สมบูรณ์

✅ ขั้นตอนที่ 7: บีบอัดวิดีโอ + เพิ่ม Animation + ทำ Responsive
- วิดีโอ Hero Section อาจหนักเกินไป → บอก Claude ใน Terminal: Can we compress the videos?
✨ ตัวอย่าง: character1.mp4 จาก 6 MB → เหลือ 650 KB (ลดขนาดได้มาก โดยยังรักษาคุณภาพไว้ได้)
- เพิ่ม Entrance Animation: Make the grid appear first, then grow in. H1 should appear one word at a time. → Refresh → อนิเมชันลื่นไหลมาก
- แก้ Responsive: Make the nav responsive. Nav links turn into a burger icon. Show a full-screen nav popup with a close (X) button at the top. Hide characters on mobile. Make the login button full-width.
- Refresh + ย่อหน้าจอ → เมนูเปลี่ยนเป็น Burger → เปิด Fullscreen Popup → ซ่อนตัวละครบนมือถือ → ปุ่ม Login กว้างเต็มจอ

✅ ขั้นตอนที่ 8: Deploy ขึ้น Live Site
- บอก Claude: Push this to a GitHub repo, then show me the steps to publish it live on Cloudflare.
- กระบวนการทั้งหมดใช้เวลาแค่ ~5 นาที → เชื่อมต่อ Domain → Host ฟรีได้ในกรณีส่วนใหญ่

👉 หัวใจของเว็บนี้ไม่ใช่แค่การใช้ AI ช่วยเขียนโค้ด แต่คือ การใช้ Claude Code เป็นเหมือนคนคุมงานที่คอยจัดการทั้งเรื่องโครงสร้าง, การจัดการไฟล์สื่อ, ไปจนถึงการอัปโหลดขึ้นเซิร์ฟเวอร์ โดยเราทำหน้าที่เป็นคนคุมทิศทางและใส่ความคิดสร้างสรรค์ผ่าน Prompt เท่านั้น

💛 ติดตามเพจเราไว้ เพื่อรับความรู้สาระดี ๆ แบบนี้ได้ประจำครับ

#insightist #AI #AIEasyStep #Seedance2 #Byteplus #ClaudeCode #KyleSkelly