ใช้ยังไง
เวลาสั่ง AI สร้าง/แก้หน้าจอ → ก๊อป "คำสั่ง" ในแต่ละข้อไปวางหรือใช้ Master Promptด้านล่างทีเดียว → งานจะออกมาสะอาด ไม่ slop · กดปุ่ม คัดลอกได้เลย
Master Prompt — ก๊อปวางทีเดียว
วางต่อท้ายคำสั่งสร้างหน้าจอ เพื่อให้ AI ออกแบบสะอาด ไม่ดูเหมือน AI ปั๊ม (เปลี่ยน [สีแบรนด์]/[ฟอนต์] ให้ตรงของคุณ)
ออกแบบ UI ให้สะอาด ดูโปร ไม่ดูเหมือน AI ปั๊ม ตามนี้:
- สี: ใช้ [สีแบรนด์] เป็น accent หลัก พื้นขาว/เทาอ่อน ตัวอักษรเข้ม — ห้าม gradient ม่วง-ฟ้า, สีแดงใช้เฉพาะปุ่มลบ
- ฟอนต์: หัวข้อใช้ [ฟอนต์มีบุคลิก] เนื้อหาใช้ [ฟอนต์อ่านง่าย] ขนาดเป็นสเกลชัด
- ปุ่ม: ปุ่มหลักเด่น 1 อันต่อหน้า ปุ่มรองเป็นขอบบาง
- การ์ด: ขอบ 1px เทาอ่อน + เงาบาง ๆ (ไม่ฟุ้ง ไม่ม่วง) มุมโค้งพอดี
- ไอคอน: ใช้ชุดเส้นชุดเดียว (เช่น Lucide) ไม่ใส่ emoji เกลื่อน
- ข้อความ: ใช้คำจริง ภาษาคน ตรงประเด็น ห้ามคำการตลาดเว่อร์
- เว้นช่องไฟให้โปร่ง เลือก 1 สไตล์ ไม่ผสมเอฟเฟกต์มั่ว
- ตั้งตัวแปรสี/ระยะ (design tokens) ใช้ซ้ำทั้งเว็บ
งานออกมายังเหมือน AI ปั๊ม — สั่งแก้ทีเดียว
วางต่อท้ายหน้านี้ยังดูเหมือน AI ปั๊ม ช่วยไล่แก้ให้:
1. เอา gradient ทุกจุดออก เหลือสีพื้นเรียบ
2. ลดมุมโค้งการ์ดเหลือ 12-14px เงาบางลง ไม่มีสีม่วง
3. เหลือปุ่มเด่นปุ่มเดียวต่อหน้า ที่เหลือเป็นขอบบาง
4. เปลี่ยน emoji เป็นไอคอนเส้น Lucide ชุดเดียว
5. เขียน copy ใหม่เป็นภาษาคน บอกสิ่งที่ได้จริง ตัดคำการตลาด
6. เว้นช่องไฟให้โปร่งขึ้น จัดกลุ่มเนื้อหาให้ชัด
01สี (Color)
✗ อย่าทำใช้ gradient ม่วง-ฟ้า, ใส่หลายสีจัด ๆ, สีตาม default ของ AI
✓ ทำแบบนี้1 สีแบรนด์เป็น accent + เทา/ขาวเป็นพื้น + แดงเฉพาะปุ่มลบ
5 สีจัดแข่งกัน + gradient ม่วง
เข้ม + 1 accent + เทา/ขาว + แดงเฉพาะลบ
บอก AI ว่าใช้สีหลัก [สีแบรนด์] เป็น accent, พื้นขาว/เทาอ่อน, ตัวอักษรสีเข้ม — ห้ามใช้ gradient ม่วง สีแดงใช้เฉพาะปุ่มลบ/อันตราย
02ฟอนต์ (Typography)
✗ อย่าทำปล่อยฟอนต์ default ของ AI (Inter/system) ทั้งเว็บ + หัวข้อกับเนื้อหาขนาด/น้ำหนักเท่ากันหมดไม่มีลำดับ
✓ ทำแบบนี้หัวข้อ 1 ฟอนต์ + เนื้อหา 1 ฟอนต์ขนาดเป็นสเกล (32/24/18/16/14)
บอก AI ว่าใช้ฟอนต์หัวข้อ [ชื่อฟอนต์] + เนื้อหา [ชื่อฟอนต์], ตั้งขนาดเป็นสเกล 32/24/18/16/14 ใช้ซ้ำทั้งเว็บ
03ปุ่ม (Buttons)
✗ อย่าทำ2 ปุ่มทึบเด่นเท่ากันแย่งสายตา
✓ ทำแบบนี้ปุ่มหลักเด่น 1 อัน/หน้าที่เหลือเป็นขอบ/จาง · ลบ = แดง
2 ปุ่มทึบเด่นเท่ากัน แย่งสายตา
เด่น 1 + รองขอบบาง + ลบแดง
บอก AI ว่าให้มีปุ่มหลักเด่นอันเดียวต่อหน้า, ปุ่มรองทำเป็นขอบบาง, ปุ่มลบ/อันตรายเป็นสีแดง
04การ์ด & เงา (Cards/Shadow)
✗ อย่าทำเงาฟุ้ง ๆ สีม่วง มุมโค้งเยอะ การ์ดลอย
✓ ทำแบบนี้ขอบ 1px เทาอ่อน + เงาบาง ๆสีเทากลาง มุมโค้งพอดี
การ์ดสินค้า
มุมโค้งเยอะ + เงาฟุ้งม่วง ลอยการ์ดสินค้า
ขอบ 1px + เงาเทาบาง + มุม 14pxบอก AI ว่าการ์ดใช้ขอบ 1px สีเทาอ่อน + เงาบาง ๆ (ไม่ฟุ้ง ไม่มีสีม่วง) มุมโค้งประมาณ 12-16px
05ไอคอน & Emoji
✗ อย่าทำemoji เกลื่อนทุกหัวข้อ/ปุ่ม
✓ ทำแบบนี้ไอคอนเส้นชุดเดียว(Lucide) · emoji ใช้เน้นจุดเดียวพอ
บอก AI ว่าใช้ไอคอนเส้นชุด Lucide ทั้งเว็บ ไม่ใส่ emoji เกลื่อน
06ข้อความ (Copy)
✗ อย่าทำ"ปลดล็อกศักยภาพสู่อีกระดับ" คำสวยว่างเปล่า
✓ ทำแบบนี้ตรง ภาษาคนบอกสิ่งที่ได้จริง
ปลดล็อกศักยภาพธุรกิจสู่อีกระดับ
โซลูชันครบวงจรที่ตอบโจทย์ทุกความต้องการ
อ่านจบแล้วไม่รู้ว่าทำอะไรได้ดูยอดขายวันนี้ทุกสาขา ในจอเดียว
ปิดยอด 6 โมงเย็น เห็นกำไรทันที ไม่ต้องรอบัญชี
รู้เลยว่าได้อะไรบอก AI ว่าเขียนข้อความสั้น ตรง ภาษาคน บอกประโยชน์จริง ห้ามใช้คำการตลาดเว่อร์ ๆ
07ช่องไฟ (Whitespace)
✗ อย่าทำยัดทุกอย่างแน่นจนอึดอัด
✓ ทำแบบนี้เว้นช่องไฟให้โปร่งจัดกลุ่มชัด หายใจได้
บอก AI ว่าเว้นระยะให้โปร่ง (ใช้ระยะเป็นสเกล 4/8/12/16/24px) จัดกลุ่มเนื้อหาให้ชัด อย่ายัดแน่น
08เลย์เอาต์ (Layout)
✗ อย่าทำhero โหล ๆ กลางจอ 2 ปุ่ม เหมือนทุกเว็บ
✓ ทำแบบนี้จัดให้มีบุคลิกเยื้องซ้าย/มีภาพ-ตัวอย่างจริงประกอบ
บอก AI ว่าจัดเลย์เอาต์ให้มีบุคลิก ไม่ใช่ hero กลางจอโหล ๆ — ลองเยื้องซ้าย ใส่ภาพ/ตัวอย่างหน้าจอจริงประกอบ
09เนื้อหา (Content)
✗ อย่าทำLorem ipsum, ตัวเลขมั่ว, รูป stock AI
✓ ทำแบบนี้ข้อมูลจริง ตัวอย่างจริงชื่อ/ตัวเลขสมจริง
บอก AI ว่าใส่เนื้อหาตัวอย่างที่สมจริง (ชื่อ ตัวเลข ข้อความจริงของธุรกิจ) ไม่ใช้ Lorem ipsum หรือตัวเลขมั่ว
10ความสม่ำเสมอ (Consistency)
✗ อย่าทำผสม glass + neon + gradient ทุกเทรนด์ในหน้าเดียว
✓ ทำแบบนี้1 ภาษา + design tokensใช้สี/ระยะชุดเดียวซ้ำทั้งเว็บ
บอก AI ว่าตั้งตัวแปรสีและระยะ (design tokens) แล้วใช้ซ้ำทุกหน้า เลือกสไตล์เดียว อย่าผสมหลายเอฟเฟกต์
เช็ก 8 ข้อก่อนส่งงาน — ผ่านหมด = ไม่ slop
- ☐ มี accent สีเดียว ไม่มี gradient ม่วง-ฟ้า
- ☐ หัวข้อกับเนื้อหาขนาดต่างกันชัด เป็นสเกล
- ☐ มีปุ่มเด่นปุ่มเดียวในแต่ละหน้า/การ์ด
- ☐ การ์ดขอบบาง เงาไม่ฟุ้ง มุมโค้งพอดี (12-16px)
- ☐ ไอคอนเส้นชุดเดียว ไม่มี emoji เกลื่อน
- ☐ ข้อความเป็นภาษาคน ไม่มีคำการตลาดว่างเปล่า
- ☐ ช่องไฟโปร่ง จัดกลุ่มชัด ไม่ยัดแน่น
- ☐ ตัวอย่างเป็นข้อมูลจริง ไม่มี Lorem ipsum/เลขมั่ว
อ่านต่อจากแหล่งอื่น (บทความภายนอก)
- ↗ 5 AI Website Design Tips (ไม่ให้ดู AI-built) — Unpromptable Eng
- ↗ Why Every AI Landing Page Looks the Same + วิธีแก้ — DEV Community Eng
บทความภายนอกเป็นของผู้เขียนแต่ละเว็บ (ไม่ใช่ของเรา) · เปิดในแท็บใหม่
คิด เขียน และเป็นเจ้าของไอเดียเว็บนี้โดย พี่ปุ้ย ปริวรรตน์ อรุโณทยานันท์
ผู้เชี่ยวชาญวางระบบองค์กร & AI — สอนเจ้าของกิจการสร้างระบบของตัวเองมากกว่า 400 คน
ประวัติพี่ปุ้ย · ดูคอร์ส →