Impeccable คือทักษะ Claude Code แบบโอเพนซอร์สที่สร้างโดย Paul Bakaus ซึ่งต่อสู้กับปัญหา "AI slop" ในผลลัพธ์ frontend ที่สร้างโดย AI มาพร้อมกับคำสั่งควบคุม 20 รายการ (/audit, /polish, /critique และอื่นๆ), ไฟล์อ้างอิงการออกแบบเฉพาะโดเมน 7 ไฟล์ และ anti-pattern ที่ได้รับการคัดเลือก ซึ่งบอกให้โมเดลรู้ว่าสิ่งใดที่ "ไม่ควร" สร้าง ผลลัพธ์: UI ที่ดูเหมือนได้รับการออกแบบมา ไม่ใช่แค่สร้างขึ้นโดยอัตโนมัติ
ทำไม frontend ที่สร้างโดย AI ทุกอันถึงดูเหมือนกันหมด
ลองขอให้ผู้ช่วยเขียนโค้ด AI สร้างแดชบอร์ด, แลนดิ้งเพจ หรือแผงการตั้งค่าให้คุณ ให้มันมีอิสระเต็มที่ คุณจะได้อะไร?
ฟอนต์ Inter การไล่ระดับสีม่วงไปน้ำเงิน การ์ดซ้อนกันภายใน การ์ด ข้อความสีเทาบนพื้นหลังสี ส่วนฮีโร่ที่มีตัวเลขขนาดใหญ่ ป้ายกำกับเล็กๆ และเอฟเฟกต์เรืองแสง อาจมีกลาสมอร์ฟิซึมเพื่อ "ความลึก"
คุณเห็นสิ่งเหล่านี้มานับพันครั้งแล้ว เพราะทุกโมเดลภาษาขนาดใหญ่ที่ได้รับการฝึกฝนด้วยเทมเพลตทั่วไปเดียวกันจะสร้างผลลัพธ์ทั่วไปแบบเดียวกัน นั่นคือกับดักของ frontend ที่สร้างโดย AI: ใช้งานได้จริงในทางเทคนิค แต่ดูแล้วจำไม่ลง
Impeccable ถูกสร้างขึ้นมาโดยเฉพาะเพื่อทำลายวงจรนั้น ในขณะที่ทักษะ frontend-design อย่างเป็นทางการของ Anthropic ได้วางรากฐานไว้ Impeccable ก็ต่อยอดด้วยความเชี่ยวชาญที่ลึกซึ้งยิ่งขึ้น การครอบคลุมโดเมนมากขึ้น และข้อจำกัดที่เข้มงวดซึ่งนำ AI ออกห่างจากรูปแบบที่คาดเดาได้ซึ่งถูกฝังอยู่ในน้ำหนัก (weights) ของโมเดล
button
Impeccable คืออะไรกันแน่
Impeccable คือทักษะ Claude Code ซึ่งเป็นชุดคำสั่ง ไฟล์อ้างอิง และคำสั่งสแลชที่สามารถติดตั้งได้ ซึ่งช่วยเสริมวิธีการที่ Claude Code ใช้ในการจัดการงาน frontend ใดๆ
โดยหลักแล้ว ทักษะนี้ประกอบด้วยสามส่วน:
ทักษะ frontend-design ที่ได้รับการขยายของ Impeccable
ทักษะ frontend-design ภายใน Impeccable คือคู่มือการออกแบบที่ครอบคลุม ซึ่งแบ่งออกเป็นไฟล์อ้างอิงเฉพาะโดเมนเจ็ดไฟล์:
ไฟล์อ้างอิงแต่ละไฟล์มีความแม่นยำทางเทคนิค ตัวอย่างเช่น คู่มือการจัดรูปแบบตัวอักษรไม่ได้แค่บอกว่า "ใช้ฟอนต์ที่ดี" เท่านั้น แต่ยังอธิบายว่า vertical rhythm ทำงานอย่างไร ทำไม FOUT (Flash of Unstyled Text) ถึงเกิดขึ้นและวิธีป้องกันด้วยการแทนที่ด้วย size-adjust และเมื่อใดที่ fluid type ด้วย clamp() เป็นตัวเลือกที่ไม่ถูกต้องจริง ความลึกซึ้งนี้คือสิ่งที่แยก Impeccable ออกจากคู่มือสไตล์ทั่วไป
โปรโตคอลการรวบรวมบริบทของ Impeccable
หนึ่งในแง่มุมที่ถูกมองข้ามมากที่สุดของการออกแบบ Impeccable คือคำสั่ง /teach-impeccable ก่อนที่จะเริ่มงานออกแบบใดๆ ทักษะนี้ต้องการบริบทการออกแบบที่ยืนยันแล้ว: กลุ่มเป้าหมาย, กรณีการใช้งาน และบุคลิกภาพของแบรนด์ บริบทนี้จะถูกบันทึกไปยัง .impeccable.md ในไดเรกทอรีรูทของโปรเจกต์และจะถูกโหลดโดยอัตโนมัติในการทำงานครั้งต่อไป
มันเป็นเรื่องเล็กๆ ที่สร้างความแตกต่างอย่างมาก ผลลัพธ์ frontend ที่สร้างโดย AI มักเป็นแบบทั่วไปส่วนหนึ่งเพราะโมเดลไม่มีบริบทของโปรเจกต์ มันจะใช้ตัวเลือกที่ปลอดภัยและธรรมดาโดยค่าเริ่มต้น Impeccable บังคับให้สร้างบริบทนั้นก่อน
20 คำสั่งที่แก้ไข frontend ที่สร้างโดย AI
Impeccable มาพร้อมกับ 20 คำสั่งที่ผู้ใช้สามารถเรียกใช้ได้ ซึ่งแต่ละคำสั่งจะจัดการกับโหมดความล้มเหลวเฉพาะในการทำงาน frontend ที่สร้างโดย AI คุณเรียกใช้คำสั่งเหล่านี้เป็นคำสั่งสแลชภายใน Claude Code:
/audit → การตรวจสอบคุณภาพด้านการเข้าถึง, ประสิทธิภาพ, และการตอบสนอง
/critique → การรีวิว UX: ลำดับชั้น, ความชัดเจน, การกระตุ้นอารมณ์
/polish → การตรวจสอบขั้นสุดท้ายก่อนเผยแพร่ (การจัดแนว, ระยะห่าง, รายละเอียด)
/distill → ตัดให้เหลือแต่แก่นแท้—ลบความซับซ้อนที่ไม่จำเป็นออกไป
/normalize → จัดให้สอดคล้องกับมาตรฐานของระบบการออกแบบ
/animate → เพิ่มการเคลื่อนไหวที่มีจุดประสงค์ (ไม่ใช่การสั่นไหวเพื่อตกแต่ง)
/colorize → นำสีเชิงกลยุทธ์มาใช้กับอินเทอร์เฟซขาวดำ
/bolder → ขยายการออกแบบที่ปลอดภัยและน่าเบื่อ
/quieter → ลดความรุนแรงของการออกแบบที่ดูรุกรานเกินไป
/delight → เพิ่มช่วงเวลาแห่งความสุขที่น่าจดจำ
/typeset → แก้ไขการเลือกฟอนต์, ลำดับชั้น, และขนาด
/arrange → แก้ไขเลย์เอาต์, ระยะห่าง, และจังหวะภาพ
/harden → การจัดการข้อผิดพลาด, i18n, กรณีสุดขีด
/optimize → การปรับปรุงประสิทธิภาพ
/extract → ดึงคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้และ design tokens
/adapt → ปรับให้เข้ากับอุปกรณ์/บริบทที่แตกต่างกัน
/onboard → ออกแบบขั้นตอนการเริ่มต้นใช้งานและสถานะว่างเปล่า
/clarify → ปรับปรุงข้อความ UX ที่ไม่ชัดเจน
/overdrive → เอฟเฟกต์ทางเทคนิคที่ท้าทาย (เชเดอร์, ฟิสิกส์สปริง, การเปิดเผยที่ขับเคลื่อนด้วยการเลื่อน)
/teach-impeccable → การตั้งค่าครั้งเดียว: รวบรวมและบันทึกบริบทการออกแบบ
คำสั่งส่วนใหญ่ยอมรับอาร์กิวเมนต์ขอบเขตเสริม เช่น /audit header จะรันการตรวจสอบเฉพาะบนแถบนำทางเท่านั้น /polish checkout-form จะเน้นการตรวจสอบบนขั้นตอนการชำระเงิน การกำหนดเป้าหมายที่แม่นยำนี้ช่วยให้ Claude มีสมาธิและป้องกันไม่ให้แตะส่วนที่ทำงานได้ดีอยู่แล้วของ frontend ที่สร้างโดย AI
พลังที่แท้จริงมาจากการเชื่อมโยงคำสั่งเข้าด้วยกัน เวิร์กโฟลว์ทั่วไปอาจเริ่มต้นด้วยการรัน /audit เพื่อค้นหาปัญหา, /arrange เพื่อแก้ไขปัญหาเลย์เอาต์, /typeset เพื่อปรับปรุงลำดับชั้นของตัวอักษร และ /polish เป็นการตรวจสอบขั้นสุดท้ายก่อนเผยแพร่ โดยแต่ละขั้นตอนจะต่อยอดจากขั้นตอนก่อนหน้า
ไลบรารี Anti-Pattern: สอน AI ว่าอะไรที่ไม่ควรทำ
การมีส่วนร่วมที่เป็นต้นฉบับที่สุดที่ Impeccable นำเสนอต่อปัญหา frontend ที่สร้างโดย AI ไม่ใช่คำสั่ง แต่เป็น anti-pattern
ทักษะนี้ได้ฝังข้อจำกัด "ห้ามทำ" อย่างชัดเจนลงในบริบทของโมเดลโดยตรง สิ่งเหล่านี้ไม่ใช่แค่ความชอบในสไตล์ที่คลุมเครือ แต่เป็นลักษณะความล้มเหลวเฉพาะที่เกิดขึ้นซ้ำแล้วซ้ำเล่าในผลลัพธ์ frontend ที่สร้างโดย AI:
Anti-pattern ของการจัดรูปแบบตัวอักษร:
- ห้ามใช้ Inter, Roboto, Arial หรือค่าเริ่มต้นของระบบ (เพราะทำให้การออกแบบดูไม่เด่น)
- ห้ามใช้ฟอนต์ monospace เป็นทางลัดขี้เกียจสำหรับ "developer vibes"
- ห้ามวางไอคอนขนาดใหญ่ขอบโค้งมนไว้เหนือทุกหัวข้อ เพราะมันดูเหมือนเทมเพลต
Anti-pattern ของสี:
- ห้ามใช้ข้อความสีเทาบนพื้นหลังสี เพราะมันจะดูซีดจาง ให้ใช้สีที่เข้มกว่าของสีพื้นหลังแทน
- ห้ามใช้ "พาเลทสีของ AI": สีฟ้า-เขียวบนพื้นหลังสีเข้ม, การไล่ระดับสีม่วงไปน้ำเงิน, เน้นสีนีออนบนพื้นหลังสีเข้ม
- ห้ามใช้สีดำสนิท (
#000) หรือสีขาวสนิท (#fff) ให้ปรับโทนสีกลางของคุณ
Anti-pattern ของเลย์เอาต์:
- ห้ามห่อทุกอย่างด้วยการ์ด ไม่ใช่ทุกองค์ประกอบที่ต้องการคอนเทนเนอร์
- ห้ามซ้อนการ์ดภายใน การ์ด
- ห้ามใช้ตารางการ์ดที่เหมือนกัน (ไอคอน + หัวข้อ + ข้อความ ซ้ำไปเรื่อยๆ)
- ห้ามจัดกึ่งกลางทุกอย่าง ข้อความที่จัดชิดซ้ายพร้อมเลย์เอาต์ที่ไม่สมมาตรจะดูเหมือนได้รับการออกแบบมา
Anti-pattern ของการเคลื่อนไหว:
- ห้ามใช้ bounce หรือ elastic easing เพราะให้ความรู้สึกเก่า วัตถุจริงจะลดความเร็วลงอย่างราบรื่น
- ห้ามทำแอนิเมชันคุณสมบัติเลย์เอาต์ เช่น
width,height,paddingให้ใช้แค่transformและopacityเท่านั้น
กฎเหล่านี้ถูกจับคู่กับพฤติกรรมที่ทำให้โค้ด frontend ที่สร้างโดย AI สามารถจดจำได้ในทันที การระบุอย่างชัดเจนทำให้ Impeccable มอบเลนส์แก้ไขให้โมเดล ซึ่งจะไม่มีหากปราศจากคำแนะนำภายนอก
เบื้องหลัง: ระบบสร้าง, การทดสอบหน่วย และการรองรับหลายเครื่องมือ
Impeccable ไม่ใช่แค่ไฟล์พรอมต์ แต่เป็นโปรเจกต์ซอฟต์แวร์ที่สมบูรณ์พร้อมระบบสร้าง, ชุดทดสอบหน่วย และการรองรับหลายผู้ให้บริการ
ระบบสร้าง
ไฟล์ต้นฉบับทักษะอยู่ใน source/skills/ และใช้ YAML frontmatter ที่ครบถ้วน (ตาม ข้อกำหนด Agent Skills) ขั้นตอนการสร้างเพียงครั้งเดียวจะคอมไพล์เป็นรูปแบบเฉพาะของผู้ให้บริการสำหรับ Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro และ Pi:
bun run build # คอมไพล์ทั้ง 8 รูปแบบของผู้ให้บริการ
bun run rebuild # ล้างและสร้างใหม่ตั้งแต่ต้น
ผู้ให้บริการแต่ละรายจะได้รับภาษาถิ่นที่ถูกต้อง Claude Code และ OpenCode จะได้รับเมตาดาต้าที่สมบูรณ์ รวมถึง args และ allowed-tools Codex CLI จะได้รับรูปแบบ argument-hint พร้อมตัวยึดตำแหน่ง $ARGNAME Gemini จะได้รับ frontmatter น้อยที่สุด การสร้างจะจัดการทั้งหมดนี้โดยอัตโนมัติผ่านสถาปัตยกรรม transformer แบบโมดูลาร์ใน scripts/lib/transformers/
ชุดทดสอบหน่วย
Impeccable มาพร้อมกับชุดทดสอบหน่วยที่ใช้ Bun ใน tests/build.test.js การทดสอบครอบคลุมไปถึงไปป์ไลน์การสร้างทั้งหมด:
- การทดสอบการประสานงาน ตรวจสอบว่าฟังก์ชัน transformer แต่ละตัวถูกเรียกใช้ด้วยอาร์กิวเมนต์ที่ถูกต้อง
- การทดสอบการรวมระบบ สร้างไฟล์ต้นฉบับจริงในไดเรกทอรีชั่วคราวและยืนยันว่ามีไฟล์เอาต์พุตที่คาดหวังสำหรับผู้ให้บริการทุกราย
- การทดสอบความถูกต้องของการแปลง ตรวจสอบการแปลงเฉพาะ—ว่าเอาต์พุต Gemini มี
{{args}}, ว่าเอาต์พุต Codex มี$TARGET, ว่าเอาต์พุต Claude Code มีuser-invokable: true - การทดสอบกรณีสุดขีด จัดการกับรายการทักษะที่ว่างเปล่าและตรวจสอบว่าไปป์ไลน์ไม่เสียหาย
การรันชุดทดสอบหน่วยทำได้ด้วยคำสั่งเดียว:
bun test
การทดสอบหน่วยเหล่านี้คือสิ่งที่ทำให้การมีส่วนร่วมกับ Impeccable ปลอดภัย คุณสามารถแก้ไข transformer, รันการทดสอบหน่วย และรู้ได้ทันทีว่าการเปลี่ยนแปลงของคุณทำให้เอาต์พุตเสียสำหรับเครื่องมือที่รองรับทั้งแปดหรือไม่ นั่นคือความมั่นใจทางวิศวกรรมที่แยกโปรเจกต์โอเพนซอร์สที่ได้รับการดูแลออกจากชุดพรอมต์ที่ถูกทอดทิ้ง
Impeccable + Apidog: จับคู่คุณภาพการออกแบบกับคุณภาพ API
Impeccable แก้ปัญหาคุณภาพของ frontend ที่สร้างโดย AI ที่เลเยอร์ UI Apidog แก้ปัญหาที่เลเยอร์ API
เมื่อคุณกำลังสร้างผลิตภัณฑ์จริงด้วยความช่วยเหลือของ AI ทั้งสองเลเยอร์มีความสำคัญ frontend ที่สร้างโดย AI ที่ดูประณีตก็ยังคงทำให้ผู้ใช้ผิดหวังได้ หากการเรียก API ที่ทำขึ้นนั้นมีเอกสารไม่ดี, ไม่ผ่านการทดสอบ หรือไม่น่าเชื่อถือ Apidog มอบความแม่นยำระดับเดียวกันสำหรับ API ของคุณ เช่นเดียวกับที่ Impeccable มอบให้สำหรับ UI ของคุณ
ด้วย Apidog คุณสามารถ:
- ออกแบบ API ด้วยภาพ ก่อนที่จะเขียนโค้ดแบ็กเอนด์แม้แต่บรรทัดเดียว
- สร้างเซิร์ฟเวอร์จำลองโดยอัตโนมัติ จากสคีมา API ของคุณ เพื่อให้ frontend ที่สร้างโดย AI ของคุณมีข้อมูลที่สมจริงสำหรับแสดงผลระหว่างการพัฒนา
- รันการทดสอบ API อัตโนมัติ กับปลายทางแต่ละแห่ง ตรวจจับข้อผิดพลาดก่อนที่จะถึงขั้นตอนการผลิต
- แชร์เอกสาร API แบบโต้ตอบ กับทีมของคุณ ทำให้ผู้พัฒนา frontend และ backend สอดคล้องกัน
การรวมกันนี้เป็นธรรมชาติ: ใช้ Impeccable เพื่อให้แน่ใจว่า frontend ที่สร้างโดย AI ของคุณมีเอกลักษณ์ทางสายตาและพร้อมใช้งานในขั้นตอนการผลิต และใช้ Apidog เพื่อให้แน่ใจว่า API ที่ขับเคลื่อน frontend นั้นน่าเชื่อถือและมีเอกสารที่ดี ร่วมกัน พวกเขาจะลดช่องว่างด้านคุณภาพที่การพัฒนาที่ช่วยเหลือโดย AI เพียงอย่างเดียวทิ้งไว้
ลองใช้ Apidog ฟรี เพื่อสร้างเซิร์ฟเวอร์จำลองและเอกสาร API สำหรับโปรเจกต์ frontend ที่สร้างโดย AI ถัดไปของคุณ
button
เริ่มต้นใช้งาน Impeccable
วิธีที่เร็วที่สุดคือการดาวน์โหลดชุดรวมที่พร้อมใช้งานจาก impeccable.style เลือกเครื่องมือของคุณ แล้วแตกไฟล์
สำหรับ Claude Code โดยเฉพาะ:
# การติดตั้งระดับโปรเจกต์
cp -r dist/claude-code/.claude your-project/
# หรือติดตั้งทั่วโลกสำหรับทุกโปรเจกต์
cp -r dist/claude-code/.claude/* ~/.claude/
จากนั้นรัน /teach-impeccable เพียงครั้งเดียวเพื่อบันทึกบริบทการออกแบบของโปรเจกต์ของคุณ และคุณก็พร้อมที่จะใช้คำสั่งทั้ง 20 รายการ
คำถามที่พบบ่อย
อะไรที่ทำให้ Impeccable แตกต่างจากทักษะ frontend-design อย่างเป็นทางการของ Anthropic? Impeccable ต่อยอดจากทักษะของ Anthropic ด้วยไฟล์อ้างอิงเฉพาะโดเมน 7 ไฟล์, คำสั่งควบคุม 20 รายการ และไลบรารี anti-pattern ที่ชัดเจน ทักษะอย่างเป็นทางการเป็นจุดเริ่มต้น ส่วน Impeccable เป็นระบบการออกแบบที่ครอบคลุมซึ่งซ้อนทับอยู่ด้านบน
Impeccable ใช้ได้กับเครื่องมืออื่นที่ไม่ใช่ Claude Code หรือไม่? ได้ Impeccable รองรับ Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro และ Pi ระบบสร้างจะคอมไพล์รูปแบบต้นฉบับเดียวให้เป็นภาษาถิ่นเฉพาะของผู้ให้บริการสำหรับแต่ละเครื่องมือ
คำสั่ง /overdrive ใช้ทำอะไร? /overdrive ใช้สำหรับเอฟเฟกต์ทางเทคนิคที่ท้าทายซึ่งเกินขีดจำกัดทั่วไป เช่น เชเดอร์ WebGL, ตารางเสมือน 60fps, ฟิสิกส์สปริงบนกล่องโต้ตอบ, การเปิดเผยที่ขับเคลื่อนด้วยการเลื่อน ใช้เมื่อคุณต้องการบางสิ่งที่ทำให้ผู้ใช้ถามว่า "พวกเขาทำได้อย่างไร?"
Impeccable จัดการการทดสอบหน่วยอย่างไร? โปรเจกต์มาพร้อมกับชุดทดสอบหน่วยที่ใช้ Bun ซึ่งครอบคลุมไปป์ไลน์การสร้างทั้งหมด รวมถึงความถูกต้องของ transformer และการทดสอบการรวมระบบที่สร้างไฟล์ต้นฉบับจริงและตรวจสอบเอาต์พุต รัน bun test เพื่อดำเนินการชุดทดสอบหน่วยทั้งหมด
Impeccable สามารถช่วยเรื่อง frontends ที่ขับเคลื่อนด้วย API ได้หรือไม่? Impeccable จัดการคุณภาพ UI สำหรับเลเยอร์ API ให้จับคู่กับ Apidog ซึ่งมีการออกแบบ API ด้วยภาพ, การทดสอบอัตโนมัติ และการสร้างเซิร์ฟเวอร์จำลอง—ทุกสิ่งที่คุณต้องการเพื่อสร้างแบ็กเอนด์ที่เชื่อถือได้สำหรับ frontend ที่สร้างโดย AI ของคุณ
Impeccable ใช้งานฟรีหรือไม่? ใช่ Impeccable ได้รับอนุญาตภายใต้ Apache 2.0 และเป็นโอเพนซอร์ส ซอร์สโค้ดมีอยู่บน GitHub และชุดรวมที่คอมไพล์แล้วมีให้ที่ impeccable.style