FIGMA WEB

template.ygnos.com/demo/candle-code
หน้าเว็บ THE CANDLE CODE เวอร์ชันที่ผ่าน: แท่งเทียนอนุสาวรีย์สีทองเหนือทะเลเมฆ
v3ผ่านเวอร์ชันที่เจ้าของงานกดผ่าน
1440 × 900
เปิดเต็มจอ ↗

ทำเว็บสวยระดับ Figma ด้วย AI

คลาสออนไลน์จาก Prompt KUB ถอดเคสจริงทีละขั้น: เว็บที่โดนตีกลับ 2 รอบ จนได้เวอร์ชันที่ผ่าน และวิธีทำซ้ำกับงานของคุณเองครับ

สมัครเรียน ฿220ดูเว็บตัวอย่าง
เลื่อนลง แล้วกล้องจะพาเข้าไปในเว็บจริง
เคสจริงที่ใช้สอนในคลาส · THE CANDLE CODE

จากเว็บที่โดนตีกลับ 2 รอบ
สู่เว็บที่ผ่าน

หน้าเว็บคลาสฟรีของ MJ OPO ถูกทำ 3 รอบ ทุกรอบโค้ดทำงานได้ครบ แต่ 2 รอบแรกไม่ผ่านสายตาเจ้าของงาน รอบที่ 3 เปลี่ยนวิธีคิดจาก “เริ่มที่ UI” เป็น “เริ่มที่ภาพ” แล้วจึงผ่านครับ

เวอร์ชัน 1: เทียนไขจริงในห้องมืด
v1ตีกลับ

เทียนไขจริง ควันลอย

“ไม่สวยเลย … เหมือนขาย aroma มากกว่าสอนเทรด”เจ้าของงาน, 15 ต.ค. 2569
เวอร์ชัน 2: กราฟแบนวาดด้วยโค้ด
v2ตีกลับ

กราฟแบนวาดด้วยโค้ด หน้าตาเหมือนจอเทรด

“ไม่สวย พอมีแท่งเทียนแล้วแปลก”เจ้าของงาน, 15 ต.ค. 2569
เวอร์ชัน 3: อนุสาวรีย์แท่งเทียนเหนือทะเลเมฆ
v3ผ่าน

อนุสาวรีย์เหนือทะเลเมฆ ภาพเป็นชั้น กล้องบินเข้าหาแสง

“สวยๆ ขออลังการแบบนี้”เจ้าของงาน, 16 ต.ค. 2569
IMAGE → UI

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

สิ่งที่จะได้เรียน

4 บทเรียน
ทำตามได้จริง

ฉากอนุสาวรีย์แท่งเทียนทองท่ามกลางแสงอาทิตย์จากเว็บ THE CANDLE CODE
ฉากจริงจากเว็บตัวอย่าง: ภาพพื้น + ชิ้นที่ตัดพื้นหลัง + หมอก วางเป็นชั้น
  1. 01

    ทำไมเว็บส่วนใหญ่ไม่สวย: ภาพนำ UI

    เทียบ v1 → v2 → v3 ให้เห็นว่าเริ่มจากการ์ดและปุ่ม ต่างจากเริ่มจากภาพหนึ่งภาพอย่างไร

  2. 02

    เจนภาพเป็นชั้น (plate / cut-out / fog)

    สั่ง AI เจนภาพพื้น วัตถุหลัก และหมอกแยกกัน แล้วเตรียมไฟล์ให้พร้อมวางซ้อนบนเว็บ

  3. 03

    หัวข้อแทรกระหว่างชั้น + กล้องเลื่อนด้วย GSAP + Lenis

    วางตัวหนังสือใหญ่ไว้หลังวัตถุ แล้วให้การเลื่อนหน้าจอกลายเป็นกล้องที่วิ่งผ่านแต่ละชั้น

  4. 04

    ลูกเล่นเดียวที่จำได้ + QA 2 จอ + ขึ้น Vercel

    เลือกลูกเล่นเด่นหนึ่งอย่างต่อหน้า ตรวจทั้งจอคอมและมือถือ แล้วขึ้นเว็บจริงบน Vercel

  5. PDF

    คู่มือ PDF สรุปทุกขั้น

    เปิดทวนได้ระหว่างลงมือทำ ดาวน์โหลดได้จากหน้าเรียน

  6. PROMPTS

    ชุด Prompt พร้อมปุ่มคัดลอก

    Prompt ที่ใช้จริงในเคสนี้ แบ่งตามขั้นตอน ค้นหาแล้วคัดลอกไปใช้ได้ทันที

FIGMA WEB CLASS
220บาท

จ่ายครั้งเดียว เข้าเรียนออนไลน์ได้ทันทีหลังชำระเงินครับ

สมัครเรียน ฿220 โอนเข้าบัญชีบริษัท บจก. วีเพย์ โพรฟิต · อัปโหลดสลิป · ตรวจอัตโนมัติ
  • บทเรียน 4 บท แบบ “UI สอน” พร้อมเสียงบรรยาย
  • คู่มือ PDF สรุปทุกขั้น
  • ชุด Prompt ที่ใช้จริง พร้อมปุ่มคัดลอก
  • เว็บตัวอย่าง THE CANDLE CODE ให้เปิดดูของจริง
คำถามที่พบบ่อย

ถามก่อนสมัครได้เลยครับ

ต้องใช้เครื่องมืออะไรบ้าง

AI ที่เขียนโค้ดให้ได้ เช่น Claude Code หรือ AI coding agent ตัวอื่น, AI เจนภาพ เช่น Magnific หรือตัวอื่นที่คุณใช้อยู่ และ Vercel สำหรับขึ้นเว็บจริงครับ

ต้องเขียนโค้ดเป็นไหม

ไม่จำเป็นครับ คลาสนี้สอนวิธีคิดและวิธีสั่ง AI ให้เขียนโค้ดตามแบบที่ต้องการ พร้อมวิธีตรวจผลงานบนจอคอมและมือถือ

ได้อะไร และได้เมื่อไหร่

ได้ลิงก์เข้าหน้าเรียนทันทีหลังชำระเงินผ่าน ในหน้าเรียนมีบทเรียน 4 บท คู่มือ PDF และชุด Prompt ครับ

ติดต่อสอบถามได้ที่ไหน

ทักมาที่ Instagram @promptkub ได้เลยครับ