Impeccable — Skill สอน AI Coding Agent ให้ออกแบบ UI ได้ดีขึ้นและจับ Anti-Pattern อัตโนมัติImpeccable — Design Skill for AI Coding Agents with Anti-Pattern Detection
Impeccable เป็น skill สำหรับ AI coding agent (Claude Code, Cursor, Codex, Gemini CLI ฯลฯ) ที่ให้คำสั่งออกแบบ 24 คำสั่ง เช่น polish, audit, critique, bolder และมี detector rule 62 ข้อสำหรับจับ anti-pattern ของ frontend ที่ AI สร้างขึ้น เช่น ใช้ Inter ทุกที่, gradient สีม่วง-น้ำเงินซ้ำๆ, การ้อน card ใน card
Impeccable is a design skill for AI coding agents (Claude Code, Cursor, Codex, Gemini CLI, etc.) providing 24 design commands like polish, audit, critique, and bolder, plus 62 deterministic detector rules that catch common AI-generated frontend anti-patterns such as overused fonts, repetitive gradients, and nested cards.
ไว้ทำอะไร
AI coding agent ทุกตัวเทรนจาก SaaS template ชุดเดียวกัน ผลลัพธ์คือ UI ที่หน้าตาซ้ำกันหมด — ฟอนต์ Inter, gradient สีม่วง, card ซ้อน card, ไอคอนสี่เหลี่ยมมุมมนเหนือหัวข้อทุกอัน ปัญหานี้เรียกว่า 'AI slop' Impeccable แก้ปัญหานี้โดยให้ design vocabulary ที่เป็นมาตรฐานให้ agent เข้าใจคำสั่งออกแบบ ตรวจจับ anti-pattern แบบ deterministic โดยไม่ต้องใช้ LLM และบันทึก product context (PRODUCT.md, DESIGN.md) เพื่อให้ทุกคำสั่งรู้บริบทของโปรเจกต์ตลอด ใช้ได้ตั้งแต่ init โปรเจกต์ใหม่ ไปจนถึง polish ก่อน ship
ทำงานอย่างไร
Impeccable ทำงานเป็น skill ที่ติดตั้งลงใน AI coding agent ต่างๆ ผ่านคำสั่ง `npx impeccable install` ซึ่งจะตรวจหา harness ที่ติดตั้งอยู่ (เช่น ~/.claude, .cursor) แล้วคัดลอก skill files ไปยังโฟลเดอร์ที่ถูกต้อง เมื่อติดตั้งแล้ว ผู้ใช้เริ่มจาก `/impeccable init` เพื่อสร้าง PRODUCT.md ที่บันทึกบริบทของโปรเจกต์ (กลุ่มเป้าหมาย, วัตถุประสงค์, ข้อจำกัด, voice) แล้วใช้คำสั่งต่างๆ เช่น critique, audit, polish ในระหว่างพัฒนา
Engine หลักเขียนด้วย Rust เป็น workspace ที่แบ่งเป็นหลาย crate — `impeccable-core` จัดการ logic หลัก, `impeccable-detect` รัน 62 detector rules, `impeccable-html` วิเคราะห์ HTML, `impeccable-browser` และ `impeccable-live` รองรับ live browser iteration ที่ให้ดูผลลัพธ์แบบ real-time, `impeccable-comp` จัดการ component review Binary ที่ build ออกมาเป็น self-contained ไม่ต้องพึ่ง runtime อื่น ตัว launcher script จะเรียก binary นี้โดยตรง
ระบบ hook จะทำงานอัตโนมัติหลัง AI แก้ไขโค้ด โดยรัน detector rules เพื่อจับ anti-pattern ก่อนที่โค้ดจะถูก commit นอกจากนี้ยังมี browser bundle ที่รันใน browser สำหรับ visual scanning และ overlay แสดงปัญหาที่พบ
รองรับ provider มากกว่า 15 ตัว ได้แก่ Claude Code, Cursor, Codex CLI, Gemini CLI, Grok Build, Hermes Agent, Devin, GitHub Copilot (VS Code extension), OpenCode, DeepSeek Harness, Pi, Trae, Veto และอื่นๆ แต่ละ provider มี dist folder เฉพาะที่ build จาก source เดียวกัน
โครงสร้างโค้ด
- crates/core — engine หลักของ Impeccable (Rust)
- crates/detect — 62 deterministic detector rules สำหรับจับ anti-pattern
- crates/html — HTML parser สำหรับวิเคราะห์โครงสร้างหน้าเว็บ
- crates/browser — integration กับ browser สำหรับ visual scanning
- crates/live — live browser iteration mode ดูผลลัพธ์แบบ real-time
- crates/comp, crates/comp-verbs — component review และ design verb ต่างๆ
- crates/common, crates/foundation — shared utilities และ base types
- browser-bundle/ — JavaScript bundle สำหรับรันใน browser (probe, scan, overlay)
- cli/ — CLI wrapper พร้อม platform-specific packages (darwin-arm64, linux-x64 ฯลฯ)
- .claude/, .cursor/, .gemini/, .codex/ ฯลฯ — skill distributions สำหรับแต่ละ provider
- .impeccable/ — config, design tokens, surfaces, live mode settings
- PRODUCT.md, DESIGN.md — ไฟล์บริบทโปรเจกต์ที่ /impeccable init สร้างขึ้น
- AGENTS.md, CLAUDE.md — คำแนะนำสำหรับ AI agent ที่ทำงานกับ repo นี้
เริ่มใช้งาน
# ติดตั้งจาก project root
npx impeccable install
# เปิด AI coding tool แล้วรัน init
/impeccable init
# ใช้คำสั่งต่างๆ
/impeccable audit blog # ตรวจ technical quality
/impeccable critique landing # UX design review
/impeccable polish settings # final pass ก่อน ship
/impeccable bolder homepage # ทำให้ design โดดเด่นขึ้น
/impeccable harden checkout # เพิ่ม error handling + edge casesเหมาะกับงานแบบไหน
- ตรวจจับ AI slop ใน frontend ที่ AI สร้าง เช่น ฟอนต์ซ้ำ, gradient ซ้ำ, card ซ้อน card ก่อน commit
- ใช้คำสั่ง polish ทำ final pass ให้ UI พร้อม ship โดยตรวจ design system alignment
- ใช้ critique และ audit รีวิว UX, accessibility, responsive, performance ของหน้าเว็บ
- ใช้ bolder / quieter ปรับ intensity ของ design ให้เหมาะกับบริบท
- ใช้ live mode iterate design ใน browser แบบ real-time พร้อม visual overlay
- สร้าง PRODUCT.md และ DESIGN.md เป็น source of truth ให้ AI agent ทุกตัวเข้าใจบริบทโปรเจกต์ตรงกัน
- ฝัง hook ให้ตรวจ anti-pattern อัตโนมัติทุกครั้งที่ AI แก้ไขโค้ด frontend
ข้อควรรู้
- License Apache-2.0 — ใช้ได้เชิงพาณิชย์ แต่ต้องรักษา notice และ attribution
- ต้องใช้ร่วมกับ AI coding agent ที่รองรับ skill system (Claude Code, Cursor, Codex ฯลฯ) ไม่ใช่ standalone design tool
- Detector rules 62 ข้อเป็น deterministic ไม่ต้องใช้ LLM แต่คำสั่ง design commands (critique, polish ฯลฯ) ต้องพึ่ง LLM ของ agent
- ตัว engine binary ดาวน์โหลดอัตโนมัติครั้งแรกที่รัน (~/.impeccable/bin/) ต้องมี internet access
- เน้น frontend/UI เท่านั้น ไม่ครอบคลุม backend logic หรืองานที่ไม่ใช่ UI
- บาง provider (Codex, Grok Build, Hermes) ต้องทำขั้นตอน trust/approve hook เพิ่มเติมหลังติดตั้ง
What it is for
Every AI model trains on the same SaaS templates, producing repetitive UI — Inter everywhere, purple-to-blue gradients, nested cards, rounded-square icon tiles. This 'AI slop' problem is what Impeccable solves. It provides a standardized design vocabulary that agents understand, 62 deterministic anti-pattern detectors that run without an LLM or API key, and durable project context files (PRODUCT.md, DESIGN.md) so every command knows the project's audience, purpose, and constraints. It covers the full lifecycle from project init to final polish before shipping.
How it works
Impeccable installs as a skill into AI coding agents via `npx impeccable install`, which detects installed harnesses (e.g., ~/.claude, .cursor) and copies skill files to the correct folders. Users start with `/impeccable init` to create PRODUCT.md capturing project context (audience, purpose, constraints, voice), then use commands like critique, audit, and polish during development.
The core engine is written in Rust as a Cargo workspace split into multiple crates — `impeccable-core` handles main logic, `impeccable-detect` runs the 62 deterministic detector rules, `impeccable-html` parses HTML, `impeccable-browser` and `impeccable-live` support live browser iteration for real-time visual feedback, and `impeccable-comp` handles component review. The compiled binary is self-contained with no external runtime dependency; the launcher script invokes it directly.
Automatic hooks run after AI edits to catch anti-patterns before code is committed. A browser bundle provides in-browser visual scanning with overlays showing detected issues.
Over 15 providers are supported: Claude Code, Cursor, Codex CLI, Gemini CLI, Grok Build, Hermes Agent, Devin, GitHub Copilot (VS Code extension), OpenCode, DeepSeek Harness, Pi, Trae, Veto, and more. Each provider has its own dist folder built from the same source.
Code structure
- crates/core — main Impeccable engine (Rust)
- crates/detect — 62 deterministic detector rules for catching anti-patterns
- crates/html — HTML parser for analyzing page structure
- crates/browser — browser integration for visual scanning
- crates/live — live browser iteration mode for real-time feedback
- crates/comp, crates/comp-verbs — component review and design verbs
- crates/common, crates/foundation — shared utilities and base types
- browser-bundle/ — JavaScript bundle for in-browser scanning (probe, scan, overlay)
- cli/ — CLI wrapper with platform-specific packages (darwin-arm64, linux-x64, etc.)
- .claude/, .cursor/, .gemini/, .codex/, etc. — skill distributions per provider
- .impeccable/ — config, design tokens, surfaces, live mode settings
- PRODUCT.md, DESIGN.md — project context files generated by /impeccable init
- AGENTS.md, CLAUDE.md — guidance for AI agents working on this repo
Getting started
# ติดตั้งจาก project root
npx impeccable install
# เปิด AI coding tool แล้วรัน init
/impeccable init
# ใช้คำสั่งต่างๆ
/impeccable audit blog # ตรวจ technical quality
/impeccable critique landing # UX design review
/impeccable polish settings # final pass ก่อน ship
/impeccable bolder homepage # ทำให้ design โดดเด่นขึ้น
/impeccable harden checkout # เพิ่ม error handling + edge casesGood fit for
- Detect AI slop in AI-generated frontend — repeated fonts, gradients, nested cards — before committing
- Use polish for a final design pass ensuring design system alignment before shipping
- Use critique and audit to review UX, accessibility, responsive behavior, and performance
- Use bolder / quieter to adjust design intensity to match the context
- Use live mode to iterate on design in the browser in real-time with visual overlays
- Generate PRODUCT.md and DESIGN.md as a single source of truth so all AI agents share the same project context
- Embed hooks for automatic anti-pattern detection every time AI edits frontend code
Things to know
- Apache-2.0 license — commercial use allowed but notice and attribution must be preserved
- Requires an AI coding agent with skill support (Claude Code, Cursor, Codex, etc.); not a standalone design tool
- 62 detector rules are deterministic and LLM-free, but design commands (critique, polish, etc.) depend on the agent's LLM
- Engine binary auto-downloads on first run (~/.impeccable/bin/); requires internet access initially
- Frontend/UI focused only — does not cover backend logic or non-UI tasks
- Some providers (Codex, Grok Build, Hermes) require additional trust/hook approval steps after installation
บทวิเคราะห์นี้สร้างจาก README และโค้ดของ repo โดย AI ของ Oneable — ตรวจสอบ license และเอกสารต้นทางก่อนนำไปใช้งานจริงThis breakdown was generated from the repository's README and code by Oneable's AI — check the license and upstream docs before using it in production.
QR สำหรับเพิ่มเพื่อนใน LINE