คราวก่อนที่ปล่อยระบบ คิดราคาซูชิ หรือ Kaiten Share Calculator ไป จากการใช้ Claude Code พัฒนา ก็มีเพื่อนๆ เข้ามาลองเล่นเยอะพอสมควร, เพิ่งจะได้มีเวลามานั่งเขียนเล่า
โค้ดก่อนๆ ผมทดสอบเขียน โดยใช้วิธีการสั่งให้ทำทีละลำดับตาม Prompt ที่ให้ไป เมื่อโปรแกรมเขียนเสร็จ ผมจึงใหห้ AI ทำการสรุปฟีเจอร์ วิธีการติดตั้ง โครงสร้างระบบทั้งหมดออกมาเป็น README.md
แต่ตัวนี้กลับกัน ผมลองอีกวิธีหนึ่ง ที่เพิ่งมารู้ตอนหลังว่าเรียกว่า Context Engineering คือผมเขียน README.md ก่อน เพื่อร่ายยาว Requirement และบอกรายละเอียดต่างๆ จากนั้นค่อยให้ AI มาทำการอ่านไฟล์นั้นและเขียนมาให้ผมตาม Spec ในครั้งเดียว
ซึ่งผลลัพธ์ที่ได้คือทำงานได้ถูกต้องและแสดงผลตามที่ผมต้องการเรียกได้ว่า 95% เลยทีเดียว ส่วนอีก 5% ที่เหลือคือ เรื่องของ UX/UI ที่ผมไม่ได้ใส่รูปตัวอย่างเข้าไปให้มัน กับ พบบั๊กบางส่วนเรื่องของการคำนวณเงิน ภาษี แต่แค่นี้ก็เรียกได้ว่า มันสามารถเป็น Junior Programmer ให้ผมคนหนึ่งได้แล้วนะ ไม่ใช่แค่เพียง Co-Pilot หรือ Code Assistant
โพสต์นี้เลยอยากเขียนสรุปแบ่งปันวิธีทำง่ายๆ ให้ได้เรียนรู้ไปพร้อมๆกันครับ
Requirement Spec และ Structure ที่ผมใช้
ก่อนหน้านี้ผมเองไม่รู้จัก Context Engineering เลยใช้วิธีการที่ตัวเองคิดว่า “น่าจะใช่” และสังเกตจาก CLAUDE.md และ README.md ที่ Claude Code AI มันสร้าง Structure ออกมา ทำให้ผมสรุปได้ประมาณนี้
- ชื่อโปรแกรม: เช่น Kaiten Share Calculator
- Summary หรือ Goal: ว่าโปรแกรมนี้จะทำอะไรเช่น 🍣 Conveyor Belt Sushi/Mala Bill Calculator – Web App for Thailand
- Feature List: โดยผมแตก Bullet ใหญ่ๆ เป็นฟีเจอร์/โมดูล และแต่ละฟีเจอร์ลง Business Condition หรือรายละเอียดฟีเจอร์อีกที เพื่ออธิบายการทำงาน
- Technology Stack: เพื่อบอกว่าใช้เทคโนโลยีอะไรทำ Frontend/Backend/Database/Test หรือ Architecture/Library ที่เราเจาะจงจะใช้ เช่น HTML5/CSS3/TailwindCSS/Responsive/DesignLocalStorage/Modular Design
- User Journey: เพื่อบอกว่าผู้ใช้โปรแกรมเราจะมี journey อย่างไรในการใช้งาน ของแต่ละฟีเจอร์/โมดูล
- JSON Config: ผมออกแบบการเ้ก็บข้อมูลให้ AI ก่อน ผมสะังเกตว่ามันเรียนรู้และนำฟิลด์เหล่านยั้นไปออกแบบและเขียนโปรแกรมให้ได้ด้วย ฉลาดมาก
- UI: อันนี้ผมไม่ได้ใช้สำหรับ Kaiten Share Calculator เพราะจะให้สร้างตาม Journey แต่ผมได้ลองใช้ตอนทำ Google Map Point ซึ่งผมเอารูป UI แบบ SVG File ใส่ไว้ในโฟลเดอร์เพื่อให้ AI เข้าไปอ่าน
- Test Case: ตัวนี้ควรทำก่อนถ้าทำได้ แต่ผมมาทำตามหลัง เพื่อให้ AI เขียน Unit Test ทดสอบระบบให้
เอาตรงๆ ทั้งหมดนี้ผมสั่งเป็นภาษาไทยคร่าวๆ ไปที่ ChatGPT ก่อน เพื่อให้มันเรียบรียงเป็นรายละเอียด ตามหัวข้อที่กล่าวไว้ และแปลเป็นภาษาอังกฤษให้ผมอีกทีหนึ่ง เพื่อเอาไปทำเป็นไฟล์ README.md จากนั้นก็สั่งให้ Claude Code มาอ่านไฟล์นี้และเขียนได้เลย
ต้องบอกว่าจากที่ทดสอบมาแล้วใช้ได้ 95% นั้น หากจะให้ดีเพิ่มขึ้นไปอีก ผมแนะนำให้เพิ่ม Reqreuiement เหล่านี้เข้าไปด้วย จะทำให้เป็นระบบและโดนมากขึ้นกว่าเดิม เช่น
- Database Schema: คล้ายกับ JSON Config ที่ผมกล่าวไปก่อนหน้า ก็เพื่อระบุโครงสร้างการเก็บข้อมูล และความหมายของแต่ละ Field/Table
- API Spec: เพื่อระบุเลยว่าต้องการอะไรบ้าง มี Input/Output และทำงานอย่างไรเป็น Summary
- Project File Structure: เพื่อบอกโครงสร้างการเก็บไฟล์ต่างๆ AI มันก็จะทำให้ตามนั้น
แถม
ทริกเล็กๆของผม ถ้าอยากรู้ว่า Claude Code มันเข้าใจที่เราสั่งไหม ลองรันคำสั่ง
# claude /init
ตัว Claude AI จะสรุปข้อมูลที่มันพบเจอในโฟลเดอร์โปรเจ็คเราทั้งหมด เพื่อไปสร้างไฟล์ CLAUDE.md เราก็ไปอ่านที่มันสรุปในนั้นได้เลย ว่าเข้าใจถูกหรือเปล่า
และถ้ามีการอัพเดทใดๆก็ควรใน Requirement เรา ก็ควรสั่งให้มันอัพเดทใน CLAUDE.md ด้วยนะ
ตัวอย่าง Requirement spec ที่เขียนไว้ใน README.md
- https://github.com/ifew/kaiten-share-calculator เขียน spec ก่อน และให้ AI ทำโค้ด
- https://github.com/ifew/google-map-point เขียนโค้ดก่อน และให้ AI ทำ spec
ครั้งหน้าจะลองทำระบบที่ใหญ่ขึ้น และใช้ MCP กับ Task Master มาแตกงานเป็น Task ย่อยๆ เป็นระบบอะไรนั้น ไว้มีเวลาเดี๋ยวเอามาให้เล่นกันครับ