ApexHuasคู่มือช่างเว็บ GitHub repo

บทที่ 2 — Claude Code: สั่งงาน AI ให้ได้งานที่ใช้ได้จริง

Claude Code คือ AI ที่นั่งอยู่ใน terminal ของคุณ — มันอ่านไฟล์ในโปรเจกต์ได้ แก้ไฟล์ได้ รันคำสั่งได้ เปิดเบราว์เซอร์ทดสอบเว็บได้ และคุยกับคุณเป็นภาษาคน

มันรู้เรื่องโปรเจกต์เราได้ยังไง

AI ไม่ได้เดา — มันอ่านไฟล์กติกาที่เราวางไว้ในโปรเจกต์ทุกครั้งที่เริ่มงาน ลองคลิกดูว่ามันอ่านอะไรบ้าง

สิ่งที่ AI โหลดเข้าหัวก่อนเริ่มงาน (บนสุด = อ่านก่อน)

คลิกชั้นใดก็ได้เพื่อดูรายละเอียด

นี่คือเหตุผลที่การลงทุนเขียน 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, เอกสารที่เกี่ยวข้อง, และโค้ดเดิมที่ใกล้เคียงกับงาน

1 / 6

ตรวจงาน AI ยังไง (สำคัญที่สุดในบทนี้)

AI มั่นใจเสมอแม้ตอนผิด — ความมั่นใจไม่ใช่หลักฐาน ให้ดู 5 อย่างนี้:

  1. ผล CI เขียวจริงไหม — เปิดดูเองบน GitHub อย่าเชื่อคำบอกเล่า
  2. เปิดเว็บดูด้วยตาตัวเอง — โดยเฉพาะหน้าที่มันเพิ่งแก้
  3. ไฟล์ที่แตะมีอะไรแปลกไหม — เช่นจู่ ๆ ไปแก้ไฟล์ config ที่ไม่เกี่ยวกับงาน
  4. มันสร้างของซ้ำไหม — เขียน component ใหม่ทั้งที่มีของเดิมอยู่แล้ว
  5. มันบอกข้อจำกัดตามจริงไหม — งานที่ดีจะบอกด้วยว่า "อันนี้ยังไม่ได้ทำนะ" ไม่ใช่บอกว่าเสร็จหมดทุกอย่าง

ตัวอย่างจริง: บั๊กที่ AI ทำเอง แล้วจับได้เพราะทดสอบจริง

  • AI สร้างระบบตะกร้าสินค้า

    เขียนเสร็จ typecheck/lint/build ผ่านหมด รายงานว่าเรียบร้อย

  • เปิดเบราว์เซอร์ทดสอบจริง

    ใส่ของลงตะกร้า → กดเข้าหน้าตะกร้า → ของหายเกลี้ยง

    จับได้ตรงนี้
  • ไล่หาสาเหตุ

    โค้ดเขียนตะกร้าลงเครื่องทับด้วยค่าว่างตั้งแต่ตอนเปิดหน้า เพราะลำดับการทำงานของ React

  • แก้ด้วยวิธีที่ถูกต้อง

    เปลี่ยนไปใช้ useSyncExternalStore ซึ่งออกแบบมาสำหรับข้อมูลนอก React โดยเฉพาะ

  • CI จับซ้ำอีกชั้น

    กฎ lint ของ React ก็ฟ้องรูปแบบเดิมนั้นด้วย — เท่ากับมีตาข่ายสองชั้น

บทเรียน: การตรวจอัตโนมัติผ่าน ไม่ได้แปลว่าฟีเจอร์ใช้งานได้ ต้องลองใช้จริงเสมอ

สิ่งที่ไม่ควรให้ AI ตัดสินใจเอง

  • เรื่องธุรกิจ — ราคาส่ง เงื่อนไขคืนสินค้า นโยบายภาษี (มันจะเดาให้ ซึ่งอาจผิดกฎหมายหรือผิดข้อตกลงลูกค้า)
  • การลบข้อมูล/ระบบจริง — ให้มันเสนอคำสั่งมา แล้วคุณอ่านก่อนกด
  • ความปลอดภัยระดับโครงสร้าง — ให้มันเสนอ แต่คุณต้องเข้าใจว่ากำลังอนุมัติอะไร
  • การปล่อยของขึ้นเว็บจริง — ในโปรเจกต์นี้ AI เตรียม PR ให้ได้ แต่คนเป็นคนกด merge เข้า uat

เช็คความเข้าใจ

บทหน้า: Git — เครื่องมือที่ทำให้ทั้งหมดนี้ย้อนกลับได้และไม่ทับงานกัน