Impeccable คืออะไร — Plugin ที่ทำให้ AI สร้าง UI ไม่เหมือน AI
ปัญหาของ UI ที่ AI สร้าง
เคยสังเกตไหมว่า UI ที่ AI สร้างมักจะ ดูเหมือนกันหมด? ฟอนต์ Inter, gradient สีม่วง-น้ำเงิน, dark mode พร้อม glow effect, glassmorphism ทุกที่, card ซ้อน card — นี่คือสิ่งที่เรียกว่า "AI Slop"
ปัญหาไม่ใช่ว่า AI สร้าง UI ไม่ได้ แต่มันสร้าง UI ที่ ดูเหมือน template เพราะ LLM เรียนรู้จาก pattern ที่พบบ่อยที่สุด
Impeccable คืออะไร?
Impeccable คือ plugin/skill package สำหรับ AI coding tools (Claude Code, Cursor, Gemini CLI ฯลฯ) ที่สร้างโดย Paul Bakaus ประกอบด้วย:
- 1 Core Skill (
frontend-design) — พื้นฐาน design ที่ถูกต้อง - 20 คำสั่งเฉพาะทาง — แต่ละคำสั่งแก้ปัญหา design ต่างกัน
- Anti-patterns — สิ่งที่ AI ชอบทำแต่ไม่ควรทำ
- 7 Reference Documents — คู่มือ typography, color, motion, layout ฯลฯ
License: Apache 2.0 (ฟรี)
20 คำสั่งที่มี
กลุ่มวิเคราะห์และตรวจสอบ
| คำสั่ง | หน้าที่ |
|---|---|
/teach-impeccable | ตั้งค่า design context ของโปรเจกต์ (ทำครั้งเดียว) |
/audit | ตรวจ accessibility, performance, responsive, anti-patterns — ให้คะแนน P0-P3 |
/critique | วิเคราะห์ UX ทั้งหมด — visual hierarchy, cognitive load, emotional journey |
กลุ่มปรับปรุง Style
| คำสั่ง | หน้าที่ |
|---|---|
/normalize | จัดให้ตรงตาม design system (spacing, tokens, patterns) |
/polish | Final pass แก้ alignment, spacing, consistency |
/distill | ลดความซับซ้อน ตัดสิ่งที่ไม่จำเป็นออก |
/clarify | ปรับ UX copy, error messages, labels ให้ชัดเจน |
/optimize | แก้ปัญหา performance (loading, animation, bundle size) |
/harden | เพิ่ม error handling, i18n, edge case management |
กลุ่มเพิ่มความสวย
| คำสั่ง | หน้าที่ |
|---|---|
/animate | เพิ่ม animation และ micro-interactions |
/colorize | เพิ่มสีให้ design ที่ดูจืด |
/bolder | ทำ design ที่ safe เกินไปให้น่าสนใจ |
/quieter | ลด intensity ของ design ที่แรงเกินไป |
/delight | เพิ่มความ surprise/personality |
/typeset | ปรับ typography ให้ดูมืออาชีพ |
/arrange | แก้ layout, spacing, visual rhythm |
กลุ่มเฉพาะทาง
| คำสั่ง | หน้าที่ |
|---|---|
/extract | ดึง reusable components ออกมา |
/adapt | ทำ responsive design ให้ทุก screen size |
/onboard | ออกแบบ onboarding flow, empty states |
/overdrive | Push ไปสุดทาง — shaders, physics, 60fps animation |
สิ่งที่ Impeccable สอนว่า "ห้ามทำ"
นี่คือ fingerprints ของ AI-generated UI ที่ Impeccable ช่วยหลีกเลี่ยง:
Typography
- ห้ามใช้ฟอนต์ยอดนิยมเกิน: Inter, Arial, Roboto, Open Sans
- ห้ามใช้ monospace font เป็น shorthand ของ "technical"
- ห้ามวาง icon ใหญ่ๆ มุมโค้งเหนือทุก heading
สี
- ห้ามใช้ text สีเทาบนพื้นสี — ใช้เฉดของสีนั้นแทน
- ห้ามใช้ดำบริสุทธิ์
#000หรือขาวบริสุทธิ์#fff— ต้อง tint เสมอ - ห้ามใช้ AI color palette: cyan-on-dark, purple-to-blue gradient, neon accents
- ห้ามใช้ gradient text สำหรับ headings
Layout
- ห้ามห่อทุกอย่างใน cards
- ห้ามซ้อน card ใน card
- ห้ามใช้ card grid ที่เหมือนกันหมด (icon + heading + text ซ้ำๆ)
- ห้าม center ทุกอย่าง — left-aligned + asymmetric ดู designed มากกว่า
- ห้ามใช้ spacing เท่ากันทุกที่ — ต้องมี rhythm
Visual
- ห้ามใช้ glassmorphism ทุกที่
- ห้ามใช้ generic drop shadow บน rounded rectangle
- ห้ามใช้ sparkline เป็น decoration ที่ไม่มีข้อมูลจริง
- ห้ามใช้ modal ถ้าไม่จำเป็น
Animation
- ห้ามใช้ bounce/elastic easing (ดู dated)
- ห้ามใช้ duration เกิน 500ms สำหรับ feedback
- ห้ามลืม
prefers-reduced-motion
ทำไมต้องใช้?
ถ้าคุณใช้ AI สร้าง frontend — Impeccable เปลี่ยน output จาก "ดูเหมือน AI ทำ" เป็น "ดูเหมือนนักออกแบบทำ"
มันไม่ได้แทนที่ designer แต่ช่วยให้ developer ที่ไม่ใช่ designer สร้าง UI ที่มีคุณภาพสูงขึ้นมากเมื่อทำงานกับ AI
อ่านวิธีติดตั้งและใช้งานจริงได้ในบทความถัดไป: วิธีใช้ Impeccable กับ Claude Code