2 min read ai-agent

UI/UX Pro Max vs Impeccable — สอง design skill สำหรับ AI agents ที่ใช้ร่วมกันได้ลงตัวกว่าที่คิด

UI/UX Pro Max vs Impeccable สอง design skill สำหรับ AI agents ตอนนี้มีดาวน์โหลดรวมกันเกินแสนครั้งบน GitHub สองโปรเจกต์นี้มาจากคนละทีม คนละปรัชญา และแก้ปัญหาคนละมุมของการทำ UI ด้วย AI

ผมนั่งดู source code, README, docs และลองรันทั้งสองตัวบน Claude Code จนได้ข้อสรุปหนึ่ง: มันไม่ใช่ของที่ต้องเลือกอย่างใดอย่างหนึ่ง

รู้จักสองตัวนี้แบบเร็ว ๆ

UI/UX Pro Max โดย NextLevelBuilder — 87k stars, MIT license

ตัวนี้เป็นฐานข้อมูลดีไซน์ขนาดใหญ่บวกกับ reasoning engine ที่ตัดสินใจให้ว่าหน้าตา UI ควรเป็นยังไงตามประเภทโปรดักต์ คุณแค่บอกว่า "ทำ dashboard การเงินให้หน่อย" หรือ "ทำ landing page สปาหน่อย" engine จะค้นฐานข้อมูล 5 มิติ (product type, style, color palette, layout pattern, typography) แล้วยิง design system ออกมาหนึ่งชุด

ข้อมูลข้างใน: 67+ สไตล์, 161 ชุดสีที่ผูกกับ product type แบบ 1:1, 57 font pairings, 25 chart types, 99 UX guidelines, และ 161 industry rules

Impeccable โดย Paul Bakaus — 31.5k stars, Apache 2.0

ตัวนี้คนละแนวเลย มันคือ "ภาษาและคำสั่งดีไซน์" สำหรับใช้ audit, critique, polish UI ที่คุณมีอยู่แล้ว แทนที่จะ generate ใหม่ตั้งแต่ศูนย์ มี 7 domain references (typography, color, spacing, motion, interaction, responsive, UX writing), 23 คำสั่งอย่าง /impeccable audit, /impeccable polish, /impeccable typeset, และตัวจับ anti-pattern อีก 27 กฎ

ถ้าจะให้เห็นภาพเร็วที่สุด:

  • ยังไม่มี design system → UI/UX Pro Max
  • มี UI อยู่แล้ว อยากให้มันดีขึ้น → Impeccable

วิธีคิดของแต่ละตัว

UI/UX Pro Max เกิดจากโจทย์ที่ว่า developer ส่วนใหญ่ไม่มี design sense และ AI มักผลิต UI ออกมา generic เกินไป — purple gradient, Inter ทุกที่, card ซ้อน card engine ก็เลยถูกสร้างให้ "ตัดสินใจแทน" โดยอิง industry best practice

สิ่งที่ผมว่าฉลาด: มันไม่ได้แค่สุ่ม palette หรือ font จากฐานข้อมูล แต่มัน reasoning ข้าม domain เช่น product type fintech จะถูกจับคู่กับ dark theme + sans-serif แบบ trust-oriented + สีน้ำเงิน-เทา โดยมี anti-pattern filter คอยกันไม่ให้ของที่ขัดกันหลุดออกมา

Impeccable มาจากหัวคนละแบบ Paul Bakaus อดีต Google developer advocate ที่คลุกกับ web performance และ UI engineering มานาน เขาแก้ปัญหา "AI เขียน CSS และ component ได้ แต่ยังดู amateur" ด้วยการสร้าง vocabulary ที่แปลงปัญหา design จริง ๆ ให้เป็นคำสั่ง deterministic

แทนที่จะบอก AI ว่า "ทำให้ UI สวยขึ้น" ซึ่งไม่มีทางรู้ว่า AI จะ interpret ยังไง คุณใช้ /impeccable typeset แล้วมันจะเช็ค vertical rhythm, measure, heading scale / /impeccable layout จะเช็ค spacing, alignment, visual weight แบบมีกฎตายตัว ไม่ได้ opinion ลอย ๆ

จุดที่ต่างกันชัด ๆ

ข้อมูล vs กฎ

Pro Max เน้น "รู้เยอะ" — ฐานข้อมูลใหญ่ บอกได้ว่าถ้าทำ healthcare dashboard ควรใช้สีอะไร font อะไร layout pattern แบบไหน Impeccable เน้น "ตรวจแม่น" — มีกฎ deterministic 27 ข้อที่เช็คของอย่าง gray text บนพื้นสี, pure black, bounce easing, card ซ้อน card พวกนี้คือ bug เชิงดีไซน์ที่จับได้แบบ false positive ต่ำ

Generate vs Iterate

Pro Max สร้าง design system จากศูนย์ Impeccable รับ UI ที่มีอยู่แล้วมาขัด คุณมีหน้า landing ที่ AI generate มาแล้ว — Pro Max ไม่ช่วยอะไรต่อ แต่ Impeccable จะ audit → critique → polish → typeset จนกว่าจะไม่เหลือกลิ่น AI

Auto vs Explicit

Pro Max ถูกออกแบบให้ AI agent เรียกใช้โดยอัตโนมัติ — คุณพิมพ์ requirement เกี่ยวกับ product แล้ว engine ทำงานเอง Impeccable ต้องสั่งผ่าน /impeccable <command> ชัดเจน แต่ข้อดีคือมันมี CLI (npx impeccable detect) ที่รันแบบไม่มี AI harness ก็ได้ เอาไปใส่ CI/CD pipeline ได้เลย

ใช้ตอนไหน

UI/UX Pro Max:

  • เริ่มโปรเจกต์ใหม่ที่ยังไม่มี design system — MVP, internal tool, dashboard รายงาน
  • อยากให้ dev ที่ไม่มี designer ในทีมสร้าง UI ที่ดู "ปลอดภัย" ตามมาตรฐาน industry
  • ต้องการ design system เก็บเป็นไฟล์ MASTER.md ให้ agent ตัวอื่นอ่านต่อใน multi-agent workflow

ตัวอย่าง: คุณกำลังทำ dashboard สำหรับระบบ logistics ภายใน แล้วไม่มี designer เลย คุณบอก Pro Max ว่า product type คือ logistics + operations dashboard engine จะคาย color palette (น้ำเงิน-ส้มแบบ industrial), font pairing (Inter + IBM Plex Mono สำหรับตัวเลขตาราง), chart types ที่เหมาะกับ shipment tracking, และ layout pattern แบบ data-dense dashboard ออกมา

Impeccable:

  • มี UI อยู่แล้ว แต่อยาก audit คุณภาพ — ใช้กับทุก component, ทุกหน้า
  • ทำ design linting ใน CI/CD — npx impeccable detect src/ ก่อน merge PR
  • เทรนทีมให้พูดภาษาดีไซน์กับ AI — ก่อน merge UI PR ใด ๆ รัน /impeccable audit + /impeccable polish

ตัวอย่าง: ทีม dev สร้างหน้า settings สำหรับ SaaS product มาแล้ว คุณรัน /impeccable audit settings → มันเจอ gray text บนพื้น #F5F5F5 ซึ่ง contrast ไม่พอ, ปุ่ม primary กับ secondary ขนาดเท่ากันทำให้น้ำหนักภาพไม่ต่าง, และ form label ใช้ line-height default ที่ชิดกับ input field เกินไป จากนั้น /impeccable typeset ก็ปรับ vertical rhythm ให้ label, input, และ helper text หายใจได้

ใช้ร่วมกัน

นี่คือส่วนที่ผมตื่นเต้นที่สุด สองตัวนี้ complement กันแบบที่ผมไม่ค่อยเห็นใน tool category เดียวกัน

multi-agent orchestration scenario:

  1. Agent A (Design Strategist) → UI/UX Pro Max — สร้าง design system สำหรับ product/page
  2. Agent B (Implementer) → ใช้ design system จาก Agent A เขียนโค้ด
  3. Agent C (Design QA) → Impeccable audit/critique/polish กับโค้ดที่ Agent B เขียน ปิด anti-pattern ให้หมด

หรือ simpler workflow สำหรับ dev เดี่ยว:

  1. uipro generate design system → ได้ MASTER.md
  2. เขียน UI ตามนั้น
  3. /impeccable audit + /impeccable polish → UI สะอาด ไม่มีกลิ่น AI

ข้อสังเกตส่วนตัว

หลังจากลองใช้ทั้งสองตัวบน Claude Code สองสามอาทิตย์:

Pro Max เก่งเรื่อง "ตัดสินใจครั้งแรก" — มันลดเวลาที่ผมเสียไปกับการเถียงกับ AI ว่าควรใช้สีอะไร font อะไร เพราะ engine ตอบแบบมี industry rule รองรับ ไม่ใช่ random suggestion

จุดอ่อน: engine reasoning ยังผูกกับ product type ที่มีในฐานข้อมูล ถ้าคุณทำอะไรที่ niche หรือ hybrid (เช่น marketplace สำหรับงานศิลปะ + fintech) engine อาจงง เพราะไม่มี rule ตายตัวสำหรับ combination นั้น

Impeccable เก่งเรื่อง "จับของที่คนมองข้าม" — gray text, pure black, bounce easing, card ซ้อน card พวกนี้คือสิ่งที่ AI ชอบทำและคนตรวจ code ไม่ค่อยเห็น npx impeccable detect จับให้หมดในไม่กี่วินาที

จุดอ่อน: มันไม่ช่วยคุณตัดสินใจว่า "ควรใช้สีอะไร" หรือ "layout ควรเป็นยังไง" — มันขัดเกลาของที่มีอยู่แล้วให้ดีขึ้น แต่ไม่ generate ใหม่

สรุป

สองตัวนี้ไม่ใช่คู่แข่ง มันคือคนละเลเยอร์ใน stack การทำ UI ด้วย AI

ถ้าคุณเป็นทีม dev เล็ก ๆ ที่ไม่มี designer: เริ่มจาก Pro Max เพื่อให้มี design system ปลอดภัยไว้ก่อน แล้วค่อยเปิด Impeccable เพื่อ audit และ polish output ให้ดูไม่เหมือน AI ทำ

ถ้าคุณมี designer ในทีมอยู่แล้ว: Pro Max อาจไม่จำเป็น แต่ Impeccable จะช่วยให้ dev กับ designer คุยภาษาเดียวกันผ่าน command vocabulary และจับ anti-pattern ก่อน merge

ถ้าคุณสร้าง multi-agent system: เอาทั้งสองตัวเข้าไปใน pipeline — ตัวนึงสร้าง blueprint อีกตัวตรวจสุขภาพ UI ที่ได้

📌 แหล่งอ้างอิง

Share

29dev AI Tech