Checklist Design คือเว็บรวมเช็กลิสต์งานออกแบบ UI…
ปัญหาที่มันแก้คือปัญหาคลาสสิกของคนทำผลิตภัณฑ์ เราออกแบบหน้าจอเสร็จ ดูสวยดี แต่ลืมคิดว่าถ้าไม่มีข้อมูลจะแสดงอะไร ลืมสถานะตอนกำลังโหลด ลืมตอนกดแล้วพัง ลืมว่าคนใช้คีย์บอร์ดอย่างเดียวจะใช้ยังไง พอไปเจอตอนเทสต์ก็ต้องย้อนกลับมาแก้
เว็บนี้แบ่งเป็นห้าหมวดใหญ่ตามสิ่งที่เรากำลังทำ มีเว็บไซต์ทั่วไป หน้า 404 หน้าราคา หน้าติดต่อ มีเว็บแอป ทั้งหน้าตั้งค่า หน้าแอดมิน หน้าแจ้งเตือน สถานะว่างเปล่า มีแอปมือถือ ทั้งหน้าสแปลช เพย์วอลล์ ตะกร้า มีดีไซน์ซิสเต็มลงลึกถึงระดับปุ่ม ช่องกรอก โมดัล ทูลทิป ตัวหนังสือ โทเคน และมีหมวดโฟลว์ที่ไล่เป็นขั้นตอน เช่น กดจ่ายเงิน รีเซ็ตรหัสผ่าน อัปโหลดไฟล์ ยกเลิกสมาชิก รวมกันเป็นร้อยกว่ารายการ
แต่ละอันไม่ใช่แค่รายการติ๊ก มันบอกด้วยว่าทำไมต้องมีข้อนั้น มีทิปเสริม มีลิงก์บทความอ้างอิงให้อ่านต่อ
จุดที่ผมว่าใช้ได้จริงกับยุคนี้คือมันก๊อปออกมาเป็น Markdown ได้ทั้งชุด แปลว่าเราโยนเข้า Claude หรือ ChatGPT แล้วสั่งให้มันเอาเช็กลิสต์นี้ไปไล่ตรวจงานที่เราเพิ่งทำเสร็จได้เลย กลายเป็นด่านตรวจอัตโนมัติที่เราไม่ต้องจำเอง
แล้วยังมีปลั๊กอิน Figma ให้ใช้เช็กลิสต์ในไฟล์งานได้โดยไม่ต้องสลับแท็บไปมา ล่าสุดในปลั๊กอินมีฟีเจอร์ให้ AI ช่วยรีวิวหน้าจอด้วย บอกว่าอะไรครบ อะไรขาด อะไรควรปรับ
คนทำชื่อ George Hatzis เป็นดีไซเนอร์อยู่ออสเตรเลีย เขาเล่าว่าทำขึ้นมาเพราะตัวเองลืมเรื่องเดิมซ้ำๆ เลยจดไว้ใช้เอง แล้วค่อยเปิดให้คนอื่นใช้ ปีนี้เขากลับมาปรับใหม่ทั้งเว็บและออกปลั๊กอินซึ่งเขาบอกว่าสร้างเองด้วย Cursor
ผมก็เห็นว่านี่คือสิ่งที่เอาไปใช้ได้ทันทีแม้ไม่ได้เป็นดีไซเนอร์ คนที่สั่ง AI ให้เขียนแอปให้ก็ยิ่งควรมี เพราะ AI มันสร้างหน้าจอที่ดูดีให้เราได้เร็วมาก แต่มันมักไม่คิดเผื่อกรณีที่ข้อมูลไม่มา คนกดผิด หรือเน็ตหลุด ซึ่งเป็นตอนที่ผู้ใช้จริงเจอมากที่สุด
checklist.design
อยากใช้ AI กับงานจริงเป็นระบบ?
เรียน Claude Method — วิธีคิดและลงมือใช้ Claude/AI กับงานจริง ตั้งแต่วันแรก
📍 โพสต้นฉบับบน Facebook: AI กับ Peesamac