Context-First Prompting

Context-First Prompting คืออะไร ทำไมถึงสำคัญ?

ลองนึกภาพว่าคุณกำลังสั่งงานเพื่อนให้ไปซื้อของ คุณคงไม่บอกแค่ว่า 'ไปซื้อของมาให้หน่อย' ใช่ไหมครับ? คุณต้องบอกให้ละเอียดว่า 'ไปซื้อนมสดรสจืด 1 กล่อง ที่เซเว่นหน้าปากซอยนะ' การให้ Context หรือบริบท ก็เหมือนกับการบอกข้อมูลพื้นฐานและรายละเอียดที่จำเป็นให้ AI เข้าใจสถานการณ์ก่อนที่เราจะสั่งงานจริง ๆ ครับ

ในโลกของการเขียนโค้ด การคุยกับ AI อย่าง Claude Code ก็คล้ายกันครับ Claude ไม่ได้รู้ทุกอย่างเกี่ยวกับโปรเจกต์ของเราโดยอัตโนมัติ การให้ Context ที่ดีจะช่วยให้ Claude เข้าใจว่าโปรเจกต์ของเราคืออะไร มีอะไรอยู่แล้วบ้าง และเราต้องการอะไรอย่างแท้จริง

ทำไมถึงสำคัญน่ะเหรอครับ? ก็เพราะมันช่วยให้ Claude สร้างโค้ดที่ตรงใจเราตั้งแต่แรก ลดเวลาที่เราต้องมานั่งแก้ไขงานไปมา และได้ผลลัพธ์ที่นำไปใช้งานได้จริงอย่างรวดเร็ว เหมือนกับเพื่อนที่ซื้อของมาให้ตรงตามที่เราต้องการเป๊ะ ๆ นั่นแหละครับ

ส่วนประกอบสำคัญของ Context ที่ดีมีอะไรบ้าง?

การให้ Context ที่ดีไม่ใช่แค่การบอกข้อมูลเยอะๆ แต่เป็นการบอกข้อมูลที่ 'ใช่' และ 'จำเป็น' ครับ ลองคิดถึงองค์ประกอบเหล่านี้เวลาคุณจะเขียน Prompt ให้ Claude:

1. โปรเจกต์นี้เกี่ยวกับอะไร (Stack/เทคโนโลยี): เหมือนบอกว่าเรากำลังสร้างบ้านแบบไหน? ใช้ไม้? ปูน? โครงสร้างเหล็ก? ในการเขียนโค้ดก็คือบอกว่าโปรเจกต์นี้ใช้เทคโนโลยีอะไรบ้าง เช่น React, TailwindCSS, Node.js, Python, Django เป็นต้น

2. ตอนนี้มีอะไรอยู่แล้ว (Existing components/files): เหมือนบอกว่าเรามีอิฐ, ปูน, เหล็กอยู่แล้วนะ ไม่ต้องไปหาซื้อใหม่ ในโค้ดก็คือบอกว่าเรามีไฟล์หรือ Component อะไรอยู่แล้วบ้าง เช่น 'เรามี component Button อยู่แล้วในโฟลเดอร์ components/ui' หรือ 'เรามีไฟล์ database.js ที่เชื่อมต่อกับ MongoDB แล้ว'

3. อยากได้ผลลัพธ์แบบไหน (Goal): เหมือนบอกว่าอยากได้ห้องนอน, ห้องน้ำ, หรือห้องครัว? ในโค้ดก็คือบอกว่าเราอยากให้ Claude สร้างอะไรให้ เช่น 'ช่วยสร้างฟอร์มสมัครสมาชิก', 'เขียนฟังก์ชันสำหรับดึงข้อมูลสินค้าจาก API'

4. มีข้อจำกัดอะไรบ้าง (Constraints): เหมือนบอกว่าห้องนอนต้องมีหน้าต่างหันไปทางทิศตะวันออก หรือมีงบประมาณจำกัด ในโค้ดก็คือบอกเงื่อนไขพิเศษ เช่น 'ต้องมี validation สำหรับอีเมลและรหัสผ่าน', 'ห้ามใช้ไลบรารีภายนอกเพิ่ม', 'ต้องรองรับการแสดงผลบนมือถือด้วย'

เปรียบเทียบ: สั่งงานแบบไหนได้งานตรงใจกว่ากัน?

เพื่อให้เห็นภาพชัดเจน ลองมาดูตัวอย่างการสั่งงานสองแบบกันครับ

❌ แบบไม่ดี: 'สร้างฟอร์ม login'

นี่เหมือนกับการสั่ง 'สร้างบ้าน' ลอยๆ ครับ Claude จะไม่รู้ว่าต้องใช้เทคโนโลยีอะไร ฟอร์มควรมีหน้าตาแบบไหน มีฟังก์ชันอะไรบ้าง สุดท้ายอาจจะได้โค้ดที่ไม่ตรงกับความต้องการของเราเลย และเราก็ต้องมานั่งแก้เยอะแยะ

✅ แบบดี (Context-First): 'โปรเจกต์นี้ใช้ React + TailwindCSS เรามี component Button อยู่แล้วใน components/ui ช่วยสร้างฟอร์ม login ที่ใช้ Button ตัวนั้น มี validation อีเมล/รหัสผ่าน และเรียก API ที่ /api/auth/login'

เห็นความแตกต่างไหมครับ? ในตัวอย่างที่ดี เราบอก Claude ครบทุกอย่าง เหมือนมีพิมพ์เขียวให้ Claude สร้างตาม มันรู้ว่าต้องใช้ React กับ TailwindCSS, ต้องใช้ Button ที่เรามีอยู่แล้ว, ต้องมีการตรวจสอบข้อมูล (validation) และต้องเชื่อมต่อกับ API ที่ไหน ผลลัพธ์ที่ได้ก็จะตรงใจเรามากกว่า และพร้อมใช้งานได้ทันที

ลงมือทำจริง: ลองเขียน Prompt แบบ Context-First ด้วยตัวเอง

ตอนนี้คุณเข้าใจแล้วว่า Context-First สำคัญยังไง ถึงเวลาลองลงมือทำเองแล้วครับ! ลองใช้โครงสร้าง Prompt ด้านล่างนี้เป็นแนวทาง แล้วเติมข้อมูลของโปรเจกต์ที่คุณอยากจะลองสร้างดู

โครงสร้างนี้จะช่วยให้คุณครอบคลุมข้อมูลสำคัญที่ Claude ต้องการครับ

1. เปิด Claude Code หรือเครื่องมือ AI ที่คุณใช้เขียนโค้ด
2. คัดลอก Prompt template นี้ไปวาง: `โปรเจกต์นี้ใช้ [stack] เรามี [สิ่งที่มีอยู่] ฉันอยากได้ [เป้าหมาย] โดยมีข้อจำกัดคือ [ข้อจำกัด] ช่วยทำให้หน่อย`
3. แทนที่ `[stack]` ด้วยเทคโนโลยีที่ใช้ เช่น `React + TypeScript`, `Node.js + Express`, `Python + Flask`
4. แทนที่ `[สิ่งที่มีอยู่]` ด้วยสิ่งที่โปรเจกต์คุณมีแล้ว เช่น `component Button ในโฟลเดอร์ components/ui`, `ไฟล์ database config ที่เชื่อมต่อ MySQL แล้ว`, `ไลบรารี axios สำหรับเรียก API`
5. แทนที่ `[เป้าหมาย]` ด้วยสิ่งที่คุณอยากให้ AI สร้าง เช่น `ฟอร์มสมัครสมาชิก`, `ฟังก์ชันสำหรับดึงข้อมูลสินค้าจาก API`, `หน้าแสดงผลข้อมูลผู้ใช้`
6. แทนที่ `[ข้อจำกัด]` ด้วยเงื่อนไขพิเศษ เช่น `ต้องรองรับภาษาไทย`, `ห้ามใช้ไลบรารีภายนอกเพิ่ม`, `ต้องมี validation ของข้อมูล`, `โค้ดต้องอยู่ในไฟล์เดียว`
7. กดส่ง Prompt แล้วดูผลลัพธ์ที่ได้ Claude จะพยายามสร้างโค้ดตามที่คุณต้องการ

เคล็ดลับ: เก็บ Context ยาวๆ ไว้ในไฟล์ CLAUDE.md

บางครั้ง Context ของโปรเจกต์เราอาจจะยาวมาก มีรายละเอียดเยอะแยะไปหมด และเราก็ต้องใช้ Context ชุดเดิมนี้ซ้ำๆ บ่อยๆ ในการคุยกับ Claude Code

เพื่อไม่ให้เราต้องมานั่งพิมพ์ Context ยาวๆ ซ้ำแล้วซ้ำอีก มีเคล็ดลับง่ายๆ ครับ คือการสร้างไฟล์ชื่อ CLAUDE.md (หรือชื่ออื่นที่คุณกำหนดเอง) ไว้ในโปรเจกต์ของคุณ

ภายในไฟล์ CLAUDE.md นี้ คุณสามารถเขียนรายละเอียดทั้งหมดเกี่ยวกับโปรเจกต์ของคุณลงไปได้เลยครับ เช่น เทคโนโลยีที่ใช้, โครงสร้างโปรเจกต์, ไลบรารีหลักๆ ที่ใช้, หรือแม้แต่แนวทางการเขียนโค้ดที่ต้องการ (coding style guide) เมื่อคุณใช้งาน Claude Code มันจะสามารถอ่านและทำความเข้าใจบริบทจากไฟล์นี้ได้โดยอัตโนมัติ ทำให้คุณไม่ต้องพิมพ์ซ้ำทุกครั้งที่ต้องการสั่งงานครับ