รีวิว Impeccable — skill ที่ช่วยให้ AI ออกแบบหน้าเว็บไม่ซ้ำแบบเดิมๆ

คืออะไร

Impeccable คือ design guidance สำหรับ AI coding agent ตัวเดียว เจ้าของ repo อธิบายไว้ว่าเป็น “The design language that makes your AI harness better at design.” ภายในมี skill ชื่อ impeccable หนึ่งตัว, คำสั่ง 24 ตัว, โหมดวนปรับหน้าตาแบบสดในเบราว์เซอร์ และ detector rules แบบ deterministic 61 ข้อ สำหรับตรวจงาน frontend ที่ AI สร้าง

repo เขียนด้วย JavaScript, มีหน้าเอกสารที่ impeccable.style และใน README ระบุว่าแนวคิดนี้เริ่มต้นจาก Anthropic frontend-design skill ซึ่ง README บอกว่าเป็น design skill ตัวแรกที่ถูกใช้แพร่หลายสำหรับ Claude

จุดเด่น

• setup ครั้งเดียว: /impeccable init จะสำรวจโปรเจกต์ ถามเฉพาะข้อมูลที่ยังขาด แล้วเขียน PRODUCT.md ให้ (audience, purpose, ข้อจำกัด, tone) คำสั่งหลังจากนั้นจะรู้บริบทโปรเจกต์ โดยแยกจากการเลือกทิศทางด้านภาพ
• 24 commands ครอบคลุมตั้งแต่ shape (วางโครง UX/UI ก่อนเขียนโค้ด), critique, audit (a11y, performance, responsive), polish, harden (error handling, i18n, text overflow), animate, bolder, quieter จนถึง live และ generate ที่ทำงานในเบราว์เซอร์
• detector rules 61 ข้อแบบ deterministic รันได้โดยไม่ต้องใช้ LLM และไม่ต้องใช้ API key ทั้ง CLI และ browser extension
• มี anti-pattern guidance ชัดเจน เช่น อย่าใช้ฟอนต์อย่าง Inter, Arial, อย่าใช้ข้อความสีเทาบนพื้นสี, อย่าซ้อน card, อย่าใช้ easing แบบ bounce/elastic
• pin คำสั่งที่ใช้บ่อยเป็น shortcut ได้ เช่น /impeccable pin audit เป็น /audit
• ติดตั้งได้หลายทาง: CLI installer, Git submodule, plugin store, ZIP จากเว็บ, หรือ copy จากโฟลเดอร์ dist/

เหมาะกับใคร

• คนที่ใช้ AI coding agent อย่าง Claude Code, Cursor, Codex CLI, Gemini CLI, GitHub Copilot, Grok Build, Hermes, Trae, Rovo Dev ฯลฯ แล้วอยากให้งาน UI/UX ที่ agent ทำออกมาไม่ซ้ำแบบเดิมๆ
• ทีมที่มี design system อยู่แล้ว และอยากให้ agent ใช้บริบทผลิตภัณฑ์ชุดเดียวกัน (มีคำสั่ง document และ extract ช่วยดึง design system จากโค้ดเดิม)
• คนที่อยากได้ checks แบบตรวจสอบผลได้ (detector rules) คู่กับการวิจารณ์แบบ LLM

เริ่มต้นใช้งาน

วิธีที่ README แนะนำ คือรันจาก root ของโปรเจกต์:

npx impeccable install

แล้วใน AI coding tool ของคุณรัน:

/impeccable init

ถ้าอยากอัปเดต install เดิม:

npx impeccable update

ตัวอย่างการใช้งาน:

/impeccable audit blog           # Audit blog hub + post pages
/impeccable critique landing     # UX design review
/impeccable polish settings      # Final pass before shipping
/impeccable harden checkout      # Add error handling + edge cases

ข้อควรรู้

• License: Apache License 2.0 (Apache-2.0) เป็น license แบบ permissive ใช้เชิงพาณิชย์ได้ แต่ยังควรอ่านเงื่อนไขจริงก่อนนำไปใช้
• ความสดใหม่: push ล่าสุด 6 ต.ค. 2026 และมี issue/PR เปิดอยู่ 63 รายการ โปรเจกต์ยังเคลื่อนไหวอยู่
• อายุโปรเจกต์: สร้างเมื่อ 16 พ.ย. 2025 ยังไม่ถึง 1 ปี รายละเอียดการติดตั้งและชื่อคำสั่งอาจเปลี่ยนได้เร็ว
• ตัวเลข: ดาว 77.1k, fork 4.6k (ข้อมูล ณ 6 ต.ค. 2026) repo ภาษาหลักคือ JavaScript
• ข้อจำกัดที่เห็นจาก README: แต่ละ harness มีขั้นตอนเพิ่มเติมเช่น Cursor ต้องเปิด Nightly channel และ enable Agent Skills, Gemini CLI ต้องติดตั้งเวอร์ชัน preview แล้วเปิด Skills, Codex ต้องอนุมัติ hook ที่ /hooks อีกครั้งเมื่อ hook definition เปลี่ยน, Grok Build ต้อง trust project folder ก่อน hook จะรัน และบาง provider (เช่น Hermes, Veto) ไม่มี hook surface จึงได้แค่ skill
• การตรวจด้วย detector rules เป็นการตรวจตามกฎที่กำหนดไว้ ไม่ใช่การรับรองความสวยงาม ส่วน critique เป็นการวิจารณ์ที่ต้องใช้ LLM

🔗 https://github.com/pbakaus/impeccable

ข้อมูลจาก GitHub ณ 6 ต.ค. 2026: ⭐ 77,066 | ภาษา JavaScript | license Apache-2.0