บทที่ 2 — Claude Code: สั่งงาน AI ให้ได้งานที่ใช้ได้จริง
Claude Code คือ AI ที่นั่งอยู่ใน terminal ของคุณ — มันอ่านไฟล์ในโปรเจกต์ได้ แก้ไฟล์ได้ รันคำสั่งได้ เปิดเบราว์เซอร์ทดสอบเว็บได้ และคุยกับคุณเป็นภาษาคน
มันรู้เรื่องโปรเจกต์เราได้ยังไง
AI ไม่ได้เดา — มันอ่านไฟล์กติกาที่เราวางไว้ในโปรเจกต์ทุกครั้งที่เริ่มงาน ลองคลิกดูว่ามันอ่านอะไรบ้าง
สิ่งที่ AI โหลดเข้าหัวก่อนเริ่มงาน (บนสุด = อ่านก่อน)
คลิกชั้นใดก็ได้เพื่อดูรายละเอียด
CLAUDE.md
ไฟล์แรกที่ AI อ่านเสมอ ในโปรเจกต์นี้บรรทัดแรกเขียนว่า @AGENTS.md แปลว่า 'ไปอ่าน AGENTS.md ต่อด้วย'
AGENTS.md
หัวใจของระบบ — เขียนกติกาไว้ครบ เช่น ต้องแตก branch ทุกงาน, ห้าม commit ตรงเข้า develop, เงินเก็บเป็นจำนวนเต็มสตางค์, ห้ามใช้ any ใน TypeScript, แตะ schema ต้องอัปเดตเอกสารด้วย
docs/ ที่เกี่ยวข้อง
AGENTS.md มีตารางบอกว่า 'งานแบบไหนต้องอ่าน doc ไหนก่อน' เช่น จะแตะฐานข้อมูล → อ่าน docs/database.md, จะแตะ auth → อ่าน docs/security.md
โค้ดจริงที่เกี่ยวข้อง
AI จะไล่อ่านไฟล์ที่เกี่ยวกับงานนั้นเอง เช่นจะแก้หน้าสินค้าก็จะเปิดดู component เดิมก่อนว่าเขาเขียนสไตล์ไหน
คำสั่งของคุณ
บริบทที่คุณให้ในแชท — งานที่ต้องการ ข้อจำกัด ความชอบ ทับกฎอื่นได้หมดถ้าคุณสั่งชัด
นี่คือเหตุผลที่การลงทุนเขียน AGENTS.md ดี ๆ ครั้งเดียว คุ้มกว่าการพิมพ์อธิบายซ้ำทุกครั้งที่สั่งงาน
สั่งงานยังไงให้ได้ผลดี
ความต่างระหว่างคำสั่งที่ได้งานใช้ได้ กับคำสั่งที่ได้งานต้องรื้อ อยู่ที่ บริบท ไม่ใช่ความยาว
คำสั่งเดียวกัน คนละผลลัพธ์
สั่งแบบนี้ได้งานที่ใช้ได้
- บอกเป้าหมายทางธุรกิจ ไม่ใช่แค่วิธีทำ
- ระบุข้อจำกัดที่ห้ามพลาด
- บอกว่าถือว่าเสร็จเมื่อไหร่
- ให้ตัวอย่างของที่มีอยู่แล้วให้ยึดเป็นแบบ
ทำหน้ารายการสินค้าให้กรองตามแบรนด์ได้
- ต้องแชร์ลิงก์แล้วเปิดมาเห็นผลกรองเดิมได้ (เก็บ state ใน URL)
- ใช้ component ที่มีอยู่แล้วใน src/components/ui
- ทดสอบที่จอมือถือ 390px ด้วย ห้ามล้นขอบ
- เสร็จแล้วให้ typecheck/lint/build ผ่านก่อนเปิด PR
สั่งแบบนี้แล้วต้องรื้อ
- สั้นจนตีความได้หลายแบบ
- ไม่บอกข้อจำกัด → AI เลือกเองตามใจ
- ไม่มีเกณฑ์ว่าเสร็จ → ได้ของครึ่ง ๆ
- ไม่บอกให้ดูของเดิม → ได้ของหน้าตาหลุดจากที่อื่น
ทำ filter หน่อย
เคล็ดลับที่ใช้ได้จริงในโปรเจกต์นี้:
- ให้ทำทีละก้อน — บอกให้ทำทั้งเว็บในคำสั่งเดียวจะได้ของที่รีวิวไม่ไหว โปรเจกต์นี้แบ่ง mockup ทั้งเว็บออกเป็น 6 ก้อน แต่ละก้อนจบใน 1 PR
- ให้มันอธิบายแผนก่อนลงมือ ถ้างานใหญ่ — "วางแผนให้ดูก่อน อย่าเพิ่งเขียน"
- ให้มันทดสอบของจริง — สั่งว่า "เปิดเบราว์เซอร์ดูจริงและถ่ายภาพมาให้ดูด้วย" ดีกว่าเชื่อคำว่าเสร็จ
- ถ้าผลออกมาไม่ตรงใจ อย่าแก้ทีละจุด — บอกใหม่ว่าอยากได้แบบไหน แล้วให้มันทำใหม่ มักเร็วกว่า
- สั่งเป็นภาษาไทยได้ — โค้ดและ commit จะยังเป็นภาษาอังกฤษตามกฎในไฟล์ AGENTS.md
AI ทำงานเป็นวงจร ไม่ใช่ยิงครั้งเดียวจบ
วงจรที่เกิดขึ้นตอน AI ทำงานหนึ่งชิ้น
1. อ่านบริบท
โหลด AGENTS.md, เอกสารที่เกี่ยวข้อง, และโค้ดเดิมที่ใกล้เคียงกับงาน
2. วางแผน
แตกงานเป็นขั้นย่อย ๆ ถ้าเป็นงานใหญ่มันจะแจ้งแผนให้คุณดูก่อน
3. ลงมือแก้ไฟล์
แตก branch ก่อนตามกฎ แล้วเขียน/แก้ไฟล์ทีละจุด
4. ตรวจงานตัวเอง
รัน typecheck / lint / build และเปิดเบราว์เซอร์ดูผลจริง
5. เจอปัญหา → วนกลับ
ถ้าตรวจไม่ผ่าน มันจะอ่าน error แล้วกลับไปแก้ วนจนผ่าน — จุดนี้เองที่มันต่างจากการ 'สร้างโค้ดครั้งเดียวจบ'
6. ส่งงาน
commit + push + เปิด PR พร้อมสรุปให้คุณอ่านว่าทำอะไรไปบ้างและทดสอบอะไรมาแล้ว
ตรวจงาน AI ยังไง (สำคัญที่สุดในบทนี้)
AI มั่นใจเสมอแม้ตอนผิด — ความมั่นใจไม่ใช่หลักฐาน ให้ดู 5 อย่างนี้:
- ผล CI เขียวจริงไหม — เปิดดูเองบน GitHub อย่าเชื่อคำบอกเล่า
- เปิดเว็บดูด้วยตาตัวเอง — โดยเฉพาะหน้าที่มันเพิ่งแก้
- ไฟล์ที่แตะมีอะไรแปลกไหม — เช่นจู่ ๆ ไปแก้ไฟล์ config ที่ไม่เกี่ยวกับงาน
- มันสร้างของซ้ำไหม — เขียน component ใหม่ทั้งที่มีของเดิมอยู่แล้ว
- มันบอกข้อจำกัดตามจริงไหม — งานที่ดีจะบอกด้วยว่า "อันนี้ยังไม่ได้ทำนะ" ไม่ใช่บอกว่าเสร็จหมดทุกอย่าง
ตัวอย่างจริง: บั๊กที่ AI ทำเอง แล้วจับได้เพราะทดสอบจริง
-
AI สร้างระบบตะกร้าสินค้า
เขียนเสร็จ typecheck/lint/build ผ่านหมด รายงานว่าเรียบร้อย
-
จับได้ตรงนี้
เปิดเบราว์เซอร์ทดสอบจริง
ใส่ของลงตะกร้า → กดเข้าหน้าตะกร้า → ของหายเกลี้ยง
-
ไล่หาสาเหตุ
โค้ดเขียนตะกร้าลงเครื่องทับด้วยค่าว่างตั้งแต่ตอนเปิดหน้า เพราะลำดับการทำงานของ React
-
แก้ด้วยวิธีที่ถูกต้อง
เปลี่ยนไปใช้ useSyncExternalStore ซึ่งออกแบบมาสำหรับข้อมูลนอก React โดยเฉพาะ
-
CI จับซ้ำอีกชั้น
กฎ lint ของ React ก็ฟ้องรูปแบบเดิมนั้นด้วย — เท่ากับมีตาข่ายสองชั้น
บทเรียน: การตรวจอัตโนมัติผ่าน ไม่ได้แปลว่าฟีเจอร์ใช้งานได้ ต้องลองใช้จริงเสมอ
สิ่งที่ไม่ควรให้ AI ตัดสินใจเอง
- เรื่องธุรกิจ — ราคาส่ง เงื่อนไขคืนสินค้า นโยบายภาษี (มันจะเดาให้ ซึ่งอาจผิดกฎหมายหรือผิดข้อตกลงลูกค้า)
- การลบข้อมูล/ระบบจริง — ให้มันเสนอคำสั่งมา แล้วคุณอ่านก่อนกด
- ความปลอดภัยระดับโครงสร้าง — ให้มันเสนอ แต่คุณต้องเข้าใจว่ากำลังอนุมัติอะไร
- การปล่อยของขึ้นเว็บจริง — ในโปรเจกต์นี้ AI เตรียม PR ให้ได้ แต่คนเป็นคนกด merge เข้า
uat
เช็คความเข้าใจ
-
เพราะแชทหายไปทุกครั้งที่เริ่ม session ใหม่ และ dev คนอื่นที่เข้ามาก็ไม่ได้ยินสิ่งที่คุณเคยสั่ง กฎที่เขียนไว้ในไฟล์จะถูกโหลดอัตโนมัติทุกครั้ง ทุกคน ทุก session
-
ไม่ ให้ดูหลักฐาน — ผล CI บน GitHub, ภาพหน้าจอ, หรือเปิดเว็บดูเอง ตัวอย่างเรื่องตะกร้าคือกรณีที่การตรวจอัตโนมัติผ่านหมดแต่ฟีเจอร์ใช้งานไม่ได้จริง
-
แบ่งเป็นก้อน ๆ ก้อนละ PR — เพราะคุณต้องรีวิวไหว และถ้ามีอะไรผิดจะย้อนกลับได้ทีละก้อน โปรเจกต์นี้แบ่ง mockup ทั้งเว็บเป็น 6 ก้อน
บทหน้า: Git — เครื่องมือที่ทำให้ทั้งหมดนี้ย้อนกลับได้และไม่ทับงานกัน