ตัวอย่างจริง — เว็บที่ "ไม่มีลายเซ็น Slop"
สี่หน้านี้เราออกแบบ & สร้างด้วย AI เอง — กดเข้าไปดูสดได้
คุณมีของดีอยู่แล้ว เหลือแค่หน้าเว็บที่ทำให้คนเชื่อใจพอจะจ่ายเงิน — คู่มือนี้แกะให้เห็นทีละจุดว่าอะไรทำให้เว็บดู "แพง" และอะไรทำให้ดู "ถูก" แล้วปิดท้ายด้วยชุดไฟล์ที่เอาไปป้อน AI สร้างเว็บแบบเดียวกันได้เลย
ปัญหาไม่ใช่ "AI ทำเว็บไม่เป็น" — แต่เพราะเราสั่งมันลอยๆ มันเลยคืน "ค่าเฉลี่ยของเว็บทั้งโลก" กลับมา ซึ่งหน้าตาเหมือนกันหมด
เราเรียกหน้าตาแบบนั้นว่า AI Slop — gradient ม่วงๆ, emoji เกลื่อน, รูป stock, การ์ดเงาฟุ้งเท่ากันหมด. ปัญหาคือมันไปตรงกับหน้าตาของเว็บหลอกลวงและเว็บทิ้งๆ ที่ลูกค้าเคยเจอ สมองเขาเลยตั้งการ์ดอัตโนมัติว่า "ไม่น่าเชื่อถือ" ทั้งที่ของคุณดีจริง
ข่าวดีคือความต่างระหว่าง "ดูแพง" กับ "ดูถูก" ไม่ได้อยู่ที่พรสวรรค์ มันอยู่ที่ การตัดสินใจไม่กี่อย่างที่ทำซ้ำให้สม่ำเสมอ — สี ฟอนต์ ระยะห่าง ลำดับสายตา และรูปจริง
ค่า default ของ template ฟรี เห็นจนชิน
ขาว/ครีม/เทา 90% ใช้สีสดแค่ปุ่มสำคัญ
🚀✨🎯 ดูเล่นๆ ลดความน่าเชื่อถือ
ใช้ชุดเดียวทั้งเว็บ หรือไม่ใช้เลย
คนจับได้ทันทีว่าไม่ใช่ของจริง
ถ่ายมือถือบนพื้นสะอาด ยังดีกว่ารูป AI
Arial/ฟอนต์ระบบ ไม่มีบุคลิก
ไทย: หัว Bai Jamjuree · เนื้อหา Sarabun/Anuphan
สายตาไม่รู้จะเริ่มตรงไหน อ่านยาก
จัดกลางเฉพาะหัวสั้นกับฮีโร่
ดูพลาสติก ไม่มีลำดับความสำคัญ
เน้นเฉพาะการ์ดสำคัญให้เด่นกว่าเพื่อน
ไม่มีความหมาย ใครก็พูดได้
"ส่งใน 24 ชม. · ลูกค้า 3,200 คน"
กฎทองข้อเดียว: ถ้าลบของออกแล้วหน้ายังสื่อสารได้ — ลบ. ความว่างคือสิ่งที่ทำให้ดูแพง
เลือก 1 สีแบรนด์ + โทนเป็นกลางเป็นพื้น 90% สีสดใช้แค่จุดที่อยากให้คนกด
ฟอนต์หัว 1 + เนื้อหา 1 · ขนาดต่างกันชัด · line-height 1.7 อ่านสบาย — ฟอนต์ที่มีบุคลิกทำให้ทั้งเว็บมีเสียงเป็นของตัวเอง
ใช้สเกลคงที่ (8·16·24·32·48) ทั้งเว็บ · เว้นระหว่าง section เยอะๆ · ของที่เกี่ยวกันอยู่ใกล้ ของที่ไม่เกี่ยวอยู่ห่าง
หน้าหนึ่งมีปุ่มเป้าหมายหลัก 1 ปุ่มที่เด่นสุด · ของสำคัญต้องใหญ่/เข้มกว่า · นำสายตาคนไปถึงจุดตัดสินใจ
รูปสินค้า/หน้าร้าน/ลูกค้าจริง ชนะรูป AI สวยๆ เสมอ เพราะสร้างความเชื่อใจที่ของปลอมเลียนไม่ได้
ทำไม่ครบไม่เป็นไร — ขั้นต่ำที่ขายได้คือ Hero + สินค้าจริง + รีวิว + ปุ่มซื้อ + ช่องทางติดต่อจริง
สี/ฟอนต์/บุคลิกแบรนด์ — อยู่ในไฟล์ CLAUDE.md ของชุดด้านล่าง
ขายอะไร เพื่อใคร จุดเด่น ราคา รูปมีอะไร โทนแบรนด์
แปะ 7 สัญญาณด้านบนให้มันหลีกเลี่ยง
แล้วปิดท้ายด้วยคำสั่งนี้หลังมันทำเว็บเสร็จ — จุดที่แยกงานมือโปรกับมือใหม่:
# วางต่อหลัง AI ทำเว็บเสร็จ "วิจารณ์งานตัวเองด้วยเกณฑ์ 7 ข้อ AI Slop แล้วแก้ให้ดูแพงขึ้น ลดของที่ไม่จำเป็น เพิ่ม white space"
ชุดไฟล์ที่เอาไปวางใส่ AI ของคุณ (Claude / Claude Code / ChatGPT) แล้วสร้างเว็บขายของแบบเดียวกับที่เราทำได้เลย
ecommerce-design-bible.md · ป้อน AI เป็นความรู้ตั้งต้น ครบทั้ง 7 กฎ + โครงสร้าง
CLAUDE.md · วางในโฟลเดอร์โปรเจกต์ AI ยึดสี/ฟอนต์/กฎห้าม Slop ตอน build
starter-store.html · เว็บร้านจริง 1 ไฟล์ สวยใช้ได้เลย กดเปิดดูสดได้
mega-prompt.txt · ก๊อปวางสั่ง AI ให้สร้างเว็บจาก brief แค่เติมข้อมูล
ลาก design-bible.md + CLAUDE.md เข้า Claude
เปิด mega-prompt.txt แก้ในวงเล็บ [ ] แล้วก๊อปวางส่ง
ได้เว็บไฟล์เดียว · สั่ง "วิจารณ์ด้วยเกณฑ์ Slop แล้วแก้"
บอกเราว่าอยากได้เว็บ/ระบบแบบไหน เดี๋ยวพี่ปุ้ยช่วยดีไซน์ให้ฟรีก่อนเริ่ม — หรือมาเรียนสั่ง AI สร้างเองให้เป็น
