30 พรอมต์ Vibe Coding ที่คัดลอกไปใช้ได้ (ชีตสรุป)

พรอมต์ vibe coding ที่ดีที่สุดคือพรอมต์ที่สั้น เจาะจง และเน้นพฤติกรรม: ใครใช้แอป พวกเขาทำอะไรได้ แอปเก็บอะไร และหน้าตาเป็นอย่างไร ด้านล่างคือ 30 พรอมต์ที่คัดลอกและวางได้ จัดตามขั้นตอนที่คุณอยู่ตั้งแต่การสร้างครั้งแรกจนถึงการเผยแพร่ แทนส่วนที่อยู่ใน [วงเล็บ] ด้วยรายละเอียดของคุณเอง

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

วิธีใช้ชีตนี้

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

พรอมต์การสร้างครั้งแรก

พรอมต์เหล่านี้กำหนดรูปร่างของแอป แต่ละอันระบุผู้ใช้ การกระทำ ข้อมูล และหน้าตา

1. แทร็กเกอร์แบบง่าย

สร้างแทร็กเกอร์ [นิสัย] ให้ฉัน ฉันเพิ่ม [นิสัย] พร้อมชื่อและสี ติ๊กหนึ่งครั้งต่อวัน และดูตารางกริด 30 วันกับจำนวนวันติดต่อกันปัจจุบัน บันทึกทุกอย่างให้ยังอยู่หลังรีเฟรช ดีไซน์สะอาดเรียบง่ายที่ใช้งานบนโทรศัพท์ได้

2. หน้าจองสำหรับธุรกิจขนาดเล็ก

สร้างหน้าจองให้ [ร้านทำผม] ของฉัน ลูกค้าเลือกบริการ ([ตัดผม 30 นาที ทำสี 90 นาที]) วันที่ และช่วงเวลาว่างระหว่าง [9:00 ถึง 18:00] แล้วกรอกชื่อ เบอร์โทร และอีเมล คนสองคนจองช่วงเวลาเดียวกันไม่ได้ ฉันต้องการหน้าแอดมินส่วนตัวที่ต้องล็อกอิน แสดงการจองที่กำลังจะมาแยกตามวัน

3. เครื่องมือภายใน

สร้างเครื่องมือภายในให้ทีมของฉันติดตาม [การยืมอุปกรณ์] แต่ละชิ้นมีชื่อ รหัส และสถานะ (ว่าง ถูกยืม เสีย) เจ้าหน้าที่ล็อกอิน ยืมอุปกรณ์ให้ตัวเองและคืนได้ แสดงตารางพร้อมตัวกรองตามสถานะ และประวัติว่าใครเคยยืมอุปกรณ์แต่ละชิ้น

4. หน้า landing พร้อมรายชื่อรอ

สร้างเว็บไซต์หน้าเดียวสำหรับ [ผลิตภัณฑ์ของฉัน: แอปวางแผนมื้ออาหารสำหรับพ่อแม่ที่ยุ่ง] หัวข้อหลักพร้อมคำอธิบายหนึ่งประโยคและฟอร์มสมัครด้วยอีเมล จากนั้นประโยชน์สามข้อ ส่วนอธิบายวิธีการทำงานสั้นๆ และ FAQ บันทึกอีเมลที่สมัครลงฐานข้อมูล และแสดงรายการให้ฉันดูในหน้าแอดมินส่วนตัว

5. พอร์ทัลลูกค้า

สร้างพอร์ทัลลูกค้าสำหรับ [สตูดิโอออกแบบ] ของฉัน ลูกค้าแต่ละคนล็อกอินและเห็นเฉพาะโปรเจกต์ของตัวเอง พร้อมสถานะ ไฟล์ที่ฉันอัปโหลด และเธรดความคิดเห็น ฉันล็อกอินเป็นแอดมินและเห็นลูกค้าทั้งหมด ลูกค้าต้องไม่เห็นข้อมูลของกันและกันเด็ดขาด

6. เครื่องคิดเลขหรือเครื่องมือใบเสนอราคา

สร้างเครื่องคิดราคาใบเสนอราคาให้ [ธุรกิจทำความสะอาด] ของฉัน อินพุต: จำนวนห้องนอน ห้องน้ำ บริการเสริม (เตาอบ หน้าต่าง ตู้เย็น) และความถี่ (ครั้งเดียว รายสัปดาห์ รายเดือน) แสดงราคาเมื่อตัวเลือกเปลี่ยน พร้อมรายละเอียดการคิดราคา ราคา: [วางรายการราคาของคุณ] เพิ่มปุ่มส่งคำขอใบเสนอราคามาให้ฉันทางอีเมล

พรอมต์การวางแผน

ใช้ก่อนฟีเจอร์ใหญ่ หรือเมื่อคุณไม่แน่ใจว่าจะอธิบายอย่างไร

7. วางแผนก่อนสร้าง

ก่อนเขียนโค้ดใดๆ ให้อธิบายด้วยคำพูดธรรมดาถึงหน้าจอที่คุณจะสร้าง ข้อมูลที่คุณจะเก็บ และการตัดสินใจใดที่คุณต้องการจากฉัน รอให้ฉันอนุมัติก่อน

8. เปลี่ยนไอเดียที่ยุ่งเหยิงให้เป็นเวอร์ชันแรก

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

9. ถามว่าอะไรยังขาดอยู่

นักพัฒนาจะถามฉันอะไรบ้างก่อนสร้างสิ่งนี้ ถามทีละข้อ แล้วสรุปคำตอบของฉันเป็นสเปกสั้นๆ

10. ตรวจการเปลี่ยนแปลงใหญ่ก่อน

ฉันอยากเพิ่ม [บัญชีทีมที่หลายคนใช้พื้นที่ทำงานเดียวกัน] อธิบายว่าต้องเปลี่ยนอะไรบ้างในข้อมูล หน้าจอ และสิทธิ์ และอะไรอาจพังได้ อย่าเปลี่ยนอะไรตอนนี้

พรอมต์การออกแบบ

11. กำหนดสไตล์ที่ชัดเจน

ปรับสไตล์แอปใหม่: พื้นหลังขาวนวลอุ่น ตัวอักษรเข้ม สีเน้นหนึ่งสี [#1F6F50] มุมโค้ง ระยะห่างกว้างขวาง และฟอนต์ sans-serif ที่ทันสมัย คงเลย์เอาต์และฟีเจอร์ทุกอย่างไว้เหมือนเดิม

12. คัดลอกความรู้สึกจากตัวอย่าง

ทำให้แดชบอร์ดให้ความรู้สึกเหมือนแอปการเงินที่สงบ: พื้นที่ว่างเยอะ ตัวเลขใหญ่และหนา ป้ายเล็กและสีเทา และกราฟง่ายหนึ่งอันที่ด้านบน อย่าคัดลอกโลโก้หรือข้อความของแบรนด์ใดๆ

13. แก้เลย์เอาต์บนโทรศัพท์

บนโทรศัพท์กว้าง 375px ตารางในหน้า [คำสั่งซื้อ] เลื่อนไปด้านข้างได้และปุ่มซ้อนทับกัน เปลี่ยนแต่ละแถวเป็นการ์ดที่เรียงซ้อนกันบนหน้าจอเล็ก อย่าเปลี่ยนเลย์เอาต์บนเดสก์ท็อป

14. สถานะว่าง กำลังโหลด และข้อผิดพลาด

เพิ่มสถานะที่เหมาะสมให้ [รายการโปรเจกต์]: สถานะว่างที่เป็นมิตรพร้อมปุ่มเพิ่มโปรเจกต์แรก skeleton ขณะโหลดข้อมูล และข้อความชัดเจนพร้อมปุ่มลองใหม่หากโหลดไม่สำเร็จ

15. รองรับการเขียนจากขวาไปซ้าย

เพิ่มเวอร์ชันภาษาอาหรับของอินเทอร์เฟซพร้อมเลย์เอาต์จากขวาไปซ้ายอย่างสมบูรณ์ ไอคอนที่ชี้ทิศทางต้องกลับด้าน ตัวเลขและวันที่ใช้รูปแบบของ locale ตั้งภาษาอังกฤษเป็นค่าเริ่มต้น

พรอมต์ข้อมูลและฟีเจอร์

16. ทำให้ข้อมูลคงอยู่

ตอนนี้ข้อมูลของฉันหายไปเมื่อรีเฟรช ให้เก็บในฐานข้อมูลจริงแทน และให้หน้าจอปัจจุบันทำงานเหมือนเดิม

17. เพิ่มการล็อกอิน

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

18. เพิ่มบทบาท

เพิ่มสองบทบาท: แอดมินและสมาชิก แอดมินเพิ่ม แก้ไข และลบ [สินค้า] ได้ สมาชิกดูได้อย่างเดียว บังคับใช้ฝั่งเซิร์ฟเวอร์ ไม่ใช่แค่ซ่อนปุ่ม

19. เพิ่มการค้นหาและตัวกรอง

เพิ่มช่องค้นหาเหนือ [รายชื่อผู้ติดต่อ] ที่ตรงกับชื่อ บริษัท หรืออีเมลขณะที่ฉันพิมพ์ พร้อมตัวกรองสำหรับ [สถานะ] คงลำดับการเรียงปัจจุบันไว้

20. เพิ่มการอัปโหลดไฟล์

ให้ผู้ใช้แนบรูปได้สูงสุด [5] รูปต่อ [รายการ] ขนาดไม่เกิน [5 MB] ต่อรูป แสดงภาพขนาดย่อในรายการและดูภาพใหญ่เมื่อคลิก มีเพียงเจ้าของเท่านั้นที่ลบรูปของตัวเองได้

21. นำเข้าจากสเปรดชีต

เพิ่มปุ่มนำเข้าที่รับไฟล์ CSV ที่มีคอลัมน์ [ชื่อ อีเมล เบอร์โทร หมายเหตุ] แสดงตัวอย่าง 10 แถวแรกและให้ฉันยืนยันก่อนบันทึก ข้ามแถวที่ไม่มีอีเมลและบอกฉันว่าข้ามไปกี่แถว

พรอมต์การแก้ไข

22. รายงานบั๊กให้ชัดเจน

เมื่อฉัน [คลิกบันทึกในฟอร์มแก้ไข] ฉันเห็น “[ข้อความข้อผิดพลาดตรงตัว]” และการเปลี่ยนแปลงไม่ถูกบันทึก ที่คาดหวัง: การเปลี่ยนแปลงถูกบันทึกและฉันกลับไปยังรายการ หาสาเหตุ อธิบายในหนึ่งหรือสองประโยค แล้วแก้ไข

23. หยุดวนลูปการแก้ไข

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

24. ย้อนผลข้างเคียง

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

25. อธิบายก่อนเปลี่ยน

อธิบายว่า [ยอดรวมการชำระเงิน] คำนวณอย่างไรในตอนนี้ทีละขั้น ชี้ไปยังไฟล์ที่เกี่ยวข้อง อย่าเปลี่ยนอะไรเลย

พรอมต์การทดสอบและตรวจสอบ

26. กรณีขอบ

แสดงรายการ 10 วิธีที่ผู้ใช้จริงจะทำให้ [ฟอร์มจอง] พังได้: ช่องว่าง ข้อความยาวมาก กดซ้ำ สองคนพร้อมกัน โซนเวลาผิด ทดสอบแต่ละข้อและแก้สิ่งที่ล้มเหลว รายงานสิ่งที่คุณเปลี่ยน

27. สรุปการเปลี่ยนแปลงล่าสุด

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

พรอมต์ความปลอดภัย

ใช้คู่กับหน้าของเรื่อง vibe coding ปลอดภัยหรือไม่

28. ตรวจการเข้าถึงข้อมูล

ตรวจโค้ดฝั่งเซิร์ฟเวอร์: ผู้ใช้ที่ล็อกอินอยู่สามารถอ่านหรือแก้ไข [ระเบียน] ของผู้ใช้อื่นได้โดยเปลี่ยน ID ในคำขอหรือไม่ แสดงให้ฉันเห็นว่าตรวจสอบสิทธิ์ตรงไหน และแก้ช่องโหว่ที่พบ

29. ตรวจหาความลับที่รั่วไหล

ระบุทุกคีย์ API รหัสผ่าน หรือโทเคนที่แอปนี้ใช้ และระบุว่าแต่ละตัวถูกเก็บไว้ที่ไหน ตรวจให้แน่ใจว่าไม่มีตัวไหนอยู่ในโค้ดที่รันบนเบราว์เซอร์หรือถูก commit ไว้ในไฟล์ หากมี ให้ย้ายไปเป็น secrets

พรอมต์ก่อนเผยแพร่

30. ตรวจก่อนเปิดตัว

ฉันกำลังจะเผยแพร่สิ่งนี้ให้ผู้ใช้จริง ตรวจสอบแบบผู้รีวิว: ลิงก์เสีย ไม่มีชื่อหน้าหรือคำอธิบาย ฟอร์มที่ไม่มีการตรวจสอบ หน้าที่ช้า ข้อผิดพลาดในคอนโซล และสิ่งที่ดูไม่เสร็จบนโทรศัพท์ ให้รายการเรียงตามความสำคัญ แล้วแก้ห้าข้อแรก

พรอมต์ที่ควรหลีกเลี่ยง

พรอมต์บางแบบทำให้ผลลัพธ์แย่ลงอย่างสม่ำเสมอ:

• “ทำให้ดีขึ้น” ดีขึ้นแบบไหน ระบุหน้าจอและการเปลี่ยนแปลง
• “แก้ทุกอย่าง” AI จะเปลี่ยนหลายอย่างและคุณจะไม่รู้ว่าอะไรขยับ
• “ใช้ [ไลบรารี] และ [เฟรมเวิร์ก] และ [รูปแบบ]” เว้นแต่มีเหตุผล ให้อธิบายพฤติกรรมและปล่อยให้เครื่องมือเลือกสแตก
• “นี่คือคีย์ API ของฉัน: …” อย่าวางความลับในแชทเด็ดขาด ใช้การตั้งค่า secrets ของเครื่องมือ
• ฟีเจอร์สิบอย่างในข้อความเดียว แยกออกเป็นหลายข้อความ

ทำพรอมต์ให้เป็นนิสัย

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

หากคุณติดขัดกับพรอมต์แรก เครื่องมือสร้างพรอมต์แอป ฟรีของเราจะเปลี่ยนไอเดียหนึ่งบรรทัดให้เป็นพรอมต์เริ่มต้นที่สมบูรณ์ขึ้น และหากอยากเห็นว่าพรอมต์เหล่านี้ให้ผลลัพธ์อะไรในทางปฏิบัติ อ่าน ตัวอย่างวิธี vibe coding ของเรา หรือวางพรอมต์ข้อ 1 ลงใน เครื่องมือสร้างแอป AI แล้วเปลี่ยนวงเล็บเป็นไอเดียของคุณ

คำถาม