Production Blueprint Prompt for AI Agent

Prompt สำหรับสั่ง Claude, GPT, Codex และ Coding Agent ให้สร้างระบบแบบ Production

เวลาใช้ AI ช่วยเขียนระบบ ปัญหาที่เจอบ่อยคือ AI มักเริ่มเขียน Code เร็วเกินไป

ทั้งที่ยังไม่ได้วาง

Design
User Flow
Screen
Architecture
Task
Development Rule

พอ Project ใหญ่ขึ้นก็เริ่มเกิดปัญหา เช่น

Design แต่ละหน้าไม่เหมือนกัน
Feature ทำไม่ครบ
AI เปลี่ยน Flow เอง
แก้ส่วนหนึ่งแล้วกระทบอีกส่วน
ใช้ Framework API เวอร์ชันเก่า
เพิ่ม Library โดยไม่จำเป็น
กลับมาทำต่อแล้ว Context หาย
Code ออกมาเหมือน Prototype มากกว่า Production

ผมเลยทำ Production Blueprint Prompt for AI Agent ขึ้นมา

แนวคิดคือ

ก่อนให้ AI เขียน Code ให้มันสร้าง Blueprint ของ Project ก่อน

โดยใช้ไฟล์หลัก 3 ไฟล์

text

AGENTS.md
design+screen+task.md
walkthrough.md

ระบบนี้ทำงานยังไง

Workflow จะประมาณนี้

text

Product Requirement
        ↓
Analyze Existing Project
        ↓
Check Framework / Library Version
        ↓
Read Documentation
        ↓
AGENTS.md
        ↓
design+screen+task.md
        ↓
Validate Screen & Task
        ↓
Implement
        ↓
Test
        ↓
Update Task Status
        ↓
walkthrough.md

แทนที่จะสั่ง AI แค่

text

สร้างระบบ Queue Management ให้หน่อย

เราจะบอกให้มันคิดและวางระบบก่อนว่า

text

ระบบมีหน้าอะไรบ้าง
แต่ละหน้ามี Component อะไร
ใช้ Data อะไร
User ทำ Action อะไรได้
มี State อะไรบ้าง
ใครมี Permission เข้าได้
ต้อง Implement อะไรก่อนหลัง

1. `AGENTS.md`

ไฟล์นี้ทำหน้าที่เป็น Rule หลักของ Project

AI Agent ทุกตัวที่เข้ามาทำงานควรอ่านไฟล์นี้ก่อน

เช่น

markdown

- ก่อนทำงานต้องอ่าน AGENTS.md
- ก่อนแก้ UI ต้องอ่าน design+screen+task.md
- ห้ามเปลี่ยน Design เอง
- Code ต้อง Production Ready
- ต้องรองรับ Responsive
- ต้องมี Loading / Empty / Error State
- UI ห้ามใช้ Emoji
- ใช้ Icon Library
- ห้ามเพิ่ม Dependency โดยไม่จำเป็น

ดังนั้นต่อให้วันหนึ่งเปลี่ยนจาก

text

Claude → GPT → Codex

Rule ของ Project ก็ยังเหมือนเดิม

2. `design+screen+task.md`

นี่คือไฟล์หลักของ Blueprint

ผมรวม

text

Design
Screen
Task

ไว้ในไฟล์เดียว

เพื่อให้ AI เห็นภาพของ Product ทั้งระบบก่อน Implement

Design

กำหนด UI/UX หลัก เช่น

markdown

## Design

Style:
- Clean SaaS
- Professional
- Minimal

Icons:
- Lucide Icons
- No Emoji

Layout:
- Desktop Sidebar
- Mobile Navigation

Responsive:
- Desktop
- Tablet
- Mobile

ทำให้ Agent ไม่ออกแบบใหม่ทุกครั้งที่สร้างหน้า

Screen Specification

แต่ละ Screen ควรบอกให้ครบว่า

text

Component
Data
Action
State
Permission
Responsive

ตัวอย่าง

markdown

## Screen: Queue Dashboard

Route:

/dashboard

Components:

- Sidebar
- Header
- Queue Summary
- Queue Table
- Queue Status
- Call Queue Button

Data:

- Queue Number
- Customer Name
- Service
- Status
- Waiting Time

Actions:

- Call Queue
- Skip Queue
- Cancel Queue
- Complete Queue

States:

Loading:
- Table Skeleton

Empty:
- Empty Queue State

Error:
- Retry State

Permission:
- Staff
- Admin

แบบนี้ AI จะไม่ได้สร้างแค่หน้า UI ที่ดูเหมือนเสร็จ

แต่มันต้องคิด Behavior ของหน้าด้วย

Production ต้องคิด State ให้ครบ

ระบบจริงไม่ได้มีแค่กรณีที่ทุกอย่างทำงานปกติ

ควรคิดถึง

text

Loading
Empty
Error
Permission
Validation
Disabled
Unauthorized
Not Found
Edge Case

ตัวอย่างง่าย ๆ

markdown

Loading:
Show Skeleton

Empty:
No queues available

Error:
Unable to load queues
Show Retry button

Permission:
Only Staff and Admin can access

Task Implementation

หลังจาก Screen ครบแล้วค่อยแตกเป็น Task

เช่น

markdown

## Phase 1 - Foundation

- [ ] Database
- [ ] Authentication
- [ ] Authorization
- [ ] Base Layout

## Phase 2 - Queue

- [ ] Queue Schema
- [ ] Create Queue API
- [ ] Queue List API
- [ ] Queue Dashboard
- [ ] Queue Display

## Phase 3 - Admin

- [ ] User Management
- [ ] Store Management
- [ ] Service Management

## Phase 4 - Production

- [ ] Logging
- [ ] Validation
- [ ] Rate Limiting
- [ ] Security Review
- [ ] Performance Review

AI ก็สามารถทำงานตาม Task ทีละส่วนได้

ถ้าจะเปลี่ยน Design ต้องบันทึกเหตุผล

อีก Rule ที่ผมมองว่าสำคัญมากคือ

AI ห้ามเปลี่ยน Design หรือ Flow เองแบบเงียบ ๆ

ถ้าจำเป็นต้องเพิ่มของที่ Design เดิมไม่มี เช่น

text

Confirmation Dialog
Additional Page
New API
New Flow

ต้อง Update design+screen+task.md

พร้อมเขียนว่า

markdown

## Design Change

Change:

เพิ่ม Confirmation Dialog ก่อน Cancel Queue

Reason:

ป้องกันการยกเลิก Queue โดยไม่ตั้งใจ

ทำให้เรารู้ว่า Project เปลี่ยนไปจาก Design เดิมเพราะอะไร

Framework Version ต้องตรวจของจริงก่อน

อีกปัญหาของ AI Coding คือบางครั้งมันเขียนจากความจำ

แต่ Framework เปลี่ยนไปแล้ว

ดังนั้นควรบังคับให้ Agent ตรวจ

text

package.json
lock file
config
installed version
existing code
official documentation

ก่อนเขียน Code

โดยยึด

text

Codebase
+
Installed Version
+
Version-specific Documentation

เป็น Source of Truth

ไม่ใช่ความจำของ Model

Walkthrough

หลังจากทำงานแต่ละ Task เสร็จ

ให้ AI Append ลง

text

walkthrough.md

เช่น

markdown

## 2026-08-09 14:30

Task:

Queue Dashboard

Changes:

- Added Queue Dashboard
- Added Queue Table
- Added Loading State
- Added Empty State

Files:

- app/dashboard/page.tsx
- components/queue-table.tsx

Testing:

- Tested Queue API
- Tested Responsive
- Tested Empty State

Result:

Passed

และที่สำคัญ

text

ห้ามลบข้อมูลเดิม
ห้ามเขียนทับ
Append เท่านั้น

ไฟล์นี้จึงกลายเป็น Development History ของ Project ไปด้วย

Copy Prompt

ด้านล่างคือ Prompt ตัวเต็ม

Copy ไปใช้กับ Claude Code, Codex, GPT, Cursor, Cline, Kilo Code หรือ Coding Agent อื่น ๆ ได้เลย

markdown

# Production Blueprint Prompt For AI Agent

ผมอยากทำระบบ **[ชื่อระบบ]** ให้ใช้งานจริงได้แบบ Production Scale

รายละเอียด Product:

- Product Name: [ชื่อ]
- Description: [ระบบนี้ทำอะไร]
- Target User: [ใครใช้งาน]
- Main Problem: [ปัญหาที่ต้องการแก้]
- Main Features: [Feature หลัก]
- User Roles: [User / Staff / Admin / อื่นๆ]
- Platform: [Web / Mobile / Desktop / API]
- Tech Stack: [ถ้ามี]
- Additional Requirements: [รายละเอียดเพิ่มเติม]

ก่อนเริ่ม Implement ให้สร้าง `design+screen+task.md` ไฟล์เดียว โดยต้องมี:

- Design และ UI/UX ของระบบ
- User Flow
- Screen ทุกหน้าที่จำเป็นแบบครบถ้วน
- แต่ละ Screen ต้องระบุ Component, Data, Action และ State ที่ต้องมี
- Responsive Behavior
- Loading / Empty / Error / Permission State
- Task สำหรับ Implement ทั้งระบบแบบเป็นขั้นตอน

สร้าง `AGENTS.md` เป็น Rule หลักของ Project โดยกำหนดว่า:

- ก่อนทำงานต้องอ่าน `AGENTS.md` และ Rule `.md` ที่เกี่ยวข้องก่อนเสมอ
- ก่อนทำหรือแก้ UI ต้องอ่าน `design+screen+task.md` ก่อน และทำให้ตรง Design
- หากจำเป็นต้องทำสิ่งที่อยู่นอกเหนือจาก Design เดิม ต้อง Update `design+screen+task.md` ก่อนหรือพร้อมกับการ Implement พร้อมระบุว่าเพิ่ม/เปลี่ยนอะไร และเหตุผลว่าทำไมจึงจำเป็น
- ห้ามเปลี่ยน Design, Flow, Screen หรือ Behavior เองโดยไม่มีเหตุผลและไม่มีการบันทึกไว้ใน `design+screen+task.md`
- Code และ Architecture ต้องเป็นมาตรฐาน Production รองรับ Scale, Security, Performance และ Maintainability
- ห้ามทำแบบ Demo, Prototype หรือลวกๆ
- UI ห้ามใช้ Emoji ให้ใช้ Icon Library แทน
- ต้องรองรับ Responsive, Loading, Empty, Error, Permission, Validation และ Edge Case ที่จำเป็น
- ห้ามแก้ส่วนที่ไม่เกี่ยวข้องกับ Task โดยไม่จำเป็น
- ทำงานตาม Task ใน `design+screen+task.md` และ Update สถานะเมื่อทำเสร็จ

## Framework & Library Rule

- ก่อนเขียน Code ต้องตรวจสอบ Framework, Library, SDK และ Version ที่ Project ใช้อยู่จริง
- ต้องอ่าน Documentation/Guide ที่ตรงกับ Version ปัจจุบันก่อน Implement ห้ามเขียนจากความจำอย่างเดียว
- ให้ยึด Codebase, Config, Installed Version และ Version-specific Docs เป็น Source of Truth
- ตรวจ Breaking Changes และ Deprecated API ก่อนใช้งาน
- ใช้ Pattern, Component และ Library ที่ Project มีอยู่แล้วก่อน
- ห้ามเพิ่ม Dependency ใหม่โดยไม่จำเป็น
- กฎนี้ใช้กับทุก Framework และ Library ในทุก Project

## Walkthrough Rule

- ทุกครั้งที่ทำงานเสร็จให้ Update `walkthrough.md`
- ห้ามลบหรือเขียนทับข้อมูลเดิม ให้ Append Entry ใหม่ต่อท้ายเท่านั้น
- ทุก Entry ต้องมีวันและเวลาที่ทำ
- ระบุ Task/Feature ที่ทำ
- ระบุสิ่งที่เปลี่ยน
- ระบุไฟล์ที่แก้
- ระบุวิธีทดสอบ
- ระบุผลลัพธ์
- หากมีการทำสิ่งที่นอกเหนือจาก Design เดิม ต้องระบุใน Walkthrough ด้วยว่าเปลี่ยนอะไร และอ้างอิงเหตุผลที่บันทึกไว้ใน `design+screen+task.md`

## ลำดับการทำงาน

1. วิเคราะห์ Product และ Existing Project
2. ตรวจ Framework / Library / SDK / Version ที่ Project ใช้จริง
3. อ่าน Documentation ที่ตรงกับ Version ปัจจุบัน
4. สร้างหรือ Update `AGENTS.md`
5. สร้างหรือ Update `design+screen+task.md`
6. ตรวจสอบว่า User Flow, Screen, State และ Task ครบก่อนเริ่ม Code
7. Implement ตาม Design และ Task
8. หากต้องทำเกิน Design ให้ Update Design พร้อมเหตุผลก่อนหรือพร้อมกับการ Implement
9. ทดสอบงานที่ทำ
10. Update Task Status
11. Append ผลงานลง `walkthrough.md`

วิธีใช้

แค่เปลี่ยนส่วนนี้

text

[ชื่อระบบ]
[ชื่อ]
[ระบบนี้ทำอะไร]
[ใครใช้งาน]
[ปัญหาที่ต้องการแก้]
[Feature หลัก]
[User / Staff / Admin]
[Web / Mobile / Desktop / API]
[Tech Stack]
[รายละเอียดเพิ่มเติม]

ให้ตรงกับ Project ของคุณ

ตัวอย่าง

markdown

Product Name: OpenQueue

Description:
ระบบจัดการคิวสำหรับร้านค้า ร้านอาหาร คลินิก และธุรกิจบริการ

Target User:
ร้านค้าขนาดเล็กถึงกลาง

Main Problem:
ต้องการระบบ Queue ที่เริ่มใช้งานได้ง่ายโดยไม่ต้องพัฒนาเอง

Main Features:
- Queue Management
- Customer Queue
- Staff Dashboard
- Queue Display
- Store Management
- Analytics

User Roles:
- Customer
- Staff
- Store Owner
- Admin

Platform:
Web

Tech Stack:
- Next.js
- PostgreSQL
- Prisma
- Tailwind CSS
- shadcn/ui

Additional Requirements:
- Multi Tenant
- Multi Store
- Responsive
- Production Scale

แล้วส่ง Prompt ทั้งหมดให้ Agent ได้เลย

ใช้กับอะไรได้บ้าง

แนวทางนี้ไม่ได้ล็อกกับ AI ตัวไหน

สามารถนำไปใช้กับ

text

Claude Code
OpenAI Codex
GPT
Cursor
GitHub Copilot
OpenCode
Cline
Kilo Code

หรือ Agent อื่นที่สามารถอ่านและแก้ไฟล์ใน Project ได้

สรุป

สิ่งที่ Production Blueprint พยายามแก้คือ

อย่าให้ AI ทำงานแบบ

text

Prompt
↓
Code

แต่ให้เปลี่ยนเป็น

text

Requirement
↓
Analyze
↓
Design
↓
Screen
↓
Task
↓
Code
↓
Test
↓
Document

หัวใจสำคัญคือ 3 ไฟล์

text

AGENTS.md
design+screen+task.md
walkthrough.md

ที่ช่วยเก็บทั้ง Rule, Design, Task และประวัติการพัฒนาไว้กับ Project

ทำให้ Coding Agent ไม่ได้เป็นแค่ AI ที่คอย Generate Code

แต่ทำงานใกล้เคียงกับ AI Software Engineering Agent ที่มี Process และเข้าใจ Project มากขึ้น

Production Blueprint Prompt for AI Agent

Prompt สำหรับสั่ง Claude, GPT, Codex และ Coding Agent ให้สร้างระบบแบบ Production

ระบบนี้ทำงานยังไง

1. AGENTS.md

2. design+screen+task.md

Design

Screen Specification

Production ต้องคิด State ให้ครบ

Task Implementation

ถ้าจะเปลี่ยน Design ต้องบันทึกเหตุผล

Framework Version ต้องตรวจของจริงก่อน

Walkthrough

Copy Prompt

วิธีใช้

ใช้กับอะไรได้บ้าง

สรุป

1. `AGENTS.md`

2. `design+screen+task.md`