Impeccable คือทักษะ Claude Code แบบโอเพนซอร์สที่สร้างโดย Paul Bakaus เพื่อแก้ไขปัญหา "AI slop" ในการสร้าง frontend ด้วย AI โดยตรง จุดแข็งของ Impeccable คือการเสริมคำสั่งควบคุม 20 รายการ (/audit, /polish, /critique ฯลฯ), ไฟล์อ้างอิงการออกแบบเฉพาะโดเมน 7 ไฟล์ และชุด anti-pattern ที่ช่วยให้โมเดลรู้ว่าสิ่งใด "ไม่ควร" สร้าง คุณจะได้ UI ที่ดูมืออาชีพมากกว่าการสร้างอัตโนมัติทั่วไป
ทำไม frontend ที่สร้างโดย AI ทุกอันถึงดูเหมือนกันหมด
ถ้าคุณเคยลองใช้ AI เขียนแดชบอร์ด, แลนดิ้งเพจ หรือแผงการตั้งค่า คุณจะเห็นลักษณะเดิมๆ เช่น ฟอนต์ Inter, การไล่ระดับสีม่วง-น้ำเงิน, การ์ดซ้อนกัน, ข้อความสีเทา, ส่วนฮีโร่ตัวเลขใหญ่, ป้ายเล็ก, เอฟเฟกต์เรืองแสง หรือกลาสมอร์ฟิซึม
ทั้งหมดนี้เกิดจากการฝึกโมเดลด้วยเทมเพลตซ้ำๆ กัน ผลลัพธ์คือ UI ใช้งานได้ แต่ไร้เอกลักษณ์และจดจำไม่ได้
Impeccable ออกแบบมาเพื่อแก้ปัญหานี้โดยตรง โดยต่อยอดจากความสามารถของ frontend-design ของ Anthropic เพิ่มความลึก, ความครอบคลุม และข้อจำกัดที่ทำให้ AI หลุดจากรูปแบบซ้ำซาก
💡ก่อนใช้ /audit, /polish หรือ /overdrive ใน Claude Code กับ Impeccable ดาวน์โหลด Apidog ฟรี เพื่อทดสอบและดีบัก API ที่ frontend สร้างโดย AI คุณจะตรวจสอบเพย์โหลด, โทเค็น, รูปแบบการตอบกลับ และข้อมูลจำลองได้ในไม่กี่วินาที ลดปัญหาการผสาน UI กับ backend ที่ยังไม่พร้อม
Impeccable คืออะไร
Impeccable คือชุดทักษะ, ไฟล์อ้างอิง และคำสั่งสแลช ติดตั้งเสริมให้ Claude Code จัดการงาน frontend ได้อย่างมืออาชีพ
แกนหลักประกอบด้วย:
ทักษะ frontend-design ที่ได้รับการขยายของ Impeccable
ไฟล์อ้างอิง 7 โดเมน เช่น คู่มือจัดรูปแบบตัวอักษร บอกถึง vertical rhythm, วิธีป้องกัน FOUT ด้วย size-adjust, ข้อควรระวังการใช้ clamp() เป็นต้น ไฟล์แต่ละชุดให้รายละเอียดเชิงเทคนิค ใช้งานได้จริง
โปรโตคอลการรวบรวมบริบทของ Impeccable
ก่อนเริ่มงานออกแบบ ใช้คำสั่ง /teach-impeccable เพื่อบันทึกบริบทโปรเจกต์ เช่น กลุ่มเป้าหมาย, use case, บุคลิกแบรนด์ ลงในไฟล์ .impeccable.md ที่ root ของโปรเจกต์ ช่วยให้ AI มีข้อมูลเฉพาะ ไม่สร้าง UI ทั่วไป
20 คำสั่งสำหรับแก้ไข frontend ที่สร้างโดย AI
เรียกใช้คำสั่งเหล่านี้ใน Claude Code เพื่อควบคุมและปรับปรุง UI แต่ละโหมด:
/audit → ตรวจสอบ accessibility, performance, responsiveness
/critique → UX review: ลำดับชั้น, ความชัดเจน, อารมณ์
/polish → ตรวจสอบระยะสุดท้าย (alignment, spacing, details)
/distill → ลดความซับซ้อน เหลือแต่แก่น
/normalize → ทำให้ตรงตามมาตรฐาน design system
/animate → เพิ่ม motion ที่มีจุดประสงค์
/colorize → ปรับสี strategic จาก monochrome
/bolder → ทำให้ design เด่นขึ้น
/quieter → ลดความรุนแรงของ design
/delight → เพิ่ม moment ที่ทำให้ผู้ใช้ว้าว
/typeset → แก้ฟอนต์, ลำดับชั้น, ขนาดตัวอักษร
/arrange → แก้ layout, spacing, visual rhythm
/harden → จัดการ error, i18n, edge cases
/optimize → ปรับปรุง performance
/extract → แยก reusable component, design tokens
/adapt → ปรับตาม device/context
/onboard → ออกแบบ onboarding, empty state
/clarify → ปรับ UX copy ให้ชัด
/overdrive → เอฟเฟกต์เชิงเทคนิค (shader, spring physics, scroll-driven)
/teach-impeccable → ตั้งค่าบริบท design ครั้งเดียว
ทุกคำสั่งรองรับ argument scope เช่น /audit header ตรวจ header เท่านั้น หรือ /polish checkout-form ตรวจเฉพาะฟอร์มจ่ายเงิน สามารถ chain คำสั่ง เช่น /audit → /arrange → /typeset → /polish ทีละขั้นตอน
ไลบรารี Anti-Pattern: สอน AI ว่าอะไร "ห้ามทำ"
Impeccable ฝัง anti-pattern ไว้ในบริบทโมเดลโดยตรง ตัวอย่างเช่น:
- ตัวอักษร: ห้ามใช้ Inter, Roboto, Arial, monospace, หรือไอคอนใหญ่บนหัวข้อ
- สี: ห้ามข้อความเทาบนพื้นสี, ห้าม "พาเลทสี AI" (ฟ้า-เขียว, ม่วง-น้ำเงิน, นีออนบนพื้นเข้ม), ห้ามใช้ #000/#fff
- เลย์เอาต์: ห้ามห่อทุกอย่างด้วยการ์ด, ห้ามซ้อนการ์ด, ห้ามตารางการ์ดซ้ำๆ, ห้ามจัดกึ่งกลางทุกอย่าง
- แอนิเมชัน: ห้าม bounce/elastic easing, ห้าม animate width/height/padding ให้ใช้แค่ transform/opacity
กฎเหล่านี้ทำให้ AI สร้าง frontend ที่ไม่ติดกับดักเดิม
เบื้องหลัง: Build System, Unit Test, รองรับหลายเครื่องมือ
Impeccable คือซอฟต์แวร์เต็มรูปแบบ มีระบบ build, ชุด unit test และรองรับหลาย provider
ระบบสร้าง
ไฟล์ทักษะต้นฉบับอยู่ที่ source/skills/ ใช้ YAML frontmatter ตาม Agent Skills spec สั่ง build:
bun run build # คอมไพล์ 8 provider
bun run rebuild # ล้างและ build ใหม่
แต่ละ provider ได้ dialect ที่เหมาะสม เช่น Claude Code/OpenCode ได้เมตาดาต้าเต็ม, Codex CLI ได้ argument hint, Gemini ได้ frontmatter ขั้นต่ำ โค้ดแปลงทั้งหมดอยู่ใน scripts/lib/transformers/
ชุดทดสอบหน่วย
ใช้ Bun สำหรับ unit test ที่ tests/build.test.js ทดสอบประสานงาน transformer, ทดสอบ integration, validate output ของแต่ละ provider และ handle edge case รันได้ด้วย
bun test
มั่นใจได้ว่าปรับ transformer แล้วไม่พังไฟล์ provider ใดๆ
Impeccable + Apidog: คู่มือคุณภาพ UI/API
Impeccable ดูแลคุณภาพ frontend ที่สร้างโดย AI ส่วน Apidog ครอบคลุม API
เมื่อคุณสร้างโปรดักต์จริง ทั้ง UI และ API ต้องดี ใช้ Apidog เพื่อ:
- ออกแบบ API แบบ visual ก่อนเขียน code backend
- สร้าง mock server จาก schema API ให้ AI frontend มี mock data
- รัน API test อัตโนมัติ กับ endpoint ทุกจุด
- แชร์ interactive API doc ให้ทีม frontend-backend สื่อสารกันตรง
ใช้ Impeccable เพื่อให้ AI frontend มีเอกลักษณ์และใช้งานจริง ใช้ Apidog เพื่อให้ API backend พร้อม, มี test, มี doc จบ workflow AI dev
ลองใช้ Apidog วันนี้ เพื่อสร้าง mock server และ API doc สำหรับโปรเจกต์ AI frontend ของคุณ
เริ่มใช้งาน Impeccable
ดาวน์โหลดชุดพร้อมใช้จาก impeccable.style เลือก provider แล้วแตกไฟล์
สำหรับ Claude Code:
# ติดตั้งระดับโปรเจกต์
cp -r dist/claude-code/.claude your-project/
# หรือติดตั้ง global
cp -r dist/claude-code/.claude/* ~/.claude/
จากนั้น รัน /teach-impeccable ครั้งเดียวเพื่อบันทึกบริบท design แล้วใช้ 20 คำสั่งได้ทันที
FAQ
Impeccable ต่างจาก frontend-design ของ Anthropic อย่างไร? Impeccable เพิ่มไฟล์อ้างอิง 7 โดเมน, 20 สแลช command และ anti-pattern library ทับบนทักษะมาตรฐาน
รองรับเครื่องมืออะไรบ้าง? Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi ระบบ build คอมไพล์เป็น dialect เฉพาะแต่ละเครื่องมือ
คำสั่ง /overdrive คืออะไร? ใช้สำหรับเอฟเฟกต์เทคนิคขั้นสูง เช่น shader, virtual grid, spring physics, scroll-driven effect
Unit test ใน Impeccable ทำงานอย่างไร? มีชุดทดสอบ Bun ครอบคลุม transformer, integration, validate output รัน bun test ได้เลย
Impeccable ช่วย frontend driven by API ได้ไหม? ดูแลคุณภาพ UI ส่วน API ใช้ Apidog ออกแบบ, ทดสอบ, mock server ครบ workflow
ใช้ฟรีไหม? ฟรีและโอเพนซอร์ส Apache 2.0 มีซอร์สโค้ดบน GitHub และ binary ที่ impeccable.style
Top comments (0)