Impeccable: ให้ AI ทำเว็บแล้วไม่ดูเป็นเว็บ AI

ลองสั่ง AI ให้ทำหน้าเว็บสักหน้า แล้วเอาไปวางเทียบกับเว็บที่คนอื่นให้ AI ทำ หลายครั้งจะเห็นว่าหน้าตาคล้ายกันจนน่าแปลกใจ ฟอนต์แบบเดิม สีไล่โทนเดิม กล่องซ้อนกล่องแบบเดิม คนที่ดูเว็บบ่อยๆ มองแวบเดียวก็รู้ว่าหน้านี้ AI ทำ

Impeccable คือชุดกฎการออกแบบและคำสั่งที่เราติดตั้งให้เครื่องมือเขียนโค้ดด้วย AI อย่าง Claude Code, Cursor และ Codex เพื่อให้ AI ออกแบบโดยคิดถึงตัวงานของเรา แทนที่จะหยิบค่ากลางๆ มาใช้ ติดตั้งด้วยคำสั่งเดียว แล้วสั่งงานผ่านแชตได้เลยครับ

จบบทความนี้คุณจะ:

• รู้ว่าทำไมเว็บที่ AI ทำมักหน้าตาซ้ำกัน และมีจุดสังเกตอะไรบ้าง
• ติดตั้ง Impeccable และสร้างไฟล์ PRODUCT.md ให้โปรเจกต์
• เลือกใช้คำสั่ง polish, critique, audit, distill และ bolder ได้ถูกจังหวะ
• มีลำดับการทำงาน critique แล้วแก้ แล้ว polish ไว้ใช้กับงานจริง

ดูคลิปสั้นก่อนก็ได้ครับ ยาวแค่ 1 นาที

ทำไมเว็บที่ AI ทำถึงหน้าตาเหมือนกัน

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

ทางแก้จึงไม่ใช่การสั่งว่า "ทำให้สวยขึ้น" เพราะ AI ไม่รู้ว่าสวยของเราคืออะไร สิ่งที่ช่วยได้จริงคือส่ง AI ไปเรียนออกแบบ ซึ่ง Impeccable ทำให้สามอย่าง

1. หลักสูตร กฎการออกแบบเรื่องตัวอักษร สี ระยะห่าง และลำดับความสำคัญ ที่ AI ต้องทำตาม
2. ใบบรีฟงาน ไฟล์ PRODUCT.md ที่บอกว่าเว็บนี้ทำให้ใคร ใช้น้ำเสียงแบบไหน
3. ครูคุมสอบ ตัวตรวจที่คอยจับจุดสังเกตแบบ AI ณ ตอนทำคู่มือ (ต.ค. 2026) มีกฎตรวจจับ 59 ข้อ และจำนวนนี้อาจเพิ่มขึ้นตามเวอร์ชัน

ข้อมูลโปรเจกต์สำคัญพอๆ กับกฎ นักออกแบบที่รู้กฎครบแต่ไม่รู้จักลูกค้า ก็ยังทำงานออกมากลางๆ อยู่ดี กฎบอกว่าอะไรไม่ควรทำ ส่วนข้อมูลโปรเจกต์บอกว่าควรทำอะไรแทน สองอย่างนี้ต้องมาคู่กัน

ศัพท์ที่ต้องรู้

เตรียมเครื่อง

ต้องมีสองอย่างครับ

• เครื่องมือเขียนโค้ดด้วย AI อย่างน้อยหนึ่งตัว ได้แก่ Claude Code, Cursor หรือ Codex ที่ใช้งานได้แล้ว
• Node.js รุ่น LTS เพราะคำสั่งติดตั้งใช้ npx ซึ่งมาพร้อม Node.js

node -v
npx -v

v24.x.x
11.x.x

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

เซฟงานก่อนเริ่ม ถ้าโปรเจกต์ใช้ Git อยู่ ให้ commit งานปัจจุบันไว้ก่อน พอ AI แก้ดีไซน์แล้วไม่ชอบ จะได้ย้อนกลับได้ทันที และเปิดดูได้ว่ามันแก้ไฟล์ไหนไปบ้าง

ติดตั้งด้วยคำสั่งเดียว

เปิดโฟลเดอร์โปรเจกต์ใน VS Code แล้วเปิด Terminal จากเมนู Terminal > New Terminal ที่ต้องเปิดจากใน VS Code เพราะ Terminal จะเริ่มอยู่ในโฟลเดอร์โปรเจกต์ให้เลย ซึ่งสำคัญตอนเลือกติดตั้งแบบรายโปรเจกต์

npx impeccable install

ครั้งแรก npm อาจถามว่าจะดาวน์โหลดแพ็กเกจ impeccable ไหม ให้ตอบ y จากนั้นตัวติดตั้งจะถามสองคำถาม

1. ใช้เครื่องมือ AI ตัวไหน ตัวติดตั้งจะเดาจากโฟลเดอร์ตั้งค่าที่เจอในเครื่อง เช่น ~/.claude ของ Claude Code หรือ .cursor ในโปรเจกต์ ถ้าเดาถูกก็กดยืนยัน ถ้าไม่ถูกก็เลือกเอง
2. ติดตั้งในโปรเจกต์นี้ หรือทั้งเครื่อง (global) แนะนำให้เลือกโปรเจกต์ เพราะกฎจะอยู่กับโปรเจกต์นี้ ไม่ไปกระทบงานอื่น และถ้าเก็บโปรเจกต์ใน Git เพื่อนในทีมก็ได้กฎชุดเดียวกัน

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

ผู้ใช้ Codex มีอีกหนึ่งขั้น หลังติดตั้งให้พิมพ์ /hooks ในช่องแชตของ Codex แล้วกดอนุญาต hook ของโปรเจกต์ hook คือขั้นตอนเล็กๆ ที่ทำงานอัตโนมัติ Codex จะไม่ยอมให้ hook ไหนทำงานจนกว่าเราจะอนุญาตเอง และหลังอัปเดตบางครั้งอาจถามซ้ำ

บน Windows ถ้าขึ้นข้อความว่า running scripts is disabled ให้ใช้ npx.cmd impeccable install แทน

เช็กว่าได้แล้ว: พิมพ์ /impeccable ในช่องแชตของ AI แล้วเห็นคำสั่งขึ้นมาให้เลือก หรือ AI รับคำสั่งไปทำได้

ปูพื้นด้วย /impeccable init

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

/impeccable init

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

## Users
- คนทำงานแถวออฟฟิศ สั่งกาแฟจากมือถือก่อนเดินมารับ
 
## Product Purpose
สั่งล่วงหน้าแล้วเดินมารับได้เลย ไม่ต้องต่อคิว
 
## Operating Context
ลูกค้าเปิดจากมือถือระหว่างเดิน ต้องกดได้ด้วยนิ้วเดียว

ไฟล์นี้คือเหตุผลที่ผลงานหลังติดตั้ง Impeccable ไม่กลางๆ เวลาเราสั่งแก้หน้าไหน AI จะกลับมาอ่านบรีฟนี้ก่อนตัดสินใจเลือกฟอนต์ สี และการจัดวาง อย่างเว็บ DevKub เองก็เก็บ PRODUCT.md แบบนี้ไว้ใน repo ข้างในเขียนไว้ว่าผู้อ่านส่วนใหญ่ใช้มือถือ AI ที่ช่วยทำหน้าเว็บจึงรู้ว่าต้องคิดจากจอเล็กก่อนเสมอ

เช็กว่าได้แล้ว: มีไฟล์ PRODUCT.md อยู่ในโฟลเดอร์โปรเจกต์ และเนื้อหาตรงกับที่เราตอบไป

แก้บรีฟเองได้ตลอด PRODUCT.md เป็นไฟล์ข้อความธรรมดา ถ้าอ่านแล้วมีตรงไหนไม่ตรงกับความจริง เปิดแก้เองได้เลย ยิ่งบรีฟชัด งานที่ได้ยิ่งตรงใจ

คำสั่งหลัก 5 ตัว

คำสั่งทั้งหมดพิมพ์ในช่องแชตของ AI รูปแบบคือ /impeccable ตามด้วยชื่อคำสั่ง แล้วตามด้วยส่วนที่อยากให้ทำ เช่น landing ซึ่งหมายถึงหน้า landing page ของเรา จะเปลี่ยนเป็นชื่อหน้าอื่นหรือส่วนอื่นของเว็บก็ได้

นอกจากชื่อคำสั่ง เราพิมพ์เป็นประโยคธรรมดาก็ได้ เช่น

/impeccable redo this hero section

ประโยคนี้สั่งให้ทำส่วน hero (แถบใหญ่ด้านบนสุดของหน้า) ใหม่ทั้งส่วน เหมาะกับตอนที่รู้ว่าอยากแก้ตรงไหน แต่ไม่รู้ว่าเข้ากับคำสั่งไหน

ลำดับการทำงานที่แนะนำ

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

ตัวอย่างการคุยในหนึ่งรอบ

/impeccable critique landing
แก้ข้อ 1 กับข้อ 3 ก่อน ข้อ 2 ยังไม่ต้อง
/impeccable critique landing
/impeccable audit landing
/impeccable polish landing

1. critique อ่านรายการปัญหาที่ได้ ไม่จำเป็นต้องเชื่อทุกข้อ เราเป็นเจ้าของงาน
2. สั่งแก้ทีละเรื่อง เลือกข้อที่เห็นด้วยแล้วสั่งแก้ แก้ทีละไม่กี่ข้อจะตรวจง่ายกว่าแก้ทั้งหมดรวดเดียว
3. critique ซ้ำ ดูว่าปัญหาหายจริงไหม แล้ววนข้อ 2 จนพอใจ
4. audit เช็กเรื่องที่ตามองไม่เห็น เช่น สีตัวอักษรอ่านยากไหม จอมือถือพังไหม
5. polish เก็บรายละเอียดรอบสุดท้าย แล้วค่อยปล่อยงาน

commit ทุกครั้งที่จบหนึ่งรอบ แต่ละรอบ AI อาจแก้หลายไฟล์ ถ้า commit ไว้ทุกครั้งที่ได้ผลที่พอใจ รอบถัดไปพังก็ย้อนกลับได้ง่าย และเปิดดูได้ว่าแต่ละคำสั่งเปลี่ยนอะไรไปบ้าง

อัปเดต และทางเลือกการติดตั้ง

Impeccable อัปเดตกฎอยู่เรื่อยๆ สั่งอัปเดตจากโฟลเดอร์โปรเจกต์ได้ด้วยคำสั่งนี้

npx impeccable update

ถ้าใช้ Claude Code ยังมีอีกทางคือติดตั้งเป็น plugin ผ่านแชตของ Claude Code โดยตรง พิมพ์ทีละบรรทัด

/plugin marketplace add pbakaus/impeccable
/plugin

บรรทัดแรกเพิ่มร้านค้า plugin ของ Impeccable เข้าไปในรายการ บรรทัดที่สองเปิดหน้ารายการ plugin ให้เลือก Impeccable แล้วกดติดตั้ง ทางนี้ใช้ได้กับ Claude Code เท่านั้น ส่วนผู้ใช้ Codex หลังอัปเดตอย่าลืมเปิด /hooks ดูอีกครั้ง เผื่อต้องอนุญาตซ้ำ รายละเอียดและคำสั่งอื่นๆ ทั้งหมดอยู่ที่ impeccable.style

เจอปัญหา ลองเช็กตามนี้

สรุป

• เว็บที่ AI ทำมักหน้าตาซ้ำกัน เพราะไม่ได้รับบรีฟ จึงเลือกค่ายอดนิยม เช่น ฟอนต์ Inter ไล่สีม่วงฟ้า และการ์ดซ้อนการ์ด
• Impeccable ส่ง AI ไปเรียนออกแบบ ทั้งกฎการออกแบบ ใบบรีฟ และตัวตรวจจับจุดสังเกตแบบ AI
• ติดตั้งด้วย npx impeccable install เลือกเครื่องมือ AI และแนะนำให้ติดตั้งรายโปรเจกต์
• /impeccable init ในแชตของ AI สร้าง PRODUCT.md ให้ AI รู้จักงานของเรา
• เริ่มจาก critique แล้วแก้ทีละเรื่อง audit แล้วค่อย polish ก่อนปล่อยงาน

พร้อมแล้วก็ไปทำ Quiz ท้ายบทด้านล่างเพื่อรับ XP ได้เลยครับ