กลับ Blog
Blog Post · AI

สกิลลับที่เปลี่ยน Claude ให้เป็นเว็บดีไซน์เนอร์ สร้าง 3D Website ใน Prompt เดียว

สกิลลับที่เปลี่ยน Claude ให้เป็นเว็บดีไซน์เนอร์ สร้าง 3D Website ใน Prompt เดียว

ถ้าอยากสร้าง 3D Website เท่ ๆ ด้วย AI อย่าง Claude Code หลาย ๆ คนคงคิดว่ามันต้องมีความรู้เรื่องโค้ด หรือไม่ก็ต้องเคยออกแบบเว็บไซต์มาก่อน

แต่ถ้าเอฟบอกว่าคุณสามารถสร้าง 3D Website ได้ด้วยคำสั่งธรรมดา ๆ แค่คำสั่งเดียว เหมือนเวลาคุยแชทกับเพื่อน โดยที่ ไม่ต้องเขียนโค้ดเป็น และ ไม่ต้องมีความรู้เรื่องการออกแบบ คุณจะเชื่อมั้ย?

แถม Website ที่ได้ก็ไม่ใช่งานธรรมดาที่แค่ให้เอไอเจนรูปหรือวิดีโอมาใส่ในเว็บ แต่เป็น 3D Animation ที่จะเคลื่อนไหวตามการ scroll mouse ของคุณได้เลย

ถ้าอยากรู้ว่ามันทำได้ยังไง? มาหาคำตอบกันที่โพสต์นี้ได้เลยยย

1. สกิลลับตัวนี้คืออะไร

สกิลตัวนี้มีชื่อว่า "scroll-world" มันคือตัวช่วยที่จะเปลี่ยน Claude Code ให้กลายเป็นเว็บดีไซน์เนอร์มือโปร

สิ่งที่เราจะได้คือเว็บไซต์ 3D ที่ภาพแอนิเมชันในเว็บจะเคลื่อนไหวตามเวลาที่เราเลื่อนเมาส์ขึ้นลง เหมือนเราหลุดเข้าไปในโลกจำลองนั้นเลย

อย่างตอนที่เอฟลองทำ แค่สั่งให้มันทำเว็บเกี่ยวกับรถแข่ง F1 ผลลัพธ์ที่ได้คือฉาก 3D ที่เล่าเรื่องตั้งแต่ตอนช่างซ่อมล้อในพิตเลน ไปจนถึงตอนที่รถวิ่งเข้าโพเดียมเลย

2. ของที่ต้องมีก่อนเริ่ม

การจะใช้สกิลนี้ เราต้องเตรียมเครื่องมือ 2 อย่าง คือ VS Code (โปรแกรมสำหรับเขียนโค้ด) และ Claude Code (Extension ที่ติดตั้งใน VS Code)

วิธีติดตั้งสกิลก็ง่ายมาก ๆ แค่เราสร้างโฟลเดอร์เปล่าขึ้นมา 1 อัน แล้วสร้างโฟลเดอร์ย่อยชื่อ .claude และสร้างโฟลเดอร์ skills ซ้อนไว้ข้างในอีกที

จากนั้นก็โหลดไฟล์สกิล scroll-world มาแตกไฟล์ แล้วลากไปใส่ในโฟลเดอร์ skills ได้เลย ปิดหน้าต่างแล้วเปิดใหม่ หรือกดรีเฟรชหนึ่งรอบ Claude ของเราก็พร้อมใช้งานสกิลนี้แล้วครับ

ถ้าใครอ่านแล้วขี้เกียจตั้งค่าเอง ก๊อป Path ของสกิลแล้วบอก Claude ให้ติดตั้งให้ก็ได้เหมือนกัน

3. แค่พิมพ์ Prompt เดียวจบ

พอติดตั้งเสร็จ เราก็แค่พิมพ์สั่งงานไปตรง ๆ เลย เช่น "อยากได้เว็บไซต์ F1 จากพิตเลนไปโพเดียม"

สกิลนี้มันจะทำตัวเหมือนคนมาสัมภาษณ์เราต่อ ว่าอยากได้รายละเอียดแบบไหน สไตล์อาร์ตแบบไหน? มุมกล้องแบบไหน? โทนสีอะไร? ทำเวอร์ชันมือถือด้วยมั้ย?

หลังจากเลือกเสร็จ มันจะคำนวณมาให้ดูก่อนเลยว่าต้องเจนฉากประมาณกี่ฉาก และจะเจนฉากไหนบ้าง ถ้าใครที่ใช้สกิล AI-Media ของเอฟในการเจนรูปและวิดีโอ มันก็จะคำนวณให้เลยว่าฉากทั้งหมดที่ต้องใช้มีค่า API ในการทำรูปและวิดีโอเท่าไหร่

ซึ่งจากที่เอฟทำมา ถ้าใช้โมเดลอย่าง seedance 2 mini ราคาจะตกอยู่ที่ประมาณ 2-3 ดอลลาร์เท่านั้น ถ้ามีปรับแก้บางฉากก็อยู่ในงบ 6 ดอลลาร์ พอเรารู้ราคาและยอมรับได้ ก็กดอนุมัติให้มันเริ่มทำงานได้เลย

สรุปแบบหล่อเท่

ปัญหาของการทำเว็บไซต์ 3D สวย ๆ สักเว็บ คือมันต้องใช้ทักษะโค้ดดิ้งที่ซับซ้อน หรือไม่ก็ต้องมีงบจ้างคนทำที่สูงมาก

แต่สกิล scroll-world ได้เข้ามาทำลายกำแพงนี้ทิ้งไป เปลี่ยนกระบวนการสร้างเว็บที่เคยยากมาก ๆ ให้เหลือแค่การพิมพ์คุยกับ AI ด้วยภาษาธรรมดา ๆ เหมือนคุยแชทกับเพื่อน

แต่ข้อเสียของตัวสกิลต้นฉบับคือ มันต้องให้เราสมัครเครื่องมือเจนภาพและวิดีโอ ซึ่งส่วนใหญ่ที่นิยมตอนนี้ก็คงหนีไม่พ้น higgsfield ที่ราคา 49 เหรียญต่อเดือน

เอฟเลยนำสกิลนี้มาปรับปรุงใหม่เป็นชื่อ "AI Media" ที่เปลี่ยนไปเชื่อมต่อกับเครื่องมือค่ายอื่นแทน ทำให้เราจ่ายเงินแค่เท่าที่ใช้งานจริง วิธีนี้ช่วยให้ต้นทุนในการทำเว็บของเราถูกลงกว่าเดิมถึง 78% เลยครับ (สำหรับการเจนรูป)


แต่สำหรับใครที่ไม่อยากนั่งพิมพ์ Prompt สร้างสกิลเอง แล้วต้องมาไล่แก้เองตอนมันพัง เอฟมี "Premium Bonuses" มาเสนอครับ

สิ่งที่คุณจะได้รับ AI-Image Pro AI-Media Pro
1. เจนรูปจากคำสั่งสั้น ๆ พิมพ์สั่งว่าอยากได้รูปอะไร สกิลขยายเป็น Prompt เต็มให้เอง
2. เจนวิดีโอได้ในสกิลเดียวกัน ×
3. คลัง reference 31 ไฟล์ สไตล์ภาพ มุมกล้อง และแสง ที่สกิลเลือกใช้ให้เอง ×
4. คลิปสอนตั้งค่า + ตัวอย่างการใช้งาน
รับสกิลนี้ 89 บาท รับสกิลนี้ 102 บาท

ปล. หลังจากกดสั่งซื้อสำเร็จ ระบบจะทำการส่งสินค้าไปให้ที่ Email ตามที่ได้กรอกมาภายใน 5 นาที ถ้าเกิน 5 นาทีแล้วไม่มี Email ส่งไป รบกวนค้นหาที่กล่องสแปม ถ้าไม่เจอจริง ๆ อย่าพึ่งด่าเอฟ ติดต่อมาที่เพจ เอฟจะเป็นคนรวย ได้เลย

เอฟ
เอฟ
@nattphum

บันทึกการเรียนรู้ AI, Automation และการทำธุรกิจด้วยตัวคนเดียว