Master Template สำหรับ Vibe Code บน Cursor — รัน 1 ไฟล์ ได้ระบบตรวจคุณภาพ 360° ครบ 143 ข้อ

สั่ง AI ทำ 10 อย่าง — AI ทำครบแค่ 6 อย่าง ที่เหลืออีก 4 ข้อข้ามไปเฉยๆ ไม่มีใครตรวจ ไม่มีใครรู้ จนเปิดหน้าเว็บดูแล้วพัง

นี่คือปัญหาที่เจอซ้ำแล้วซ้ำอีกตลอด 2 เดือนที่ใช้ Cursor ทำ Vibe Code — AI บอกว่า "เสร็จแล้ว" แต่ไม่มีระบบตรวจว่า "เสร็จจริง" หรือ "แค่บอกว่าเสร็จ" ผลคือเสีย token ไปกับการแก้งานซ้ำ มากกว่า 60% ของ token ทั้งหมด

ระบบ Master Template นี้แก้ปัญหานั้น — รัน 1 คำสั่ง ตรวจ 143 ข้อ ครอบคลุม 8 ด้าน ตั้งแต่ code quality ยันการ deploy ขึ้น production พร้อม Lark alert แจ้งเตือนอัตโนมัติ ใช้ซ้ำได้กับ ทุก project ที่จะสร้างต่อไป

ทำไม Vibe Coder ต้องมี "ระบบ" ไม่ใช่แค่ "เครื่องมือ"?

Vibe Code ที่ดีต้องมีระบบตรวจคุณภาพรอบด้าน — เพราะ AI ทำงานเก่งแต่ ไม่เคยตรวจงานตัวเอง ถ้าไม่มีกรอบบังคับ AI จะข้าม prompt ที่ยาว ไม่ตรวจ server ก่อนส่งงาน และบอกว่า "เสร็จ" ทั้งที่ทำได้แค่ 60%

ปัญหาที่เจอจริงตลอด 2 เดือนมีอยู่ 3 เรื่องหลัก

ปัญหาแรก — AI อ่าน prompt ยาวแล้วข้ามบางข้อ สั่งให้ทำ 8 ข้อ AI อ่านถึงข้อ 5 แล้วเริ่ม "สรุป" เอง ข้อ 6-8 หายไปเงียบๆ ไม่บอก ไม่ถาม พอถามกลับก็ยอมรับว่า "ลืม" — แต่ตอนนั้น token เสียไปแล้ว 50K+

ปัญหาสอง — ส่งงานไม่ตรวจ server AI แก้ code เสร็จ บอกว่า "เสร็จแล้ว ลองทดสอบได้เลย" — แต่พอเปิดหน้าเว็บกลับ error 500 เพราะ server ไม่ได้ restart หลังแก้ code เสียเวลา debug อีก 30 นาที

ปัญหาสาม — ไม่มี checklist บังคับ ทุกอย่างอยู่ในหัว ลืมตรวจ security บ้าง ลืมตรวจ contrast บ้าง พอ deploy ไป production แล้วลูกค้าเจอ bug ก่อน

ปัญหาไม่ได้อยู่ที่ AI ทำไม่ได้ — แต่อยู่ที่ไม่มีระบบตรวจว่า "ทำเสร็จจริง" หรือ "แค่บอกว่าเสร็จ"

ทั้งระบบทำงานร่วมกันยังไง? — สถาปัตยกรรม 360°

ระบบนี้ประกอบด้วย 4 ชั้นทำงานร่วมกัน — ตั้งแต่กฎเหล็กสำหรับ AI ไปจนถึง CI/CD pipeline ที่ตรวจอัตโนมัติทุก push ทั้งหมดเชื่อมกันผ่าน Memory Bank ที่ให้ AI จำบริบทข้ามเซสชันได้

แต่ละชั้นทำหน้าที่เฉพาะ ไม่ซ้อนทับกัน

ชั้นที่ 1 — กฎเหล็ก 12 ข้อ อยู่ในไฟล์ .cursorrules บังคับให้ AI ต้อง verify ก่อนรายงาน ต้องตรวจ server ก่อนส่งงาน ต้องทำ Prompt Review ก่อนเริ่ม ต้องป้องกัน secret leak ห้ามเดา path ต้องอ่านจริง ห้ามทำทั้งระบบในรอบเดียว — ทุกข้อเกิดจากปัญหาจริงที่เจอแล้วแก้แล้ว

ชั้นที่ 2 — 5 Modular Rules แยกเป็นไฟล์ .mdc ใน .cursor/rules/ — quality.mdc ตรวจคุณภาพ workflow.mdc จัด workflow รายวัน security.mdc ป้องกัน secret devops.mdc จัดการ deploy model-guide.mdc เลือก AI model ที่เหมาะสม แต่ละไฟล์ทำงานอัตโนมัติตามบริบท ไม่ต้องสั่ง

ชั้นที่ 3 — Memory Bank (ระบบความจำข้ามเซสชัน) ให้ AI อ่าน 3 ไฟล์ก่อนเริ่มงาน — projectbrief.md บอกเป้าหมายโปรเจกต์ techContext.md บอก tech stack และ architecture activeContext.md บอกสถานะล่าสุด (งานที่เสร็จ งานที่ค้าง ปัญหาที่เจอ) ทำให้ AI ไม่ต้องถามซ้ำทุก session

ชั้นที่ 4 — Automation Scripts + CI/CD 17 scripts ทำงานร่วมกับ GitLab CI/CD pipeline — ตั้งแต่ secret scan ก่อน commit ไปจนถึง quality gate ก่อน deploy ทั้งหมดคำนวณเป็น Quality Score 100 คะแนน

8 Phases ตรวจ 143 ข้อ — ครอบคลุมอะไรบ้าง?

ระบบตรวจคุณภาพแบ่งเป็น 8 ด้าน ครบตั้งแต่ขั้นวางแผนไปจนถึงขั้น monitor หลัง deploy — แต่ละ phase มี checklist items ที่ถ่วงน้ำหนักตามความรุนแรง (critical=3, high=2, medium=1, low=0.5)

ไม่ต้องจำทั้ง 143 ข้อ — ระบบจัดการให้ แค่ต้องเข้าใจว่าแต่ละ phase ดูแลเรื่องอะไร

Phase 1: Planning — วางแผนก่อนเริ่ม code ตรวจว่ากำหนด browser support matrix หรือยัง ตั้ง performance budget หรือยัง วาง SEO strategy หรือยัง กำหนด security baseline ตาม OWASP Top 10 หรือยัง ฟังดูเหมือนงานเยอะ แต่ AI ช่วยกำหนดให้ได้ใน 5 นาที

Phase 2: Development — ตรวจคุณภาพ code มากที่สุด 21 ข้อ ตั้งแต่ ESLint 0 errors, TypeScript strict mode, unit test coverage ≥80%, ไม่มี console.log หลุด, ไม่มี unused dependencies, ไม่มี circular imports, ไม่มี secrets ใน code — ทั้งหมด automate ได้ด้วย CLI tools

Phase 3: Functional Testing — ตรวจว่าระบบทำงานจริง ตั้งแต่ E2E happy paths, form validation, authentication flow, RBAC (ระบบสิทธิ์), CRUD operations, search/filter, pagination, file upload, payment flow, email notifications — test ข้าม 4 browsers (Chrome, Firefox, Safari, Edge)

143 ข้อไม่ได้ต้องทำด้วยมือทุกข้อ — ประมาณ 45 ข้อ automate ได้ 100%, อีก 25 ข้อ semi-auto, 40 ข้อใช้ AI ช่วยตรวจ, เหลือแค่ 33 ข้อที่ต้องทำเอง

Phase 4: Performance — Lighthouse ≥90, LCP <2.5 วินาที, bundle size <500KB, load test 100 users พร้อมกัน, API response <200ms — ตัวเลขที่วัดได้จริง ไม่ใช่แค่ "เร็วดี"

Phase 5: Security — OWASP ZAP scan 0 critical, ทดสอบ SQL injection, XSS, CSRF protection, Security headers ครบ (HSTS, CSP, X-Frame-Options), SSL Grade A+, secret scan 0 leaks — ข้อนี้สำคัญมากสำหรับ SaaS ที่รับข้อมูลลูกค้า

Phase 6: Accessibility — axe DevTools 0 critical, WAVE 0 errors, keyboard navigation ใช้ได้, color contrast ≥4.5:1, alt text ครบทุกรูป, touch target ≥44px — ทำให้ทุกคนใช้เว็บได้

Phase 7: SEO & Standards — Lighthouse SEO ≥90, title tag unique <60 chars, meta description <160 chars, Open Graph tags ครบ, sitemap.xml, structured data JSON-LD, HTML validation 0 errors — ไม่ทำ SEO ตั้งแต่ต้น แก้ทีหลังยากกว่า 5 เท่า

Phase 8: Deploy & Monitor — production build 0 errors, env vars ครบ, database migration applied, SSL valid, smoke test ทุก core feature, Sentry error monitoring, UptimeRobot green, rollback plan พร้อม — phase สุดท้ายก่อนไป production

4 Roles ทำงานร่วมกันยังไง? — แบ่งหน้าที่ชัด

ระบบแบ่งการตรวจสอบเป็น 4 บทบาท แต่ละบทบาทมี scripts เฉพาะทาง — เหมือนมีทีม QA 4 คนทำงานให้ แต่ทั้งหมดเป็น automation ไม่ต้องจ้างใคร

ทั้ง 4 Roles ทำงานอัตโนมัติ — ไม่ต้องจำว่าต้องรัน script ไหน เมื่อไหร่ ระบบจะ trigger เองตาม event ที่เกิดขึ้น

Quality Score 100 คะแนน — Dashboard วัดผลยังไง?

ทุกครั้งที่รัน quality-gate.sh ระบบจะคำนวณ Quality Score จาก 7 หมวด รวม 100 คะแนน — เกณฑ์ผ่านคือ 85% (ซึ่งสูงกว่ามาตรฐานทั่วไปที่ตั้งไว้ 60-70%) เป้าหมายคือ 98% ถึง WOW

ตั้งเกณฑ์ไว้ที่ 85% ไม่ใช่ 60% เพราะ 60% หมายถึง "ยังมี bug อีก 40%" — ไม่ยอมรับได้สำหรับ SaaS ที่รับเงินลูกค้า

คะแนนแต่ละหมวดมีวิธีวัดชัดเจน

Security 5 ชั้น กับ Lark Alert — ปลอดภัยแค่ไหน?

ระบบป้องกัน secret leak ด้วย 5 ชั้นซ้อนกัน — ถ้าชั้นแรกพลาดยังมีชั้นถัดไปจับได้ เหมือนกำแพงเมืองที่มี 5 ชั้น เจาะชั้นแรกได้ยังเหลืออีก 4 ชั้น

Secret patterns ที่ระบบจับได้ ครอบคลุม API key ของทุก provider หลัก

• sk-or-* — OpenRouter API key
• sk-ant-* — Anthropic (Claude) API key
• sk-* — OpenAI API key
• ghp_* — GitHub Personal Access Token
• glpat-* — GitLab Personal Access Token

Lark Alert Integration — เมื่อระบบเจอปัญหา จะแจ้งเตือนไป Lark Chat อัตโนมัติ แบ่งเป็น 4 ระดับ

Lark webhook ตั้งค่าครั้งเดียว หลังจากนั้นทุก script จะส่ง alert เองเมื่อมี event สำคัญ

Quality Gate — หัวใจของระบบทำงานยังไง?

Quality Gate คือ "ด่านตรวจ" ที่ต้องผ่านก่อนส่งงาน — ประกอบด้วย 5 เงื่อนไข ถ้าข้อใดข้อหนึ่งไม่ผ่าน = ห้าม deploy ต้องแก้ก่อน

สั่งรันได้ด้วยคำสั่งเดียว

# ตรวจทุกอย่าง
bash scripts/quality-gate.sh

# ตรวจแบบเต็ม (รวม Lighthouse, pa11y)
bash scripts/quality-gate.sh --full

# ตรวจ + ส่ง Lark alert
bash scripts/quality-gate.sh --notify

# หรือใช้ Makefile
make quality

ผลลัพธ์จะแสดงเป็น dashboard ใน terminal — เห็นคะแนนทุกหมวด เห็น issues ที่ต้องแก้ เห็น grade ทันที ถ้าต่ำกว่า 85% จะส่ง Lark alert อัตโนมัติ

ระบบที่ดีไม่ใช่ระบบที่ไม่มี bug — แต่คือระบบที่จับ bug ได้ก่อนถึงมือลูกค้า

Dashboard 360° — หน้าเว็บตรวจสุขภาพ Project มีอะไรบ้าง?

Enterprise 360 QC-QA Dashboard คือหน้าเว็บที่รวมทุกอย่างไว้ที่เดียว — ไม่ต้องรัน command line ก็ดู score ได้ ไม่ต้องจำว่าตรวจอะไรแล้วบ้าง ระบบจำให้ทั้งหมดผ่าน localStorage

ฟีเจอร์หลักที่น่าสนใจ

Prompt Generator คือส่วนที่ทรงพลังที่สุด — กดปุ่มเดียว ระบบจะสร้าง prompt ที่ปรับแต่งให้เหมาะกับ project มีบทบาท (role), ขอบเขต (scope), tools ที่ต้องติดตั้ง, items ที่ต้องตรวจ ครบทั้งหมด copy ไปวางใน Cursor (Cmd+L) ได้ทันที

Prompt มี 4 แบบ ใช้ตามสถานการณ์

• Phase-based: ตรวจทั้ง phase เช่น "ตรวจ Phase 5 Security ทั้งหมด"
• Tool-based: ใช้เครื่องมือเฉพาะ เช่น "รัน Lighthouse ตรวจ Performance"
• Item-based: ตรวจ 1 ข้อเฉพาะ เช่น "ตรวจ CSRF protection"
• Full Audit: Mega prompt ตรวจทั้ง project — แบ่งตาม severity: Critical → High → Medium → Low

[ROLE] Senior QC Engineer
[PROJECT] Next.js 14 + TypeScript + Supabase
[SCOPE] Audit only — ห้ามแก้ code เอง
[DEV URL] http://localhost:3003
[PROD URL] https://www.idea2level.com

[CHECK] Phase 5: Security — 20 items
  □ 5.1 OWASP ZAP scan — 0 high/critical
  □ 5.2 SQL injection test
  □ 5.3 XSS test
  □ 5.18 Secrets scan — 0 leaks
  ... (ระบบจะแสดงเฉพาะข้อที่ยังไม่ผ่าน)

[OUTPUT FORMAT]
## ZONE 1 — แก้แล้วเสี่ยง (backup ก่อน)
| # | ปัญหา | ทำไมเสี่ยง | วิธีแก้ | Effort |

## ZONE 2 — แก้ได้เลย (ไม่กระทบระบบ)
| # | ปัญหา | วิธีแก้ | ผลที่ได้ | Effort |

## Score: ก่อน XX% → หลัง XX%

Zone System ช่วยจัดลำดับการแก้ไข — Zone 1 คืองานที่แก้แล้วอาจมีผลกระทบ (เช่น แก้ database schema, เปลี่ยน auth flow) ต้อง backup/test staging ก่อน ส่วน Zone 2 คืองานที่แก้ได้เลย (เช่น เพิ่ม meta tags, แก้ alt text) ไม่กระทบระบบ

ย้ายไป Project ใหม่ได้ทันที — ทำยังไง?

ระบบทั้งหมดออกแบบมาให้ copy ไปใช้กับ project ใหม่ ได้ใน 30 วินาที — รัน project-init.sh แล้วปรับชื่อ project กับ config เล็กน้อย ทุกอย่างพร้อมใช้

# สร้าง project ใหม่ชื่อ "MyApp"
bash scripts/project-init.sh MyApp --path ~/Projects

# ได้โครงสร้างนี้ทันที:
MyApp/
├── .cursorrules           # 12 กฎเหล็กสำหรับ AI
├── AGENTS.md              # Agent Mode instructions
├── .cursor/
│   ├── rules/             # 5 modular rules (.mdc)
│   └── memory/            # Memory Bank (3 ไฟล์)
├── scripts/               # 17 automation scripts
├── .gitlab-ci.yml         # CI/CD pipeline
├── Makefile               # Command shortcuts
├── .env.example           # Template สำหรับกรอก
└── .git/hooks/pre-commit  # Secret protection hook

ไม่ต้องจำว่าต้อง copy ไฟล์อะไรบ้าง ไม่ต้องตั้งค่า git hooks เอง ไม่ต้องสร้าง CI/CD pipeline ใหม่ — ทุกอย่างมาพร้อมกัน

สร้าง project ใหม่ทุกครั้ง ไม่ต้องเริ่มจากศูนย์ — rules, scripts, CI/CD, Memory Bank พร้อมตั้งแต่ commit แรก

Makefile ทำให้ไม่ต้องจำคำสั่งยาว

make setup          # ตั้งค่าโปรเจกต์ใหม่
make check          # ตรวจทุกอย่าง (env, security, quality)
make quality        # Quality Gate 360°
make deploy         # Deploy ไป VPS
make deploy-dry     # ทดสอบ deploy (ไม่เปลี่ยนอะไรจริง)
make health         # ตรวจ server status
make report         # สรุป session + อัปเดต activeContext
make help           # แสดงคำสั่งทั้งหมด

เริ่มใช้งานวันนี้ได้ยังไง?

ตั้งค่าครั้งเดียว ใช้ได้ตลอดชีพ — ขั้นตอนมีแค่ 5 ข้อ AI ทำให้เกือบทั้งหมด เหลือแค่กรอก API keys

รวมเวลาตั้งค่า: ไม่เกิน 20 นาที — ประหยัดเวลาที่ต้อง debug + แก้งานซ้ำได้เดือนละ 20+ ชั่วโมง

ตรวจ Quality Gate ก่อนส่งงาน:

1. อ่าน prompt ที่สั่งไปทั้งหมด — ลิสต์ทุกข้อ
2. ระบุแต่ละข้อว่าทำได้กี่ % พร้อมเหตุผลถ้าไม่ครบ
3. รัน bash scripts/quality-gate.sh แสดงผล
4. ตรวจว่า server ที่กำลังใช้ยังทำงานได้ (curl health check)
5. ถ้ามีข้อใดไม่ผ่าน — แก้ก่อนบอกว่าเสร็จ

แสดงผลเป็นตาราง:
| ข้อที่สั่ง | สถานะ | % | หมายเหตุ |

สิ่งที่น่าสนใจที่สุดคือ — ระบบนี้ไม่ได้ตรวจแค่ code แต่ตรวจ "ตัว AI เอง" ว่าทำงานครบตาม prompt หรือเปล่า เหมือนมี QA คอยดูแล AI อีกชั้น

CI/CD Pipeline — ตรวจซ้ำอัตโนมัติทุก Push

นอกจาก quality-gate.sh ที่รันด้วยมือ ยังมี GitLab CI/CD pipeline ที่ตรวจอัตโนมัติทุกครั้งที่ push code — ไม่ต้องจำ ไม่ต้องสั่ง

Deploy stage เป็น manual trigger — ไม่ deploy อัตโนมัติ ต้องกดอนุมัติก่อน เพราะ production ต้องมีคนตัดสินใจ ไม่ใช่ปล่อยให้ automation ตัดสินใจเอง

อัปเดตล่าสุด: มีนาคม 2026

Tags: #VibeCoding #Cursor #QualityAssurance #Automation #SaaS #DevOps #CICD #MasterTemplate #AI #WebDevelopment #QualityGate #EnterpriseQA