การให้บริบทแก่ปัญญาประดิษฐ์
แบ่งปันไฟล์ เป้าหมาย และเทคโนโลยี เพื่อให้ปัญญาประดิษฐ์ทำงานสอดคล้องกับโครงการของคุณ
การให้บริบทแก่ปัญญาประดิษฐ์ เป็นบทเรียน Vibe Coding ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vibe Coding และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดบริบทจึงเปลี่ยนแปลงทุกอย่าง
พรอมต์เดียวกันอาจสร้างโค้ดที่แตกต่างกันอย่างมาก ขึ้นอยู่กับว่า AI รู้จักโครงการของคุณมากน้อยเพียงใด พรอมต์ที่ไม่มีบริบททำให้ AI ต้องเดาเฟรมเวิร์ก รูปแบบการเขียน หรือแม้แต่ชื่อไฟล์ของคุณ
เมื่อให้บริบท โค้ดก็สามารถนำไปใส่ในโครงการของคุณได้ทันที โดยใช้ข้อตกลงและรูปแบบเดียวกัน ไม่ต้องเขียนใหม่ บทเรียนนี้จะสอนวิธีป้อนข้อมูลพื้นฐานที่เหมาะสมให้ AI
บริบทสามประเภท
บริบทที่มีประโยชน์มีอยู่สามประเภท:
- บริบทของโครงการ — ชุดเทคโนโลยี เฟรมเวิร์ก และข้อตกลงในการเขียนโค้ด
- บริบทของโค้ด — ไฟล์และส่วนโค้ดจริงที่คุณกำลังใช้งาน
- บริบทของเป้าหมาย — เหตุผลเบื้องหลังงานนั้น
พรอมต์ที่ดีที่สุดจะผสานทั้งสามส่วนเข้าด้วยกัน เพื่อให้ AI สร้างสิ่งที่เข้ากับโครงการของคุณอย่างแท้จริง
บริบทของโครงการ: ชุดเทคโนโลยีของคุณ
บอก AI เสมอว่าคุณกำลังสร้างสิ่งต่าง ๆ ด้วยอะไร เช่น 'React กับ Tailwind' จะสร้างโค้ดที่แตกต่างจาก 'HTML และ CSS แบบพื้นฐาน' อย่างมาก การระบุชุดเทคโนโลยีช่วยป้องกันไม่ให้ AI นำเข้าไลบรารีที่คุณไม่มี
"This project uses React, TypeScript and Tailwind CSS.
We use functional components and hooks only — no class
components. Build a reusable <Avatar /> component that
shows a circular user image with a fallback initial."บริบทของโค้ด: แสดงไฟล์ของคุณ
การปรับปรุงพรอมต์ที่ได้ผลที่สุดคือการวางโค้ดจริงที่คุณกำลังใช้งานลงไป ตอนนี้ AI จะใช้ชื่อตัวแปร รูปแบบการเขียน และโครงสร้างเดิมของคุณ แทนที่จะสร้างสิ่งใหม่ขึ้นมาเอง
"Here's my current cart code:
let cart = [];
function addItem(name, price) {
cart.push({ name, price });
}
Add a function removeItem(name) that removes the first
matching item, and a total() function that sums the prices."เครื่องมือแก้ไขแบ่งปันบริบทโดยอัตโนมัติ
เครื่องมืออย่าง Cursor และ Claude Code สามารถอ่านไฟล์ที่เปิดอยู่และโครงสร้างโครงการให้คุณได้ ใน Cursor คุณสามารถติดแท็กไฟล์ด้วย @filename เพื่อดึงไฟล์เหล่านั้นเข้าไปในพรอมต์
นี่คือเหตุผลที่เครื่องมือแก้ไขที่สร้างมาเพื่อ AI โดยเฉพาะให้ความรู้สึกฉลาดกว่าแชตบอตทั่วไป เพราะเครื่องมือเหล่านี้รู้จักฐานโค้ดของคุณอยู่แล้ว
In Cursor's chat:
"Look at @cart.js and @checkout.js.
The total in checkout doesn't match the cart.
Find why and fix it."บริบทของเป้าหมาย: 'เหตุผลเบื้องหลัง'
การบอก AI ว่าเหตุใดคุณจึงทำบางอย่าง จะช่วยให้ AI ตัดสินใจได้ฉลาดขึ้น หาก AI รู้ว่าแอปนี้มีไว้สำหรับเด็ก ต้องทำงานแบบออฟไลน์ หรือต้องทำงานเร็วเป็นพิเศษ AI ก็จะปรับโค้ดให้เหมาะสม
"This is a flashcard app for young children, so the UI must
be large, colorful, and tappable with no small targets.
Build the answer-reveal button with that in mind."บริบทช่วยให้ AI เลียนแบบรูปแบบของคุณ
เมื่อคุณแสดงโค้ดที่มีอยู่ AI จะเลียนแบบข้อตกลงในการเขียนโค้ดของคุณ นี่คือตัวอย่างรูปแบบที่ AI จะคัดลอกหากคุณวางโค้ดนี้ให้ดู — สังเกตฟังก์ชันลูกศรและการตั้งชื่อ การขอให้สร้าง 'อีกแบบที่เหมือนอันนี้' จะช่วยให้ฐานโค้ดมีรูปแบบสอดคล้องกัน
ส่วนโค้ดนี้ทำงานได้ด้วยตัวเอง คุณจึงลองเรียกใช้เพื่อดูรูปแบบการทำงานได้
const formatPrice = (n) => '$' + n.toFixed(2);
const formatPercent = (n) => n.toFixed(0) + '%';
// Ask AI: "Add formatDate in this same arrow-function style."
console.log(formatPrice(12.5));
console.log(formatPercent(0.42 * 100));ไฟล์บริบทของโครงการ
เคล็ดลับสำหรับมืออาชีพ: เก็บไฟล์บริบทสั้น ๆ ที่ AI อ่านทุกครั้ง Cursor ใช้ .cursorrules และ Claude Code ใช้ CLAUDE.md ให้ระบุชุดเทคโนโลยี ข้อตกลง และกฎว่าควรทำหรือไม่ควรทำอะไรไว้ที่นั่นเพียงครั้งเดียว
จากนี้คุณก็ไม่ต้องพูดซ้ำในทุกพรอมต์
Example CLAUDE.md:
# Project Conventions
- Stack: Next.js + Tailwind
- Use TypeScript, no 'any'
- Components in /components, one per file
- Prefer small, pure functions
- Never add a dependency without askingบริบทที่มากเกินไปก็เป็นปัญหาได้
บริบทมีพลัง แต่ไม่ได้ไม่มีข้อเสีย การโยนไฟล์ที่ไม่เกี่ยวข้องกันสิบไฟล์ให้ AI จะทำให้ AI สับสนและมองไม่เห็นส่วนสำคัญ แบ่งปันเฉพาะสิ่งที่เกี่ยวข้องกับงานนี้ ไม่ใช่ทั้งโครงการของคุณ
ควรมี: ไฟล์ที่คุณกำลังแก้ ไฟล์ที่ไฟล์นั้นติดต่อด้วย และคำอธิบายชุดเทคโนโลยีหนึ่งบรรทัด
บริบทช่วยหยุดการแต่งข้อมูล
เมื่อ AI ขาดบริบท บางครั้ง AI จะแต่งขึ้นเองทั้งชื่อฟังก์ชัน ไฟล์ หรือส่วนเชื่อมต่อที่ไม่มีอยู่จริง ซึ่งเรียกว่าการหลอนของ AI การให้โค้ดจริงจะช่วยยึด AI ไว้กับข้อเท็จจริง
หาก AI ยังคงอ้างถึงสิ่งที่คุณไม่เคยเขียน นั่นเป็นสัญญาณว่า AI ต้องการบริบทมากขึ้น ไม่ใช่โมเดลที่ดีกว่า
Symptom of missing context:
AI: "Just call your existing saveUser() helper."
You: "...I don't have a saveUser() helper."
Fix: paste the real file so the AI sees what exists.พรอมต์ที่มีบริบทครบถ้วน
นี่คือการรวมทุกอย่างเข้าด้วยกัน: ชุดเทคโนโลยี โค้ดจริง และเป้าหมาย นี่คือพรอมต์ประเภทที่จะได้โค้ดพร้อมใช้งานจริงซึ่งเข้ากับโครงการตั้งแต่ครั้งแรก
"Stack: plain HTML/CSS/JS, single index.html. (PROJECT)
Here's my current toggle code:
const btn = document.querySelector('#theme');
btn.onclick = () => document.body.classList.toggle('dark'); (CODE)
Goal: I want the theme choice to persist after refresh, since
users hate re-toggling every visit. Add localStorage. (GOAL)"ตรวจสอบความเข้าใจอย่างรวดเร็ว
AI ยังคงแนะนำให้คุณเรียกใช้ฟังก์ชันและไฟล์ที่ไม่มีอยู่ในโครงการของคุณ สาเหตุและวิธีแก้ที่เป็นไปได้มากที่สุดคืออะไร
สรุป: ยึด AI ไว้กับโลกของคุณ
บริบทเปลี่ยนโค้ดทั่วไปให้เป็นโค้ดที่เข้ากับโครงการของคุณ ควรพิจารณาแบ่งปันสิ่งเหล่านี้เสมอ:
- บริบทของโครงการ — ชุดเทคโนโลยีและข้อตกลงของคุณ
- บริบทของโค้ด — ไฟล์จริง (ติดแท็กไฟล์เหล่านั้นใน Cursor/Claude Code)
- บริบทของเป้าหมาย — เหตุผลเบื้องหลังงาน
เก็บไฟล์ CLAUDE.md หรือ .cursorrules ไว้เพื่อไม่ต้องพูดซ้ำ และแบ่งปันเฉพาะสิ่งที่เกี่ยวข้อง ถัดไป: วิธีปรับปรุงซ้ำ โดยค่อย ๆ ขัดเกลาพรอมต์ทีละขั้นแทนการเริ่มต้นใหม่
เรียนรู้ JavaScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 25
- บทเรียน
- 100
คำถามที่พบบ่อย
บทเรียน “การให้บริบทแก่ปัญญาประดิษฐ์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การให้บริบทแก่ปัญญาประดิษฐ์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vibe Coding ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vibe Coding มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การให้บริบทแก่ปัญญาประดิษฐ์”
แบ่งปันไฟล์ เป้าหมาย และเทคโนโลยี เพื่อให้ปัญญาประดิษฐ์ทำงานสอดคล้องกับโครงการของคุณ คุณปฏิบัติ Vibe Coding ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vibe Coding หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vibe Coding บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การให้บริบทแก่ปัญญาประดิษฐ์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vibe Coding นี้ได้ไหม
ได้ บทเรียน Vibe Coding ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- องค์ประกอบของพรอมป์สร้างงานที่ดี
- การระบุรายละเอียดให้ชัดเจน
- การให้บริบทแก่ปัญญาประดิษฐ์
- การปรับปรุงพรอมป์เป็นลำดับ