คู่มือ Vibe Coding v1.0: คู่มือฉบับสมบูรณ์สำหรับการพัฒนาซอฟต์แวร์ด้วย AI

เอกสารนี้เป็นคู่มือที่ออกแบบมาเพื่อช่วยเหลือไม่เพียงแต่นักเขียนโค้ดที่มีประสบการณ์ แต่ยังรวมถึงผู้ที่ไม่ใช่นักเขียนโค้ดในการพัฒนาแอป/บริการโดยใช้ 'Vibe Coding' นักพัฒนาระดับจูเนียร์ที่มีประสบการณ์การเขียนโค้ดน้อยและนักวางแผนก็สามารถสร้างผลลัพธ์ที่เสถียรได้โดยทำตามขั้นตอนเหล่านี้

หลักการสำคัญ: แทนที่จะให้ AI เขียนโค้ดทันที ควรให้ AI สร้างเอกสาร (Design.md, ToDo.md) ก่อน แล้วค่อยเริ่มพัฒนา

0. สรุปภาพรวมขั้นตอน

[1] ขอสร้าง Concept.md

↓

[2] สร้าง Design.md (เอกสารอ้างอิง UI/UX)

↓

[3] กำหนด Tech Stack (อ้างอิงแผนผังการตัดสินใจด้านล่าง)

↓

[4] สร้าง ToDo.md (สเปกเทคนิคระดับโมดูล + แผนการพัฒนา)

↓

[5] สร้าง GitHub Repository และ commit ครั้งแรก

↓

[6] ส่งคำอธิบายแอป + Design.md + ToDo.md ให้ Claude Code หรือ Grok Build เพื่อเริ่มพัฒนา

↓

[7] ทำซ้ำ: พัฒนาทีละโมดูล → ทดสอบ → commit/push

1. Concept.md — พรอมต์เพื่อเริ่มต้นด้วยไอเดียง่ายๆ

เริ่มต้นด้วยการอธิบายแอปหรือบริการที่คุณต้องการสร้างสั้นๆ 2-3 บรรทัดตามที่คิดไว้ ในรูปแบบ: "ฉันต้องการสร้างอะไรแบบนี้; กรุณาสร้างเอกสาร Concept.md ที่ระบุขั้นตอนและวิธีการในการนำไปใช้งาน"

ดาวน์โหลดเอกสารที่สร้างขึ้นและบันทึกเป็น Concept.md

2. Design.md — สร้างเอกสารอ้างอิง UI/Design ก่อน

หากแอปมี UI ควรเขียน Design.md ก่อน กล่าวคือ หากมีบริการหรือแอปที่คุณต้องการอ้างอิง หรือหากคุณรู้วิธีออกแบบ UI ด้วยตัวเองอยู่แล้ว คุณสามารถขอโดยการให้รูปภาพของดีไซน์ที่ทำงานใน Figma เป็นต้น

วิธีการ

• เลือก เว็บไซต์ที่ใช้งานจริง หนึ่งเว็บไซต์ที่คุณชอบ (เช่น linear.app, stripe.com, toss.im เป็นต้น)
• สั่ง Claude หรือ Grok ให้ "วิเคราะห์ โครงสร้างเลย์เอาต์ จานสี การพิมพ์ ระยะขอบ/ระยะห่าง และสไตล์ของคอมโพเนนต์ ของเว็บไซต์นั้น และจัดระเบียบเป็น Design.md"

ตัวอย่างพรอมต์

วิเคราะห์ดีไซน์ของ https://linear.app และเขียนเอกสาร Design.md คุณต้องรวมรายการต่อไปนี้: 1. โครงสร้างเลย์เอาต์โดยรวม (ตำแหน่ง Header/Sidebar/Body/Footer) 2. จานสี (สีหลัก, สีรอง, สีพื้นหลัง, สีข้อความ ในรหัส HEX) 3. การพิมพ์ (ประเภทฟอนต์, ระบบขนาด, น้ำหนัก) 4. กฎระยะขอบและระยะห่าง (สเกลระยะห่าง) 5. สไตล์สำหรับคอมโพเนนต์หลัก เช่น ปุ่ม การ์ด และฟอร์มอินพุต 6. การรองรับโหมดมืดและการแมปสี

เคล็ดลับ

• หากคุณมีเซนส์ด้านดีไซน์ เนื่องจากเนื้อหา Design.md ที่สร้างขึ้นทั้งหมดถูกอธิบายด้วยภาษาธรรมชาติ คุณสามารถอ่านและ แก้ไข/ปรับแต่งโดยตรง ในทิศทางที่คุณต้องการ เอกสารนี้จะกลายเป็นมาตรฐานสำหรับการนำ UI ไปใช้ทั้งหมดในภายหลัง
• หากคุณแค่บอกว่า "ทำให้เหมือนเว็บไซต์นี้" ผลลัพธ์จะแตกต่างกันทุกครั้ง คุณต้อง ยึดติดกับเอกสาร เพื่อรักษาความสอดคล้อง

2. แผนผังคำแนะนำการตัดสินใจ Tech Stack

กำหนดสแต็ก ก่อน ตามประเภทของบริการที่คุณกำลังพยายามสร้าง

หลักการเซิร์ฟเวอร์ (Backend) ทั่วไป

• ต้องสามารถ ติดตั้งและรันโดยตรงจาก CLI ในสภาพแวดล้อมท้องถิ่นใดๆ
• ภาษา/รันไทม์ควรเป็น Node.js หรือ Python
• ใช้เครื่องมือที่ผ่านการตรวจสอบแล้วว่าสามารถปรับใช้และรองรับได้อย่างเสถียรบนทุกระบบปฏิบัติการสำหรับแพ็คเกจ/สภาพแวดล้อมการทำงาน:
• Python → uv
• Node.js → npm

เกณฑ์การเลือกฐานข้อมูล

คำแนะนำพรอมต์โดยละเอียด (หากคุณมีความรู้ด้านการพัฒนา)

โปรเจกต์นี้เป็นเว็บแอป กำหนดค่า Frontend ด้วย React และควรสามารถทดสอบได้ทันทีด้วย npm run dev ในเครื่อง โดยมีโครงสร้างที่สามารถปรับใช้ได้อย่างเสถียร กำหนดค่า Backend ด้วย Node.js และเนื่องจากจำเป็นต้องใช้ฐานข้อมูลเชิงสัมพันธ์ ให้ใช้ MariaDB รวมสคริปต์ตั้งค่าที่สามารถติดตั้ง/รันโดยตรงผ่าน CLI ในสภาพแวดล้อมการพัฒนาท้องถิ่น ตรวจสอบเนื้อหานี้และเอกสาร Concept.md เพื่อเขียนเอกสาร ToDo.md สำหรับการนำเทคนิคไปใช้อย่างละเอียด

• ดำเนินการโดยแนบเอกสาร Concept.md ไปกับพรอมต์นี้ หรือโดยการคัดลอกและวางเนื้อหาของเอกสาร Concept.md

แต่ถ้าฉันไม่ใช่นักพัฒนาที่ไม่รู้เรื่องข้างต้นล่ะ?

เพียงให้คำแนะนำแบบบูรณาการเช่นนี้:

ฉันไม่แน่ใจว่าจะรันโปรเจกต์นี้อย่างไร ดังนั้นโปรดแนะนำวิธีการ แนะนำว่าเว็บแอปดีกว่า วิธีการติดตั้ง OS ตรวจสอบได้ง่ายกว่าระหว่างการพัฒนา หรือการสร้างเป็นแอปมือถือดีกว่า หากสามารถแสดงในเว็บเบราว์เซอร์ได้ ให้กำหนดค่า Frontend ด้วย React หากจำเป็นต้องให้บริการเป็นแอปมือถือ ให้กำหนดค่า Frontend ด้วย Flutter หากเป็นวิธีการที่ต้องติดตั้งในเครื่อง ให้กำหนดค่าโดยใช้ npm หรือ uv ซึ่งสามารถปรับใช้และติดตั้งได้ง่ายผ่าน CLI ตั้งค่าโครงสร้างที่สามารถปรับใช้ได้อย่างเสถียร ฉันไม่แน่ใจว่าจำเป็นต้องมี Backend หรือไม่ แต่ให้ตั้งค่าโครงสร้างที่เสถียรสำหรับ Node.js หรือการปรับใช้/การติดตั้ง หากจำเป็นต้องใช้ DB ให้ใช้ MariaDB หากต้องการแบบเชิงสัมพันธ์ และหากเป็นแค่ key-value DB ให้ใช้ AWS DynamoDB ในเครื่องสำหรับการพัฒนาและกำหนดค่าให้ปรับใช้กับ AWS ได้ง่าย หากเป็นรูปแบบที่สามารถติดตั้ง/รันโดยตรงผ่าน CLI ในสภาพแวดล้อมการพัฒนาท้องถิ่น ให้รวมสคริปต์ตั้งค่าทั้งหมด แนะนำสแต็กเทคนิคโดยละเอียดดังกล่าว ตรวจสอบเนื้อหานี้และเอกสาร Concept.md และเขียนเอกสาร ToDo.md สำหรับการนำเทคนิคไปใช้อย่างละเอียด

3. Admin Dashboard — จำเป็นหากมีเซิร์ฟเวอร์

คุณอาจไม่รู้ว่าเป็นบริการที่มีเซิร์ฟเวอร์หรือไม่ แต่โดยทั่วไปแล้วควรสร้างขึ้นเพื่อให้ นักพัฒนาสามารถเข้าใจสถานะการทำงานและความคืบหน้าของแอปทั้งหมดได้ด้วยตนเอง

• โปรเจกต์ที่มีเซิร์ฟเวอร์ควรรวม การใช้งานแดชบอร์ด Admin เป็นค่าเริ่มต้น
• รายการขั้นต่ำที่ควรรวมในแดชบอร์ด:
• การตรวจสอบสถานะเซิร์ฟเวอร์
• สถานะข้อมูลสำคัญ (เมตริกหลัก เช่น จำนวนสมาชิก จำนวนเคสที่ดำเนินการ ฯลฯ)
• ข้อผิดพลาด/บันทึกล่าสุด
• ความคืบหน้าของงานหลัก (batch, queue ฯลฯ)

ตัวอย่างพรอมต์

หากบริการนี้รวมเซิร์ฟเวอร์ ให้รวมแดชบอร์ดผู้ดูแลระบบในแผนการพัฒนา แดชบอร์ดควรอนุญาตให้ตรวจสอบสถานะเซิร์ฟเวอร์ เมตริกหลัก และบันทึก/ข้อผิดพลาดล่าสุด ตั้งค่าบัญชีผู้ดูแลระบบเริ่มต้นเป็น 'admin' พร้อมรหัสผ่าน '12345' และรวมความสามารถในการเปลี่ยนรหัสผ่านในแดชบอร์ดผู้ดูแลระบบ ตรวจสอบ ToDo.md และรวมสิ่งนี้ในแผนการพัฒนาหากเห็นว่าจำเป็น

4. การสรุป ToDo.md — แผนการพัฒนาระดับโมดูล

พื้นฐานของการเขียนโปรแกรมคือการแยกส่วน หากคุณเพิ่มเนื้อหาลงใน ToDo.md เพื่อแบ่งย่อยเป็นโมดูลก่อนเขียนโค้ด จะสามารถสร้างสถาปัตยกรรมที่ดีสำหรับการบำรุงรักษาในอนาคตได้

ตัวอย่างพรอมต์

ตรวจสอบเอกสาร ToDo.md และยืนยันว่าเขียนได้ดีตามคำแนะนำด้านล่างหรือไม่ และแก้ไข/เพิ่มเติมส่วนที่ขาด ข้อกำหนดของ ToDo.md: 1. ออกแบบทั้งระบบให้เป็นโมดูลาร์ด้วยการออกแบบเชิงวัตถุ 2. ระบุบทบาท อินพุต/เอาต์พุต และโครงสร้างข้อมูลของแต่ละโมดูลอย่างชัดเจนเพื่อให้แน่ใจว่ามีการห่อหุ้มสูงสุด 3. สร้างลำดับการดำเนินการเป็นรายการช่องทำเครื่องหมาย (เริ่มจากโมดูลที่ไม่มี dependencies) 4. รวมการออกแบบสคีมา DB 5. อธิบายว่าเมื่อใดและอย่างไรที่ผู้ที่ไม่ใช่เทคนิคสามารถทดสอบได้ง่าย

รายการที่ต้องตรวจสอบใน ToDo.md ที่เสร็จสมบูรณ์:

1. ภาพรวมโปรเจกต์ (หนึ่งย่อหน้า)
2. Tech Stack ที่ยืนยันแล้ว (ผลลัพธ์ของแผนผังการตัดสินใจในขั้นตอนที่ 2)
3. รายการโมดูลและสเปกเทคนิคโดยละเอียดสำหรับแต่ละโมดูล (ผู้ที่ไม่ใช่เทคนิคอาจเข้าใจยาก)
4. ชื่อโมดูลและบทบาท
5. อินพุต/เอาต์พุต (API endpoints และรูปแบบคำขอ/ตอบกลับ)
6. โครงสร้างข้อมูลที่ใช้ / การออกแบบตาราง DB (หรือ collection)
7. ความสัมพันธ์ dependencies กับโมดูลอื่นๆ
8. ลำดับการดำเนินการ (ในรูปแบบช่องทำเครื่องหมาย ตามลำดับ dependency)
9. ตรวจสอบว่าแต่ละวิธีการทดสอบเขียนในระดับที่ฉันเข้าใจได้

สำคัญ

• คุณไม่จำเป็นต้องอ่านและตรวจสอบ ToDo.md ที่สร้างขึ้นด้วยตัวเอง แม้ว่าจะดูเหมือนว่าสิ่งต่างๆ จะเป็นไปด้วยดีหากคุณเตรียมตัวอย่างสมบูรณ์แบบ แต่แกนหลักของ Vibe Coding คือกระบวนการสร้างผลลัพธ์ก่อนแล้วค่อยๆ แก้ไขเพื่อให้ได้สิ่งที่คุณต้องการ—นั่นคือส่วนที่มีค่าที่สุดและสนุกที่สุด

ส่วนปฏิบัติ: การตั้งค่าสภาพแวดล้อม → GitHub → เริ่มการพัฒนา Claude Code

เขียนขึ้นเพื่อให้แม้แต่ผู้ที่ติดตั้งเครื่องมือพัฒนาเป็นครั้งแรกก็สามารถทำตามได้

• อย่างไรก็ตาม หากดูซับซ้อนเกินไปและคุณไม่รู้ว่าทำไมต้องใช้และรู้สึกเบื่อหน่าย โปรดไปฟังบรรยายฟรีที่ลิงก์ด้านล่างก่อน

https://nomadcoders.co/git-for-beginners

5. การเตรียมสภาพแวดล้อมการพัฒนา (ติดตั้งแค่ 2 อย่าง)

เราจะติดตั้งสองสิ่ง

และคุณต้องมี บัญชี GitHub สมัครฟรีที่ https://github.com (ยืนยันอีเมลให้สมบูรณ์) การใช้ Claude Code หรือ Grok Build ต้องมี แผนชำระเงิน Claude (Pro/Max/Team) หรือบัญชีชำระเงิน Grok

5-1. 🪟 ขั้นตอนการติดตั้งสำหรับผู้ใช้ Windows

① ติดตั้ง Git

1. ไปที่ https://git-scm.com/download/win ในเบราว์เซอร์ → ดาวน์โหลดจะเริ่มโดยอัตโนมัติ
2. รันโปรแกรมติดตั้งที่ดาวน์โหลดมา
3. ตัวเลือกการติดตั้งมากมายปรากฏขึ้น แค่คลิก "Next" โดยใช้ค่าเริ่มต้นทั้งหมด
4. อย่างไรก็ตาม เมื่อหน้าจอ "Choosing the default editor" ปรากฏขึ้น ควรเลือก "Use Visual Studio Code as Git's default editor" (หากคุณยังไม่ได้ติดตั้ง VS Code ค่าเริ่มต้นก็ใช้ได้)
5. ตรวจสอบการติดตั้ง: รัน PowerShell จากเมนู Start แล้วพิมพ์:

git --version

→ หากเวอร์ชันเช่น git version 2.xx.x ปรากฏขึ้น แสดงว่าสำเร็จ หากไม่ ให้ลองปิดแล้วเปิด PowerShell ใหม่

② ติดตั้ง VS Code

1. ไปที่ https://code.visualstudio.com → คลิก Download for Windows
2. รันโปรแกรมติดตั้ง → คลิก "Next" ต่อไปเรื่อยๆ อย่างไรก็ตาม ให้เลือกสองรายการนี้ ในหน้าจอตัวเลือก:
3. "Add to PATH"
4. "Add 'Open with Code' action to file/directory context menus"
5. รัน VS Code หลังการติดตั้ง หากมีการแจ้งเตือน การติดตั้งชุดภาษาเกาหลี ปรากฏขึ้นบนหน้าจอแรก คุณสามารถติดตั้งได้

5-2. 🍎 ขั้นตอนการติดตั้งสำหรับผู้ใช้ Mac

① ติดตั้ง Git

1. เปิด Terminal: Cmd + Space → พิมพ์ "Terminal" → Enter
2. พิมพ์:

git --version

1. หากเวอร์ชันปรากฏขึ้นทันที แสดงว่าติดตั้งแล้ว → ไปที่ ② หากป๊อปอัปคำแนะนำการติดตั้ง ("Command Line Developer Tools...") ปรากฏขึ้น ให้คลิก "Install" และรอ (นี่คือการติดตั้ง Git)
2. ตรวจสอบอีกครั้งด้วย git --version หลังจากเสร็จสิ้น

② ติดตั้ง VS Code

1. ไปที่ https://code.visualstudio.com → คลิก Download for macOS
2. แตกไฟล์ที่ดาวน์โหลดมาและ ลาก Visual Studio Code.app ไปยังโฟลเดอร์ Applications (สำคัญ! อย่าใช้โดยตรงจากโฟลเดอร์ Downloads)
3. รัน VS Code จาก Applications

5-3. (ทั่วไป) การลงทะเบียนชื่อของฉันใน Git — เฉพาะครั้งแรก

การตั้งค่านี้เพื่อบันทึกว่า "ใครทำงาน" ใน commits ใน PowerShell (Windows) หรือ Terminal (Mac):

git config --global user.name "ชื่อของคุณ" git config --global user.email "อีเมล-github-ของคุณ@example.com"

ป้อน อีเมลเดียวกับที่คุณใช้สมัคร GitHub

6. การสร้าง GitHub Repository และเชื่อมต่อกับเครื่องพีซีของฉันด้วย VS Code

ให้คิดว่า "Repository" เป็น โฟลเดอร์คลาวด์ ที่เก็บหนึ่งโปรเจกต์ ขั้นตอนคือ: สร้าง repository ว่างบนเว็บไซต์ GitHub → โคลนไปยังเครื่องพีซีของฉันด้วย VS Code → อัปโหลดเอกสารการวางแผน → เชื่อมต่อ repository นั้นกับ Claude Code web

6-1. การสร้าง Repository บนเว็บไซต์ GitHub

1. เข้าสู่ระบบ https://github.com
2. คลิก ปุ่ม + ที่มุมขวาบน → New repository
3. ป้อนดังนี้:
4. Repository name: ชื่อโปรเจกต์ (ภาษาอังกฤษ ใช้ยัติภังค์แทนช่องว่าง เช่น my-first-app)
5. เลือก Private (โปรเจกต์ของบริษัทต้องเป็น Private!)
6. ทำเครื่องหมายที่ช่อง "Add a README file" ✅ ← ผู้เริ่มต้นต้องทำเครื่องหมายนี้ สิ่งนี้จะทำให้ขั้นตอนถัดไป (clone) ง่ายขึ้น
7. คลิก Create repository
8. ในหน้า repository ที่สร้างขึ้น ให้คลิกปุ่ม <> Code สีเขียว → คัดลอก ที่อยู่ในแท็บ HTTPS

6-2. การโคลนไปยังเครื่องพีซีของฉันด้วย VS Code

1. รัน VS Code
2. Ctrl + Shift + P (Cmd + Shift + P บน Mac) → Command palette เปิดขึ้น
3. พิมพ์ clone → เลือก "Git: Clone"
4. วางที่อยู่ repository ที่คัดลอกแล้วกด Enter
5. คุณยังสามารถเลือก "Clone from GitHub" → หากเบราว์เซอร์เปิดขึ้นและขอ การเข้าสู่ระบบ/อนุญาต GitHub ให้อนุมัติ (เฉพาะครั้งแรก)
6. เลือกตำแหน่งที่จะบันทึกโปรเจกต์ (เช่น ควรสร้างโฟลเดอร์ Documents/Projects)
7. เมื่อการโคลนเสร็จสิ้น การแจ้งเตือน "Open" จะปรากฏขึ้นที่มุมขวาล่าง → คลิก
8. หากคุณเห็น README.md ใน File Explorer ทางซ้าย แสดงว่าสำเร็จ! 🎉 โฟลเดอร์นี้ตอนนี้คือ โฟลเดอร์ทำงานที่เชื่อมต่อระหว่างเครื่องพีซีของฉันและ GitHub

6-3. การอัปโหลดเอกสารการวางแผน — Concept.md, Design.md, ToDo.md

Claude Code web สามารถอ่านไฟล์ภายใน repository ได้ ดังนั้น การใส่เอกสารการวางแผนใน repository ก็เหมือนกับ "การอัปโหลดเอกสาร"

1. คลิกขวาในพื้นที่ว่างใน File Explorer ของ VS Code → New File → ป้อนชื่อ Concept.md
2. วางคำอธิบายแอปที่คุณเตรียมไว้และบันทึก (Ctrl+S / Cmd+S)
3. สร้างและแทรกไฟล์ Design.md (หากมี UI) และ ToDo.md ในลักษณะเดียวกัน
4. ตอนนี้อัปโหลดไปยัง GitHub (commit & push) — โดยใช้วิธีการใน 6-4

6-4. การ Commit และ Push ใน VS Code — ใช้เมาส์เท่านั้น

1. เมื่อคุณบันทึกไฟล์ ป้ายตัวเลขจะปรากฏบน ไอคอนรูปกิ่ง (Source Control) ทางซ้ายของ VS Code
2. คลิกไอคอนนั้น → คุณจะเห็นรายการไฟล์ที่เปลี่ยนแปลง
3. ใน ช่องป้อนข้อความ ที่ด้านบน ให้เขียนหนึ่งบรรทัดเกี่ยวกับสิ่งที่คุณทำ (เช่น เพิ่มเอกสารการวางแผน)
4. คลิกปุ่ม ✔ Commit → บันทึกเสร็จสิ้นบนเครื่องพีซีของฉัน
5. หากป๊อปอัป "There are no staged changes" ปรากฏขึ้น ให้คลิก "Yes" เพื่อ commit ทุกอย่าง
6. จากนั้นคลิกปุ่ม Sync Changes → อัปโหลด (push) ไปยัง GitHub เสร็จสิ้น
7. รีเฟรช repository บนเว็บไซต์ GitHub เพื่อดู Concept.md ที่คุณเพิ่งอัปโหลด ตอนนี้ Claude Code web ก็สามารถอ่านเอกสารนี้ได้เช่นกัน

การ Pull (ดาวน์โหลด) ก็ทำได้ในหน้าจอเดียวกัน: หากมีการเปลี่ยนแปลงที่ Claude อัปโหลดในคลาวด์ ปุ่ม Sync Changes จะจัดการทั้งการดาวน์โหลดและอัปโหลด

7. การเชื่อมต่อ Repository กับ Claude Code Web และเริ่มพัฒนา

ตอนนี้เปิด Claude Code web ในเบราว์เซอร์ของคุณและเชื่อมต่อ GitHub repository ที่คุณเพิ่งสร้าง

7-1. การเชื่อมต่อ Claude Code Web ↔ GitHub Repository (เฉพาะครั้งแรก)

1. เข้าถึง https://claude.ai/code → เข้าสู่ระบบด้วยบัญชี Claude ของคุณ
2. เมื่อคุณเข้าถึงครั้งแรก คำแนะนำ Connect GitHub จะปรากฏขึ้น → ทำตามคำแนะนำ
3. คุณจะถูกย้ายไปยังหน้า GitHub และหน้าจอ การติดตั้ง Claude GitHub App จะปรากฏขึ้น:
4. เลือกบัญชี GitHub ของคุณ (หรือองค์กร)
5. เลือกขอบเขตการเข้าถึง: แนะนำให้เลือก "Only select repositories" และระบุ repository ที่สร้างใน 6-1
6. คลิก Install / Authorize
7. การกลับไปยัง Claude จะทำให้การเชื่อมต่อเสร็จสมบูรณ์ หากหน้าจอการตั้งค่าสภาพแวดล้อมปรากฏขึ้น ให้ปล่อยไว้ที่ Default
8. เมื่อเริ่มเซสชันใหม่ (task) ให้เลือก repository ของคุณจาก รายการเลือก repository ป้อนพรอมต์ และงานจะเริ่มขึ้น

7-2. การทำความเข้าใจวิธีการทำงานของ Claude Code และ Grok Build Web (สำคัญ!)

Claude Code และ Grok Build web ทำงานบน คอมพิวเตอร์เสมือนในคลาวด์ ไม่ใช่บนเครื่องพีซีของฉัน ขั้นตอนคือ:

① ฉันป้อนพรอมต์

↓

② Claude Code/Grok Build โคลน repository ของฉันในคลาวด์และเขียนโค้ด

↓

③ ผลักดันผลลัพธ์ไปยัง GitHub เป็น "task branch ใหม่"

↓

④ ฉันดึง branch นั้นไปยังเครื่องพีซีของฉันเพื่อทดสอบ หรือตรวจสอบการเปลี่ยนแปลงผ่าน Pull Request บน GitHub

↓

⑤ หากฉันพอใจ ให้รวมเข้ากับ main

• เนื่องจากมันอัปโหลดผลลัพธ์ไปยัง branch ใหม่เสมอโดยไม่แตะต้อง main branch โดยตรง จึงไม่ต้องกังวลว่าโค้ดที่มีอยู่จะเสียหาย (Grok Build ทำงานบน main branch แต่สามารถยกเลิกได้ ดังนั้นไม่ต้องกังวลเกี่ยวกับข้อผิดพลาด)

7-4. พรอมต์เริ่มการพัฒนา

เมื่อเอกสารสามฉบับ (Concept.md / Design.md / ToDo.md) พร้อมใน main ในที่สุดก็เริ่มพัฒนาในเซสชันใหม่

พัฒนาโปรเจกต์นี้ ดำเนินการตามเอกสารต่อไปนี้ใน repository: - Concept.md: คำอธิบายของแอปที่จะสร้าง - ToDo.md: แผนการพัฒนาระดับโมดูล (ดำเนินการตามลำดับนี้) - Design.md: มาตรฐานการออกแบบ (UI ทั้งหมดเป็นไปตามเอกสารนี้)

กฎการทำงาน: 1. ดำเนินการทีละโมดูลตามลำดับการดำเนินการใน ToDo.md 2. เมื่อหน่วยที่ทดสอบได้เสร็จสมบูรณ์ ให้แจ้งให้ฉันทราบวิธีรัน/ทดสอบบนเครื่องพีซีท้องถิ่นของฉันผ่าน README หรือการตอบกลับ เนื่องจากฉันไม่ใช่นักพัฒนา ให้อธิบายให้ดีเหมือนสอนผู้เริ่มต้น 3. ทำเครื่องหมายรายการที่เสร็จสมบูรณ์ด้วยเครื่องหมายถูกใน ToDo.md 4. บอกชื่อ task branch ให้ฉันและ push ด้วยข้อความ commit ที่จำง่าย 5. หากมีส่วนที่ไม่ชัดเจน อย่าเดา ให้ถามฉัน

7-5. วงจรที่ทำซ้ำระหว่างการพัฒนา

① Web Claude Code ใช้หนึ่งโมดูลใน task branch → push

↓

② ดึง task branch นั้นไปยังเครื่องพีซีของฉัน (VS Code) และรัน/ทดสอบโดยตรง

↓

③ หากมีปัญหา → คัดลอกข้อความแสดงข้อผิดพลาดทั้งหมดและวางลงในเซสชันเว็บ

หากไม่มีปัญหา → "ดี ดำเนินการพัฒนาต่อไป"

↓

กลับไปที่ ① สำหรับโมดูลถัดไป

↓

④ เมื่อฟีเจอร์ทั้งหมดเสร็จสมบูรณ์และผ่านการทดสอบ

→ รวมเข้ากับ branch main ผ่าน Pull Request

→ การปรับใช้จะขึ้นอยู่กับ main เสมอ

8. Branch — การทดสอบใน Task Branches และรวมเข้ากับ main เพื่อปรับใช้

8-1. Branch คืออะไร?

• main branch = การแสดงผลิตภัณฑ์สำเร็จรูป ที่ทำงานได้ดีเสมอ การปรับใช้จะขึ้นอยู่กับ main เสมอ
• Task branch (เช่น claude/feature-login) = ไซต์ก่อสร้าง ที่สร้างขึ้นโดยการคัดลอก main คุณสามารถสร้างและทำลายสิ่งต่างๆ ที่นี่ได้มากเท่าที่ต้องการ main ปลอดภัย

Claude Code web จะสร้าง task branch ใหม่เสมอและผลักดันผลลัพธ์ ดังนั้น มีเพียงสามสิ่งที่คุณต้องรู้:

1. วิธี ตรวจสอบว่า branch ใด ที่โฟลเดอร์ของฉันกำลังใช้อยู่
2. วิธี ดึง task branch ที่ Claude ผลักดันไปยังเครื่องพีซีของฉันเพื่อทดสอบ
3. วิธี รวมเข้ากับ main และปรับใช้ เมื่อเสร็จสิ้น

8-2. การตรวจสอบว่าคุณกำลังใช้ Branch ใด

• ดูที่ แถบสถานะที่ด้านล่างซ้ายสุดของหน้าจอ VS Code ชื่อ branch จะแสดงถัดจากไอคอน branch (เช่น main หรือ claude/feature-login)

8-3. การดึง Task Branches ที่สร้างโดย Claude Code/Grok Build ไปยังเครื่องพีซีของฉันเพื่อทดสอบ

เมื่อ Web Claude Code บอกว่า "ฉันผลักดันไปยัง branch OO" ให้นำ branch นั้นไปยังเครื่องพีซีของฉันเพื่อทดสอบ Grok Build มีปุ่ม 'Push to Github' ที่มุมขวาบนของหน้าจอเว็บ ดังนั้นให้กดปุ่มนี้เพื่อ push

ด้วย VS Code (ใช้เมาส์เท่านั้น):

1. คลิก ชื่อ branch ที่ด้านล่างซ้าย → รายการ branch เปิดขึ้น
2. หากมองไม่เห็น branch ใหม่ ให้รัน ... เมนู → Fetch ในแท็บ Source Control แล้วลองอีกครั้ง
3. เลือก task branch ของ Claude ที่ขึ้นต้นด้วย origin/claude/... จากรายการ → โฟลเดอร์ของคุณเปลี่ยนเป็นสถานะ branch นั้น

8-4. การรวมเข้ากับ main เมื่อเสร็จสิ้น — Pull Request

หากฟีเจอร์เสร็จสมบูรณ์และผ่านการทดสอบใน task branch ให้รวมเข้ากับ main ผ่าน Pull Request (PR) บนเว็บไซต์ GitHub

1. เข้าถึง repository ของคุณบน GitHub → คลิกแท็บ Pull requests
2. คลิก PR ที่ Claude สร้าง หากไม่มี New pull request → base: main, compare: เลือก task branch → Create pull request
3. คลิก Merge pull request → Confirm merge → สะท้อนใน main!
4. อัปเดต main บนเครื่องพีซีของคุณให้เป็นเวอร์ชันล่าสุด:
5. คลิก branch ที่ด้านล่างซ้ายของ VS Code → เลือก main → Sync Changes ในแท็บ Source Control

9. เคล็ดลับการเขียนพรอมต์ (ทั่วไป)

คุณภาพของ Vibe Coding เป็นสัดส่วนกับคุณภาพของพรอมต์

1. ระบุสิ่งที่ไม่ควรทำ — "อย่าแก้ไขโค้ดโดยพลการจนกว่าฉันจะอนุมัติ" "อย่าเพิ่มไลบรารี ใช้เฉพาะสแต็กที่มีอยู่"
2. ทีละโมดูล — คุณภาพลดลงหากคุณขอทั้งแอปในพรอมต์เดียว ให้ขอเป็นชิ้นเล็กๆ ตามลำดับ ToDo.md
3. วางข้อผิดพลาดตามที่เป็น — อย่าสรุปข้อความแสดงข้อผิดพลาด ให้คัดลอกเอาต์พุตเทอร์มินัลทั้งหมด
4. ให้ Claude ถามหากไม่ชัดเจน — รวม "หากมีส่วนที่ไม่ชัดเจน อย่าเดา ให้ถามฉัน" ในพรอมต์
5. สื่อสารตามเอกสาร — "อย่างที่ฉันบอกไปก่อนหน้านี้" ❌ → "ตามดีไซน์ใน Design.md" ✅ เอกสารใน repository มีความเสถียรมากกว่าหน่วยความจำการสนทนามาก

จบ

ดังที่ Morpheus ผู้เป็นตำนานกล่าวไว้ว่า:

"Neo. ฉันทำได้แค่ชี้ประตูให้คุณเห็น คุณต่างหากที่ต้องเดินผ่านมันไป"