Agent Dev Thai Academyprinciples · patterns · architecture

Deslopping the Page — เพจสอนจับ AI slop ที่ใส่ชุด slop เอง

เพจที่สอนจับ AI slop ผิดเอง 4 จาก 5 ข้อ เลยเขียน brand book ก่อนแล้วให้ Claude แก้ตาม ถ้า prompt ไม่มี constraint มันจะไหลไปหาดำ เขียว glow mono เหมือนกันหมด

เพจนี้สอนจับ AI slop

แต่พอเอา design ตัวเองไปเทียบกับ checklist เดียวกัน ผิดเอง 4 จาก 5 ข้อ


มี fingerprint อยู่ชุดนึงที่บอกได้เลยว่า "อันนี้ AI ทำ" เว็บ AI-generated ปี 2024-25 หน้าตาเหมือนกันหมด ลองเอา design เพจมาเทียบดู ติดทุกข้อ:

1. พื้นดำสนิท เย็นๆ
#0B0D10 ดำเกือบสนิท ออกฟ้านิดๆ พื้นแบบนี้คือที่งานสาย AI-dev ชอบไหลไปหาเวลา prompt ไม่ล็อก direction เพราะมันปลอดภัย ไม่ต้องเลือก

2. เขียว neon เต็มแม็กซ์
#7CFF58 เขียวจอเรืองแสง อันนี้ตัวพ่อเลย เห็นปุ๊บได้กลิ่น template ทันที กลิ่นที่ไหลมาตาม default มากกว่ากลิ่นสีที่ถูกเลือกมาเฉพาะ

3. แสงเขียวฟุ้งมุมจอ
glow เขียวซึมจากมุมขวาล่าง 14% ใส่มาเพราะมันดู "ไฮเทค" แต่จริงๆ คือ decoration เปล่าๆ

4. mono ทั้งหน้า
font monospace ลากยาวทั้ง UI ทุก label ทุก eyebrow เป็น mono หมด อ่านแล้วเหมือน code editor ไม่ใช่เพจ

ข้อเดียวที่รอด: ไม่มี gradient text accent สีเดียวจบ อันนั้นทำถูกมาตั้งแต่แรก


รู้ปัญหาแล้ว แต่จะแก้ยังไงให้ไม่ใช่ "เปลี่ยนเพราะเบื่อ" คือต้องมีเหตุผลทุกการเปลี่ยน

ก็เลยมานั่งเขียน brand book ก่อน เอกสารตัวเดียวบอกว่าตอนนี้เป็นแบบไหน (CURRENT) อยากให้เป็นแบบไหน (TARGET) แล้วเปลี่ยนทำไม

จากนั้นโยน brand book ทั้งฉบับให้ Claude พร้อมโจทย์ 4 ข้อ: อุ่นพื้นดำ, ลดเขียว neon, ฆ่า glow, ให้ font ไทยนำแทน mono กติกาเดียว: accent สีเดียว ห้ามเพิ่มสีที่สอง ห้าม gradient

ให้ Claude ทำเพราะมันบังคับ constraint เดิมซ้ำๆ ได้นิ่งกว่าคน บอกว่า "สีเดียว ห้ามเกินประมาณ 10% ของ first viewport" แล้วมันคุมได้ทุก cover ไม่หลุดเหมือนเวลาเราเลือกเอง


ผลที่ออกมา ถ้าเทียบ Before / After:

  • พื้น: #0B0D10 ดำเย็น → #14110D ถ่านอุ่น ดำแบบหมึก ไม่ใช่ดำแบบ void
  • accent: #7CFF58 เขียว neon → #A9C66B เขียว phosphor เหมือนจอ terminal เก่า ไม่ใช่ไฟ LED
  • glow: layer opacity 14% → ลดเหลือต่ำกว่า 5% มองด้วยตาเปล่าไม่เห็น
  • font: mono ทั้งหน้า → font ไทยนำหัวข้อ mono เหลือไว้แค่ป้าย date tag code

สีเดิมไม่ได้ผิด แต่มันคือสีที่ทุกคนใช้ พอทุกเพจหน้าเหมือนกัน สีก็เลยไม่ได้บอกอะไรอีก


บทเรียนไม่ใช่เรื่องสีดำกับเขียว

ไม่ใช่ว่า AI เลือกสีพวกนี้ผิด แต่พอ prompt ไม่มี brand constraint มันมักไหลไปหา safe visual shorthand ของงานสาย dev: ดำ เขียว glow mono ไม่ใช่เพราะมันแย่ แต่เพราะไม่มีใครบอกมันว่า "อย่า"

งานเราคือเขียน constraint ให้มันเดินตาม brand book คือเส้นนั้น ไม่มีเส้น ก็ได้ของที่ AI ทุกตัวทำเหมือนกันหมด

เพจที่สอนเรื่อง taste ควรมี taste บอกตัวเองได้ก่อน