เว็บไซต์นี้ถูกเขียนด้วย Fable 5 และแนะนำแนวทางการ Vibe Code ตามสไตล์ผม

#1 · 12 มิถุนายน 2569 เวลา 21:43 น.
Aunhelloworldผู้ดูแลระบบ สมาชิก ⭐ โพสต์17	เว็บไซต์นี้เขียนด้วย Fable 5 ด้วยการจัดเรียงที่สวยงามและฟังก์ชั่นต่างๆ ถูกจัดวางอย่างเป็นระเบียบ สามารถสเกลและเพิ่มฟีเจอร์ต่างๆ ได้ง่าย และมีความคลีนสูงมากครับ แม้ว่ามันอาจจะไม่ได้เพอร์เฟค 100% แต่ต้องยอมรับว่าโมเดล Claude ตัวที่ชื่อ Fable 5 ทำออกมาได้เป็นอย่างดี สำหรับผม ตอนที่ทำเว็บไซต์นี้ ผมได้ใช้ Claude Pro และได้ทดสอบ Fable 5 โดยใช้พรอมพ์ไม่กี่บรรทัด แต่ต้องแจ้งให้ทราบอย่างนี้ว่า มันไม่ได้ง่ายขนาดนั้น เพราะผมมีพื้นฐานในการทำเว็บไซต์อยู่บ้าง นั่นคือผมพอที่จะเห็นภาพรวมว่าควรจะใช้ Stack อะไร และต้องคำนึงถึงอะไร ในการสร้างเว็บไซต์ ยกตัวอย่างเว็บไซต์นี้เลย ผมจะมีขั้นตอนการ Vibe ร่วมกับ AI ดังนี้ครับ ตั้งหลักที่ความพร้อมของตัวเองก่อน ก็คือ ผมมี VPS รัน Environment พวก PHP, MySQL, Nginx ทิ้งไว้อยู่แล้ว (หรือถ้าใครไม่มี จะ Vibe บน Ubuntu ในเครื่องตัวเองหรือโน๊ตบุ๊คเก่าๆ เพื่อจำลองเซิร์ฟเวอร์จริงก็ได้) จุดสำคัญคือเราต้องรู้ก่อนว่าเว็บเราจะไปรันอยู่บนไหน เพื่อจะได้จำกัดกรอบให้ AI เขียนโค้ดได้ตรงกับสภาพแวดล้อมจริง วางโครงสร้างแบบ CMS ในหัว ก็คือว่าก่อนจะป้อนคำสั่งแรก ผมจะคิดสเปคคร่าวๆ ไว้เลยว่าจะแยกฟังก์ชั่นให้เป็นระเบียบ ไม่เขียนโค้ดมัดรวมกันเป็นก้อนเดียว เพื่อให้ง่ายต่อการกลับมาแก้ไขและสเกลระบบในอนาคต ต่อมา สั่ง AI ด้วยโจทย์ Performance และข้อจำกัดที่มีครับ กล่าวคือ ตอนผมสั่ง Fable 5 ผมไม่ได้บอกแค่ว่า เขียนโค้ดหน้าเว็บให้หน่อย แต่ผมใส่ Context หรือบริบทส่วนตัวเข้าไปด้วย เช่น เซิร์ฟเวอร์ผมสเปคจำกัดนะ (RAM 2GB / 1vCore) แถมมีรันโปรเจคอื่นด้วย ดังนั้นเวลาเอไอเขียนโค้ด มันต้องคิดเผื่อเรื่องความเร็วและการกินทรัพยากรที่ต่ำที่สุด ต่อมาการ build ระบบหลบที่ต้องใช้ Cache ซึ่งในสเต็ปการ Vibe ผมจะสั่งให้ AI ดีไซน์โค้ดให้ทำงานร่วมกับ Cloudflare และ Redis ตั้งแต่แรกเพราะผมจะพิมพ์บอกไปเลยว่า ผมจดโดเมนเนมกับ cloudflare เช่น แนะนำให้หน้าไหนควรดึงข้อมูลแบบ Static หน้าไหนควรใช้ JavaScript (.js) โหลดแยก เพื่อลดภาระของเซิร์ฟเวอร์เมื่อเจอ User ถล่มพร้อมกันหลักร้อยหลักพัน ซึ่งแทนที่จะใช้เงินแก้ปัญหาด้วยการอัปเกรดสเปค VPS แต่ผมจะเลือกที่จะรีดศักยภาพของโค้ดร่วมกับ AI ให้ถึงที่สุดก่อนครับ ทีนี้เราก็ต้องใส่ใจเรื่อง Security ควบคู่ไปด้วยครับ คือทุกครั้งที่ยิงพรอมพ์สั่งงาน นอกจากสั่งให้รีด Performance แล้ว ต้องกำชับ AI เสมอว่าห้ามเขียนลวกๆ โค้ดทุกบรรทัดต้องคำนึงถึงความปลอดภัยขั้นพื้นฐานด้วยเสมอ ถัดมาคือเราต้องตรวจทานและขัดเกลา หลังจากได้โค้ดมาแล้ว ขั้นตอนสุดท้ายของการ Vibe คือการเอามาทดสอบจริง คอยเช็ค Log เช็ค Query ของฐานข้อมูลว่าตรงไหนซ้ำซ้อนไหม แล้วสะท้อนกลับไปให้ AI ช่วยปรับปรุง Index หรือปรับการแคชเพิ่ม จนได้ผลลัพธ์ที่ลงตัวที่สุด ซึ่งอาจใช้เอไอโมเดลแตกต่างกันก็ได้ อย่างผม ผมก็ใช้ตัวฟรีในการช่วยในบางบรรทัดครับ สรุปสั้นๆ การ Vibe โค้ดกับ AI ให้ได้เว็บคลีนๆ และรันได้จริงแบบนี้ มันไม่ใช่แค่การ Copy-Paste พรอมพ์สำเร็จรูปครับ แต่มันคือการที่เราเอา ประสบการณ์และภาพรวมในหัว ไปประกบเข้ากับ ความสามารถในการเจนโค้ดของ AI แล้วค่อยๆ ตบให้มันเข้าที่เข้าทางตามบริบทระบบของเรานั่นเองครับ และสิ่งสำคัญคือ เราต้องให้ เอไอ รู้จักบริบทของเราให้มากที่สุด ไม่ใช่เราสั่งให้เอไอเขียนแล้วพยายามจัดตัวเองให้เข้ากับบริบทของมัน ซึ่งถ้าทำแบบนั้น มันก็ได้แหละ แต่จะเหนื่อยเราครับ My Name IS Aun
	👍 ❤️ 😂 😮 😢 👎