สั่ง AI ทำ UI ให้สวย: DESIGN.md และเช็กลิสต์ 14 ลายเซ็นที่ดูเหมือน AI ทำ

เคยสั่ง AI ทำหน้าเว็บแล้วได้ผลที่ดูเหมือน AI ทำไหม คำถามแนวนี้มีคนถามจริงในกลุ่ม Claude Thailand Community ว่า "ใช้คำสั่งยังไงคับ หน้า UI ถึงจะออกมาสวย" โพสต์นั้นได้ 260 reactions, 59 comments และ 347 shares ซึ่งบอกว่าไม่ได้มีแค่คนเดียวที่อยากรู้

คำตอบสั้น ๆ ที่ dotPAN สรุปไว้คือ อย่าสั่งด้วยคำคุณศัพท์ลอย ๆ แต่สั่งด้วยข้อมูล ได้แก่ ภาพตัวอย่าง ไฟล์กติกา และรายการห้าม

ทำไม "สวย ๆ ทันสมัย" ถึงไม่ได้ผล

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

แนวทางที่ 1: ใช้ตัวอย่างที่ชอบเป็นหลัก

ถ้ามีภาพหรือเว็บที่ถูกใจ 2-3 ตัว ให้แนบไปกับโจทย์ แล้วสั่งให้ AI ทำตามลำดับนี้

1. อ่านตัวอย่างแล้วสรุปสิ่งที่อ่านได้ 6 เรื่อง คือ ลำดับสายตา จังหวะเว้นวรรค คอนทราสต์ การใช้ภาพ โทนโมชัน และอารมณ์รวม ให้เอาหลักการ ห้ามลอกพิกเซลหรือโลโก้
2. เขียนไฟล์ DESIGN.md แล้วหยุดให้คุณดูก่อน 1 รอบ
3. ค่อยลงมือสร้าง โดยยึดไฟล์นั้นเป็นกฎ
4. เสร็จแล้วเปิดดูบนมือถือจริง แล้วรายงานสิ่งที่เห็นบนจอ

ถ้ายังไม่มีตัวอย่างเลย ให้ขอให้ AI เสนอทิศทางภาพมา 3 แบบที่ต่างกันจริง ๆ ก่อน แล้วคุณเลือก 1 แบบ ส่วนหน้าที่มีอยู่แล้วแต่ไม่สวย ให้ AI ตรวจก่อนแล้วจัดอันดับปัญหา ไม่ใช่ลงมือแก้ทันที

DESIGN.md คืออะไร

เป็นไฟล์ markdown ไฟล์เดียว วางที่ root ของโปรเจกต์ มี 6 หัวข้อ คือ Colors, Typography, Spacing, Components, Elevation และ Guidelines บอก AI ครั้งเดียวว่า "ยึดไฟล์นี้เป็นกฎ ห้ามใส่สี ฟอนต์ หรือระยะที่ไม่มีในไฟล์" แล้วทุกหน้าถัดไปจะได้โทนเดียวกัน โดยไม่ต้องอธิบายซ้ำ ข้อสำคัญคือต้องเอาค่าจริงมาจากตัวอย่างที่ชอบ ห้ามปล่อยว่างให้ AI เดาเอง

14 ลายเซ็นที่ทำให้ดูเหมือน AI ทำ

ชุดเช็กลิสต์ของ dotPAN แบ่งเป็นกลุ่มที่ควรแก้ก่อนส่ง กลุ่มที่แก้ถ้ามีเวลา และกลุ่มที่แล้วแต่บริบท ตัวอย่างที่เจอบ่อย

• ไล่สีม่วงไปฟ้า หรือ #6366F1 ที่เป็นค่าเริ่มต้นของแทบทุกโมเดล แก้โดยใช้ accent สีเดียวจากตัวอย่างที่เลือก
• href="#" ที่คลิกแล้วเด้งขึ้นบนสุด ควรใส่ลิงก์จริงหรือเปลี่ยนเป็นปุ่ม
• h-screen หรือ 100vh ที่ทำให้หน้ากระตุกบนมือถือ ให้ใช้ min-height: 100dvh
• transition-all ที่ทำให้ทั้ง layout ขยับ ให้ระบุ property ทีละตัว
• Lorem ipsum และคำกลวงอย่าง Elevate หรือ Seamless ให้เขียนประโยคที่ใส่เว็บคู่แข่งไม่ได้
• อีโมจิแทนไอคอน ให้ใช้ไอคอนชุดเดียวทั้งหน้า

6 กฎภาษาไทยที่คู่มือฝรั่งไม่มี

ข้อความไทยไม่มีเว้นวรรคระหว่างคำ จึงพังในแบบที่คู่มือภาษาอังกฤษไม่เตือน ตัวอย่างข้อหนึ่งคือใส่ minmax(0,1fr) ใน grid ที่มีข้อความไทย กันกรอบถูกดันกว้างเกินจอ อีกข้อคือ line-height ของเนื้อความไทยควรอย่างน้อย 1.6 เพื่อไม่ให้สระและวรรณยุกต์ชนบรรทัดบน และต้องเสิร์ฟหน้าเว็บด้วย charset=utf-8 ถ้าเจอข้อความล้นจอ ให้เช็ก charset ก่อนไล่แก้ CSS

ทำตามได้เลย

1. หาภาพหรือเว็บที่ชอบ 2-3 ตัว
2. สั่ง AI ให้สรุปสิ่งที่อ่านได้จากตัวอย่าง แล้วเขียน DESIGN.md ให้ดูก่อน
3. ให้ยึด DESIGN.md เป็นกฎตอนสร้างทุกหน้า
4. ไล่เช็กลิสต์ 14 ลายเซ็นกับหน้าที่ได้ ข้อไหนติดให้แก้ก่อนส่ง
5. เปิดบนมือถือจริงและตรวจว่าข้อความไทยไม่ล้นจอ

ติดตาม dotPAN ที่ Instagram เพื่ออ่านวิธีสั่ง AI ให้ได้งานดีไซน์ที่ใช้ได้จริง