วิธีใช้ Impeccable กับ Claude Code — จาก AI Slop สู่ Production-Grade UI

ติดตั้ง Impeccable

วิธีที่ 1: ดาวน์โหลดจาก impeccable.style (แนะนำ)

1. ไปที่ impeccable.style
2. เลือก bundle สำหรับ Claude Code
3. ดาวน์โหลด ZIP แล้วแตกไฟล์
4. copy โฟลเดอร์ .claude ไปไว้ในโปรเจกต์

วิธีที่ 2: Copy จาก Repository

# สำหรับโปรเจกต์เดียว
cp -r dist/claude-code/.claude your-project/

# สำหรับทุกโปรเจกต์ (global)
cp -r dist/claude-code/.claude/* ~/.claude/

ตรวจสอบว่าติดตั้งสำเร็จ

เปิด Claude Code แล้วพิมพ์ /audit — ถ้าเห็น Impeccable เริ่มทำงาน แสดงว่าติดตั้งสำเร็จ

ขั้นตอนที่ 1: ตั้งค่า Design Context

สิ่งแรกที่ต้องทำ คือรัน /teach-impeccable เพื่อบอก AI ว่าโปรเจกต์นี้ต้องการ design แบบไหน

/teach-impeccable

Impeccable จะ:

Step 1 — สำรวจ Codebase

อ่าน package.json, components, CSS variables, design tokens ที่มีอยู่แล้ว

Step 2 — ถามคำถาม UX

• Users: ใครใช้? ทำอะไร? ต้องการรู้สึกอย่างไร?
• Brand: บุคลิกแบรนด์ 3 คำ? เว็บอ้างอิง? เว็บที่ไม่อยากเหมือน?
• Aesthetic: Light/Dark mode? สไตล์ visual? ข้อจำกัดด้านสี?

Step 3 — สร้าง Design Context

บันทึกผลลัพธ์ลงในไฟล์ .impeccable.md ที่ root ของโปรเจกต์ ประกอบด้วย:

• Users & Context
• Brand Personality
• Aesthetic Direction
• Design Principles (3-5 ข้อ)

ทำครั้งเดียว — คำสั่งอื่นๆ ทั้งหมดจะอ่านจากไฟล์นี้

ขั้นตอนที่ 2: ตรวจสอบ Design ปัจจุบัน

/audit — ตรวจ Technical Quality

/audit

ได้รายงาน scored report:

• Accessibility — contrast ratio, focus indicators, alt text
• Performance — bundle size, animation, rendering
• Responsive — breakpoints, touch targets
• Anti-patterns — AI slop detection

แต่ละปัญหาจะมี severity P0-P3:

• P0 — ใช้งานไม่ได้ ต้องแก้ทันที
• P1 — กระทบ user experience มาก
• P2 — ควรแก้ แต่ไม่เร่งด่วน
• P3 — Nice to have

/critique — ตรวจ UX Design

/critique

วิเคราะห์ลึกกว่า /audit:

• Visual Hierarchy — ตาเห็นอะไรก่อน?
• Cognitive Load — ข้อมูลมากเกินไหม?
• Emotional Journey — รู้สึกอย่างไรเมื่อใช้งาน?
• AI Slop Detection — ดูเหมือน AI ทำไหม?
• Persona Testing — ทดสอบกับ persona 2-3 คน

ผลลัพธ์คือ Nielsen's Heuristics score 0-40 พร้อม action plan

ขั้นตอนที่ 3: แก้ไขตามผลวิเคราะห์

Workflow ที่แนะนำ

จาก audit/critique จะได้ list ปัญหา — ใช้คำสั่งเฉพาะทางแก้แต่ละปัญหา:

Nav ล้นบน mobile?

/adapt nav

Homepage ดูจืด ไม่มีชีวิตชีวา?

/delight homepage

Typography ไม่มี hierarchy?

/typeset

Layout spacing ไม่สม่ำเสมอ?

/arrange

Copy ไม่ชัดเจน?

/clarify error-messages

ต้องการ animation?

/animate modal

ตัวอย่าง Workflow จริง

นี่คือ workflow ที่ผมใช้จริงในการปรับปรุงเว็บ blog นี้:

1. ตั้งค่า

/teach-impeccable

บอกว่า target audience คือคนไทยและต่างชาติ, สไตล์ Apple-inspired, เน้น content-first

2. วิเคราะห์

/critique

ได้ score 24/40 พบปัญหาหลัก:

• Homepage ไม่มี personality (P1)
• Nav ล้นบน mobile (P1)
• Products page เป็น text wall (P2)
• ไม่มีรูปภาพเลย (P2)
• ภาษาผสม EN/TH ไม่สม่ำเสมอ (P3)

3. แก้ไขทีละจุด

/adapt    → แก้ Nav responsive
/delight  → เพิ่ม personality ให้ homepage
/arrange  → ปรับ Products page layout
/bolder   → เพิ่ม visual elements (color accents)
/clarify  → ปรับภาษาให้สม่ำเสมอ
/polish   → Final pass

4. ตรวจสอบอีกครั้ง

/critique

Score ดีขึ้น — ปัญหา P1 หมดไป

เทคนิคการใช้งาน

1. เริ่มจาก /teach-impeccable เสมอ

ถ้าไม่ตั้งค่า design context ก่อน — คำสั่งอื่นจะให้ผลแบบ generic

2. /audit ก่อน /critique

/audit ตรวจ technical issues (เร็ว), /critique ตรวจ UX design (ละเอียดกว่า)

3. ระบุ scope ถ้าทำได้

/polish checkout-form    # เฉพาะ checkout form
/animate modal           # เฉพาะ modal
/audit header            # เฉพาะ header

ดีกว่าสั่งแบบกว้างๆ

4. จบด้วย /polish เสมอ

หลังแก้ไขเสร็จ รัน /polish เป็น final pass เพื่อจับ spacing, alignment, consistency ที่หลุด

5. รัน /critique ซ้ำหลังแก้

เพื่อดูว่า score ดีขึ้นจริงและไม่มีปัญหาใหม่

สรุป

Impeccable ไม่ใช่ magic — แต่มันให้ framework ที่ชัดเจน ในการปรับปรุง design เมื่อทำงานกับ AI ผลลัพธ์คือ UI ที่ดูเหมือน คนออกแบบ ไม่ใช่ AI สร้าง

Related: Impeccable คืออะไร · Claude Code