สวัสดีค่าาาา กลับมาอีกแล้ววว 👋

EP นี้ขอพูดถึงหนึ่งใน สิ่งที่เปลี่ยนชีวิตการใช้ Claude Code ได้มากที่สุด — Plan-First Workflow

หรือพูดง่ายๆ คือ: บังคับ Claude ให้คิดก่อนทำ

ฟังดูง่ายใช่ไหม? แต่ 90% ของคนที่ใช้ Claude Code ไม่ทำสิ่งนี้ แล้วก็งงว่าทำไม Claude ถึงทำ feature พังซ้ำๆ 5555

Claude Code เป็น "agentic system" ไม่ใช่ chatbot

Chatbot ธรรมดา (เช่น Claude.ai) คือ:

เรา → พิมพ์ → Claude ตอบ → จบ

Claude Code คือ:

เรา → พิมพ์ → Claude วางแผน → Claude ทำ action หลายอย่าง 
→ อ่านไฟล์ → รัน command → แก้ไขไฟล์ → ทำอีก → ทำอีก
→ จนเสร็จ (หรือพัง)

Claude Code ทำ หลาย steps ต่อเนื่องกันโดยอัตโนมัติ เรียกว่า "agentic loop" ซึ่งหมายความว่าถ้าตัดสินใจผิดในสเต็ปแรก ความผิดพลาดมันจะ ขยายตัว เอาเป็นว่าชิบหายวายป่วง

เหมือนขับรถ GPS บอกผิดตั้งแต่แยกแรก ยิ่งขับยิ่งหลง อะไรประมาณนั้น

The 1%

มีการคำนวณที่ทำให้เห็นภาพชัดมาก

สมมติว่า Claude ตัดสินใจถูกต้องแต่ละ step 80% ของเวลา (ซึ่งถือว่าเก่งมากแล้ว)

ถ้า feature หนึ่งต้องตัดสินใจ 20 จุด:

โอกาสที่ทุก step จะถูกหมด = 0.80^20 = 1.15%

แปลว่าถ้าไม่มีการวางแผน โอกาสที่ feature จะออกมาสมบูรณ์แบบมีแค่ 1% เท่านั้น

แต่ถ้าเราวางแผนก่อน โดยตรวจสอบ 20 จุดตัดสินใจนั้นล่วงหน้า:

การตัดสินใจเหลือแค่ "ทำตามแผนหรือเปล่า" → ความถูกต้องขึ้นไปใกล้ 100%

Plan-First Workflow ทำยังไง?

วิธีที่ 1: พิมพ์ขอตรงๆ

"ก่อนที่จะทำอะไร ช่วยเขียนแผนก่อนนะคะ ว่าจะแก้ไฟล์ไหนบ้าง 
ขั้นตอนเป็นยังไง แล้วรอให้เราเห็นด้วยก่อนค่อยทำ"

วิธีที่ 2: ใส่ไว้ใน CLAUDE.md เลย (แนะนำท่านี้ดีกว่า)

## Workflow Rules
- ก่อนทำ task ใหม่ทุกครั้ง ให้เขียน plan ก่อนเสมอ
- บอกว่าจะแก้ไฟล์ไหนบ้าง, ลำดับการทำงาน, edge cases
- รอให้ได้รับการ approve ก่อนถึงจะเริ่ม implement

วิธีที่ 3: Plan Mode (Shift+Tab)

Claude Code มี built-in Plan Mode กด Shift+Tab เพื่อสลับ (ถ้าใช้แบบ CLI)

ใน Plan Mode Claude จะ

  • อ่านไฟล์ได้ แต่แก้ไม่ได้

  • เขียน plan ให้เราเห็นก่อน

  • รอ confirm ก่อนจะออกจาก Plan Mode แล้วทำจริง

ตัวอย่าง Plan ที่ดี

พิมพ์: "เพิ่ม dark mode ให้กับ settings page"

Claude ควรตอบแบบนี้ก่อน:

แผนการทำงาน:

1. อ่านไฟล์ที่เกี่ยวข้อง
   - /app/settings/page.tsx
   - /lib/theme.ts (ถ้ามี)
   - /styles/globals.css

2. ตรวจสอบว่ามี theme system อยู่แล้วไหม
   → ถ้ามี next-themes: ใช้ useTheme() hook
   → ถ้าไม่มี: ต้องติดตั้ง next-themes ก่อน

3. เพิ่ม toggle switch ใน settings page
   - ใช้ component Switch จาก /components/ui/Switch

4. เก็บ preference ไว้ใน localStorage
   - key: "theme-preference"
   - ค่า: "light" | "dark" | "system"

5. Test: ทดสอบว่า preference ยังอยู่หลัง refresh

ขั้นตอนนี้ถูกต้องไหมคะ? มีอะไรเพิ่มเติมก่อนเริ่มทำ?

Plan ช่วยจับ edge cases ที่เรามองไม่เห็น

ข้อดีอีกอย่างของการให้ Claude เขียน plan คือ มันมักจะ ตั้งคำถามที่เราไม่ได้นึกถึง

เช่น:

Claude: "สำหรับ dark mode นี้ ถ้า user ใช้ system preference เป็น dark 
แต่กดเปลี่ยนเป็น light ในแอป แล้วเปิดใหม่ จะให้จำค่าที่กดไว้หรือ 
กลับไปตาม system?"

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

Anti-pattern: อย่าหยุด Plan กลางทาง

มีสิ่งที่ต้องระวังคือ ถ้าเราใช้ Hook (EP.6) หรือกฎต่างๆ ที่ บล็อคการทำงาน Claude กลางคัน ระหว่างที่มันกำลัง implement ตาม plan — มันจะทำให้ Claude สับสนและ "หลงลืม" ว่าตัวเองอยู่สเต็ปไหน

✅ ถูก: ตรวจสอบก่อน plan → ยืนยัน → ทำเสร็จทั้ง plan
❌ ผิด: กำลังทำอยู่ดีๆ บล็อคกลางคัน → Claude ต้องเริ่มใหม่

ลองทำดู!

ทดลองทำ 2 แบบ แล้วสังเกตผลต่าง

แบบที่ 1 (ไม่มี plan): พิมพ์ task ตรงๆ เลย เช่น "เพิ่ม loading spinner ให้ปุ่ม submit"

แบบที่ 2 (มี plan): พิมพ์ว่า "ก่อนทำ เขียน plan ก่อนนะ ว่าจะแก้ไฟล์ไหน ยังไงบ้าง รอ approve ก่อน"

แล้วดูว่า output ต่างกันไหม ส่วนใหญ่จะเห็นว่าแบบที่ 2 ตรงความต้องการมากกว่าอย่างเห็นได้ชัด

สรุป

Plan-First Workflow ไม่ใช่แค่ best practice มันคือ การแก้ปัญหาทางคณิตศาสตร์ ยิ่ง feature ซับซ้อน ยิ่งต้องการ plan ก่อนมากเท่านั้น

เพราะ AI บางทีมันทำก่อนค่อยคิด เหมือนโปรแกรมเมอร์ที่เขียนโค้ดก่อนค่อยคิดเช่นกัน

EP ถัดไป: Decision Logs บันทึกว่า "ทำไมถึงตัดสินใจแบบนี้" ไว้ใน docs เพื่อไม่ให้ต้องอธิบายซ้ำๆทุก session

ขอบคุณที่อ่านจนจบนะคะ ขอให้มีวันที่ดีค่าา <3

Tags: Claude Code, AI, Planning, Agentic AI, Developer Tools