เขียน prompt สั่ง AI สร้างเว็บยังไงให้ได้ตรงใจ พร้อมโครง prompt 5 ส่วนที่ใช้ได้ทันที

prompt ที่ทำให้ AI สร้างเว็บได้ตรงใจต้องบอกให้ครบ 5 อย่าง คือ ใครเป็นคนใช้ ใช้แล้วทำอะไรได้ทีละขั้น ข้อมูลเก็บไว้ที่ไหน หน้าตาเป็นแบบไหน และอะไรที่ยังไม่ต้องทำในรอบนี้ เขียนเป็นภาษาไทยธรรมดาได้เลย ไม่ต้องรู้ศัพท์เทคนิคเยอะ แต่ต้องเจาะจงจนคนที่ไม่เคยคุยกับเรามาก่อนอ่านแล้วนึกภาพออกตรงกัน และควรสั่งทีละส่วนแทนการสั่งทั้งเว็บในข้อความเดียว

คนที่เพิ่งเริ่มใช้ Claude Code, Codex หรือ Cursor มักคิดว่าผลลัพธ์ไม่ถูกใจเพราะเลือกเครื่องมือผิด แต่หลายครั้งต้นเหตุอยู่ที่ข้อความแรกที่เราพิมพ์ลงไป บทความนี้รวมโครง prompt ที่หยิบไปใช้ได้ทันที ตัวอย่างการปรับ prompt จากกว้างเป็นเจาะจง และวิธีฝึกจำกัดขอบเขตงานโดยดูจากผลงานจริงในทำเนียบแอปเทพ ซึ่งตอนนี้มีผลงานฝีมือคนไทย 2393 รายการ

ทำไมสั่งสั้น ๆ แล้วได้เว็บไม่ตรงใจ

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

ผลคือได้เว็บที่ทำงานได้ แต่ไม่ใช่เว็บที่เราอยากได้ จากนั้นต้องไล่แก้ทีละจุด บางจุดแก้แล้วกระทบจุดอื่นจนงานยืดออกไปเรื่อย ๆ การเขียน prompt ให้ละเอียดตั้งแต่ต้นจึงประหยัดเวลากว่ามาก

วิธีคิดที่ช่วยได้คือ ให้มองว่า AI เป็น developer ฝีมือดีที่เพิ่งเข้าทีมวันแรก เขาเขียน code ได้ทุกแบบ แต่ยังไม่รู้อะไรเกี่ยวกับธุรกิจ ลูกค้า หรือนิสัยการทำงานของเราเลย สิ่งที่เราต้องเขียนลงใน prompt ก็คือสิ่งเดียวกับที่เราจะเล่าให้พนักงานใหม่คนนั้นฟัง

โครง prompt 5 ส่วนที่ควรมีทุกครั้ง

ไม่ว่าจะสร้างเว็บแบบไหน ลองเขียนให้ครบ 5 ส่วนตามตารางนี้ แต่ละส่วนเขียนแค่ 1 ถึง 3 ประโยคก็พอ

ส่วนที่คนข้ามบ่อยที่สุดคือข้อ 5 ทั้งที่สำคัญไม่แพ้ข้ออื่น เพราะ AI มักขยันเกินคำสั่ง ถ้าไม่ได้บอกว่าอะไรยังไม่ต้องทำ เราอาจได้ระบบสมาชิก หน้า dashboard หรือ feature อื่นแถมมาโดยไม่ได้ขอ ซึ่งทำให้ code ใหญ่ขึ้น ตรวจยากขึ้น และมีจุดให้เกิด bug มากขึ้น

ตัวอย่าง prompt ที่ประกอบครบทั้ง 5 ส่วน

เป้าหมาย: สร้างเว็บจองคิวร้านตัดผมสำหรับลูกค้าที่เปิดจากมือถือ
ขั้นตอน: ลูกค้าเลือกช่าง เลือกวันและเวลาที่ยังว่าง กรอกชื่อกับเบอร์โทร กดยืนยัน แล้วเห็นหน้าสรุปการจอง
ข้อมูล: เก็บรายการจองไว้ใน database มีหน้าสำหรับเจ้าของร้านดูคิวของแต่ละวัน
หน้าตา: ภาษาไทยทั้งหมด พื้นสีอ่อน ปุ่มใหญ่ อ่านง่ายบนจอเล็ก
ขอบเขต: ยังไม่ต้องมีระบบชำระเงินและระบบสมาชิก
ก่อนลงมือ: สรุปแผนเป็นข้อ ๆ และถามสิ่งที่ยังไม่ชัดเจนก่อน ยังไม่ต้องเขียน code

บรรทัดสุดท้ายคือตัวช่วยที่ได้ผลมาก การขอให้ AI สรุปแผนและถามกลับก่อนลงมือ ทำให้เราเห็นว่า AI เข้าใจตรงกับเราหรือไม่ตั้งแต่ยังไม่มี code สักบรรทัด ถ้าแผนผิดก็แก้ด้วยการพิมพ์ตอบไม่กี่ประโยค ไม่ต้องรื้องานทีหลัง

ถ้ายังไม่รู้ว่าควรใช้เทคโนโลยีอะไร

ไม่จำเป็นต้องระบุชื่อ framework หรือ database ถ้าเราไม่รู้จักจริง ให้บอกข้อจำกัดของเราแทน เช่น ดูแลเว็บคนเดียว อยากให้ค่าใช้จ่ายรายเดือนต่ำ หรือคนในทีมต้องเปิดดูข้อมูลได้เอง แล้วขอให้ AI เสนอมา 2 ทางเลือกพร้อมข้อดีข้อเสีย จากนั้นเราค่อยเป็นคนเลือก วิธีนี้ดีกว่าการเดาชื่อเทคโนโลยีที่เคยได้ยินผ่านหูมาใส่ลงใน prompt

เทียบ prompt แบบกว้างกับแบบเจาะจง

สังเกตว่า prompt แบบเจาะจงไม่ได้ใช้ศัพท์ยากขึ้นเลย แค่ตอบคำถามว่า ที่ไหน อะไร และแค่ไหน ให้ครบ

ฝึกจำกัดขอบเขตจากผลงานจริง

เราไม่รู้ว่าเจ้าของผลงานแต่ละชิ้นเขียน prompt ไว้อย่างไร แต่คำอธิบายผลงานที่ชัดเจนเป็นแบบฝึกหัดที่ดีมาก เพราะถ้าอธิบายสิ่งที่จะสร้างได้จบใน 2 ประโยค แปลว่าขอบเขตชัดพอจะเขียนเป็น prompt ได้แล้ว ลองดูตัวอย่างจากทำเนียบแอปเทพ

งานเดียว ทำให้จบ

Glowpace ช่วยจำว่าแต่ละวันและแต่ละมื้อต้องใช้ skincare ตัวใดตามแนวทาง skin cycling ผู้ใช้เปิดดูเพื่อลดการลืมขั้นตอน ทั้งเว็บมีหน้าที่เดียวและบอกได้ชัดว่าใครเป็นคนใช้ ขอบเขตแบบนี้เหมาะกับ project แรกมาก เพราะเขียนส่วนผู้ใช้และเป้าหมายได้ในประโยคเดียว

แอปฝึกกีตาร์ เป็นอีกตัวอย่างหนึ่ง ผลงานนี้ช่วยฝึกกีตาร์ผ่าน browser โดยไม่ต้องติดตั้ง มี metronome และตัวช่วยซ้อม รวมคอร์ด สเกล คีย์ และแนวเพลงไว้ให้ใช้งานฟรี คำว่า ผ่าน browser โดยไม่ต้องติดตั้ง คือข้อจำกัดประเภทที่ควรเขียนลงในส่วนขอบเขตของ prompt เสมอ เพราะมีผลต่อวิธีสร้างทั้งหมด

บอกสิ่งที่ใส่เข้าไปและสิ่งที่ได้ออกมา

Places Ingestor ดึงข้อมูลสถานที่ธุรกิจในประเทศไทยผ่าน Google Places API โดยให้ผู้ใช้เลือกจังหวัด อำเภอ ตำบล และประเภทธุรกิจ แล้วดูผลเป็นตาราง แผนที่ และสถิติ รวมถึง download ข้อมูลเป็น CSV ได้ และรองรับทั้งภาษาไทยกับอังกฤษ คำอธิบายนี้บอกครบว่าผู้ใช้เลือกอะไรเข้าไป ข้อมูลมาจากแหล่งไหน และได้ผลออกมาในรูปแบบใดบ้าง ถ้างานของเราเป็นเครื่องมือจัดการข้อมูล ให้เขียน prompt ตามลำดับเดียวกันนี้

ระบบที่มีผู้ใช้หลายบทบาท

Bloom Stage ช่วยกรรมการให้คะแนนทีมในการแข่งขัน Pitch มีตัวจับเวลานับถอยหลังแบบออกเสียง และแสดง leaderboard แบบ real-time ส่วนผู้จัดงานตั้งค่าชื่องาน โลโก้ กรรมการ ทีม และ criteria แยกตามห้องได้ ก่อน export รายงานเมื่อจบงาน ผลงานนี้มีอย่างน้อย 2 บทบาท คือกรรมการกับผู้จัดงาน ซึ่งทำสิ่งต่างกันโดยสิ้นเชิง ระบบลักษณะนี้ควรเขียนขั้นตอนการใช้งานแยกทีละบทบาท ไม่เขียนรวมเป็นก้อนเดียว

Flowrix ดูแลทะเบียนครุภัณฑ์ วัสดุสิ้นเปลือง การเบิกจ่าย และการยืมคืนผ่าน LINE โดยหน่วยงานไทยสแกน QR และตรวจสอบรายการย้อนหลังได้ งานแบบนี้มีข้อมูลหลายชนิดที่เกี่ยวพันกัน ส่วนข้อมูลใน prompt จึงต้องละเอียดเป็นพิเศษ ควรไล่ให้ครบว่ามีรายการประเภทใดบ้าง แต่ละรายการเปลี่ยนสถานะได้อย่างไร และใครเป็นคนบันทึก

สั่งทีละขั้น อย่าสั่งทั้งเว็บในข้อความเดียว

ต่อให้ prompt แรกดีแค่ไหน ก็ไม่ควรคาดหวังให้เว็บเสร็จสมบูรณ์ในรอบเดียว ลำดับที่ใช้ได้ผลกับงานแทบทุกแบบมีดังนี้

1. ส่ง prompt 5 ส่วน แล้วให้ AI สรุปแผนและถามกลับก่อนลงมือ
2. ให้สร้างหน้าหลักหน้าเดียวก่อน โดยใช้ข้อมูลตัวอย่าง เพื่อดูหน้าตาและลำดับการใช้งาน
3. เปิดดูบนมือถือจริง ลองกดทุกปุ่ม แล้วจดสิ่งที่อยากแก้
4. เพิ่ม feature ทีละอย่าง ทดสอบให้ผ่านก่อนแล้วค่อยขออย่างถัดไป
5. เชื่อม database จริง และทดสอบด้วยข้อมูลที่ใกล้เคียงการใช้งานจริง
6. deploy แล้วให้คนอื่นลองใช้โดยที่เราไม่ต้องยืนอธิบายข้าง ๆ

ข้อดีของการทำทีละขั้นคือ เมื่อมีอะไรพัง เรารู้ทันทีว่าพังเพราะสิ่งที่เพิ่งเพิ่มเข้าไป ถ้าสั่ง 5 feature พร้อมกันแล้วเว็บเปิดไม่ขึ้น ทั้งเราและ AI ต้องเสียเวลาหาว่าต้นเหตุคือส่วนไหน

prompt สำหรับแก้ bug ต้องบอกอาการ ไม่ใช่บอกว่าพัง

เวลาเว็บมีปัญหา ข้อความที่ช่วย AI ได้มากที่สุดมี 4 อย่าง

1. เราทำอะไร เช่น กดปุ่มไหน อยู่หน้าใด กรอกค่าอะไร
2. เราคาดว่าจะเกิดอะไรขึ้น
3. สิ่งที่เกิดขึ้นจริงคืออะไร
4. ข้อความ error ทั้งก้อน โดย copy มาวางตรง ๆ ไม่ต้องย่อหรือแปล

ถ้ามีภาพหน้าจอก็แนบไปด้วย และถ้าปัญหาเพิ่งเกิดหลังแก้อะไรบางอย่าง ให้บอกด้วยว่าก่อนหน้านั้นแก้อะไรไป ข้อมูลข้อนี้มักพา AI ไปถึงต้นเหตุได้เร็วที่สุด

อีกเรื่องที่ควรระวังคือ อย่าสั่งแก้หลายปัญหาในข้อความเดียว ให้แก้ทีละเรื่อง ตรวจว่าหายจริง แล้วค่อยไปเรื่องถัดไป

เก็บ context ไว้ใน file จะได้ไม่ต้องพิมพ์ซ้ำ

เมื่อทำ project ไปหลายวัน ปัญหาที่เจอคือ AI ลืมสิ่งที่เคยตกลงกันไว้เมื่อเริ่ม session ใหม่ เช่น ลืมว่าเว็บนี้ใช้ภาษาไทยทั้งหมด หรือกลับไปใช้โทนสีที่เราเคยบอกให้เปลี่ยน วิธีแก้คือเขียนกฎประจำ project เก็บไว้ใน file ที่เครื่องมืออ่านเองทุกครั้ง Claude Code อ่าน file ชื่อ CLAUDE.md ส่วน Codex อ่าน AGENTS.md และ Cursor มีระบบ rules ของ project ให้ตั้งค่าได้

สิ่งที่ควรเขียนลงใน file นี้คือเรื่องที่ไม่เปลี่ยนบ่อย เช่น เว็บนี้ทำเพื่อใคร ใช้เทคโนโลยีอะไร กฎการตั้งชื่อ สิ่งที่ห้ามแตะ และคำสั่งที่ใช้ทดสอบ เขียนให้สั้นและปรับปรุงทุกครั้งที่มีข้อตกลงใหม่

ปัญหาเรื่องความจำข้าม session เป็นเรื่องใหญ่พอจนมีคนไทยสร้างเครื่องมือมาแก้โดยเฉพาะ Khwan.ai จดจำบริบท project และรูปแบบการเขียน code เพื่อให้ทำงานต่อได้เมื่อเปลี่ยน session ดึงเฉพาะ file และข้อมูลที่เกี่ยวข้อง และแยก workspace ของหลาย project ไม่ให้บริบทปะปนกัน

checklist ก่อนกดส่ง prompt

1. อ่านแล้วรู้ไหมว่าใครเป็นคนใช้เว็บนี้
2. ไล่ขั้นตอนการใช้งานตั้งแต่เปิดเว็บจนงานเสร็จครบหรือยัง
3. บอกหรือยังว่าข้อมูลเก็บที่ไหนและใครเห็นได้
4. บอกหรือยังว่าใช้ภาษาอะไร และออกแบบสำหรับจอขนาดไหนเป็นหลัก
5. บอกหรือยังว่าอะไรที่ยังไม่ต้องทำ
6. ขอให้ AI สรุปแผนและถามกลับก่อนลงมือหรือยัง
7. ถ้าส่ง prompt นี้ให้เพื่อนที่ไม่รู้จักงานของเราอ่าน เขาจะนึกภาพออกตรงกับเราไหม

ถ้าตอบว่าใช่ได้ครบ 7 ข้อ โอกาสที่รอบแรกจะออกมาใกล้เคียงกับที่คิดไว้ก็สูงขึ้นมาก

สรุป

การเขียน prompt สร้างเว็บไม่ใช่เรื่องของคำวิเศษหรือสูตรลับ แต่เป็นเรื่องของการคิดให้ชัดว่าเราอยากได้อะไร แล้วเล่าออกมาให้ครบ 5 ส่วน คือ ผู้ใช้และเป้าหมาย ขั้นตอนการใช้งาน ข้อมูล หน้าตา และขอบเขต จากนั้นสั่งทีละขั้น ทดสอบทุกครั้งก่อนไปต่อ และเก็บข้อตกลงสำคัญไว้ใน file ของ project

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