Impeccable: AI frontend design guidance cho coding agent

Thách thức của thiết kế frontend do AI tạo ra

Các AI coding agent hiếm khi làm hỏng chức năng của UI — vấn đề nằm ở chỗ giao diện nhìn không có gì khác biệt. Mọi mô hình đều được huấn luyện trên gần như cùng một kho template SaaS, và README chỉ ra một danh sách dấu hiệu cụ thể lặp lại từ dự án này sang dự án khác: font mặc định là Inter, gradient tím sang xanh, chữ xám trên nền màu, card lồng trong card khác, và một ô icon bo góc vuông nằm phía trên mọi tiêu đề mục. Những thứ đó không phá vỡ chức năng. Chúng chỉ khiến giao diện do AI dựng lên trở nên dễ nhận ra ngay từ cái nhìn đầu tiên, và việc prompt agent "làm đẹp hơn" hiếm khi sửa được một khuôn mẫu cụ thể như vậy.

Impeccable: design skill cho AI coding agent

Impeccable là một design skill và công cụ dòng lệnh cắm thẳng vào các AI coding agent như Claude Code, Cursor và Codex CLI. Theo README, Impeccable bắt đầu từ skill frontend-design của Anthropic, rồi bổ sung bộ lệnh /impeccable dùng chung, 59 quy tắc phát hiện lỗi xác định trước và chế độ lặp trực tiếp trên trình duyệt. Đây chính là AI frontend design guidance: lớp hướng dẫn cho agent biết thế nào là "đẹp" trước khi viết ra một component.

Tính năng cốt lõi giúp AI thiết kế tốt hơn

• ✓Một skill /impeccable duy nhất với 23 lệnh — polish, audit, critique, distill, animate, bolder, quieter, và nhiều lệnh khác — tạo ra một bộ từ vựng thiết kế dùng chung với agent thay vì prompt tự do.
• ✓/impeccable init hỏi bề mặt đang làm là brand (marketing, landing, portfolio) hay product (app UI, dashboard, công cụ), rồi ghi ra PRODUCT.md và đề nghị thêm DESIGN.md để các lệnh sau đó đã biết sẵn đối tượng, giọng điệu, màu sắc, kiểu chữ và component.
• ✓59 quy tắc phát hiện lỗi xác định trước, chạy không cần LLM và không cần API key, cộng thêm các bước LLM design critique riêng cho những phán đoán mà detector không tự làm được, dùng qua CLI hoặc extension trình duyệt.
• ✓/impeccable live: chế độ biến thể trực quan để chỉnh sửa từng phần tử ngay trên trình duyệt.
• ✓/impeccable pin <command> biến bất kỳ lệnh nào thành shortcut độc lập, ví dụ pin audit sẽ tạo ra /audit.
• ✓Một hook gắn theo từng nền tảng, chạy detector mỗi khi có chỉnh sửa trực tiếp vào file UI — Cursor chặn bản ghi có vấn đề trước khi nó được lưu, còn Claude Code, GitHub Copilot, Codex và Grok Build hiển thị kết quả sau khi chỉnh sửa.
• ✓Cơ chế design anti-patterns detection được viết thẳng vào skill: không dùng font Arial/Inter/mặc định hệ thống, không chữ xám trên nền màu, không đen/xám thuần (luôn phải tint), không lồng card trong card, không dùng easing kiểu bounce/elastic.
• ✓/impeccable extract kéo các component và token có thể tái sử dụng từ code sẵn có vào một design system dùng chung.

Các lệnh thiết kế thực tế và use case

• •Chạy /impeccable init một lần cho mỗi project để audit, polish và critique đều đọc chung một PRODUCT.md thay vì phải đoán lại thương hiệu mỗi lần.
• •/impeccable audit blog chạy các kiểm tra kỹ thuật — accessibility, hiệu năng, responsive — trên trang blog hub và các bài viết.
• •/impeccable critique landing cho bạn một UX design review tập trung vào hierarchy, độ rõ ràng và cảm xúc mà giao diện gợi ra, trước khi landing page lên sóng.
• •/impeccable polish settings chạy một đợt AI UI polish cuối cùng, kiểm tra độ đồng nhất với design system trước khi màn hình settings được ra mắt.
• •/impeccable harden checkout bổ sung xử lý lỗi, i18n, tràn chữ và các edge case cho luồng checkout.
• •npx impeccable detect --json . chạy 59 quy tắc phát hiện ngay trong CI, không cần AI agent tham gia.

Cài đặt Impeccable

Cách cài chính thức là chạy `npx impeccable install` từ thư mục gốc project — lệnh này tự nhận diện các thư mục harness như `~/.claude`, `~/.codex` hoặc `.cursor`, cho bạn giữ nguyên hoặc tùy chỉnh danh sách provider, rồi hỏi cài vào project hiện tại hay cài global (`--providers=claude,codex,cursor,grok` và `--scope=project|global` giúp bỏ qua các câu hỏi đó khi chạy script). Trên Claude Code, Cursor, Codex, GitHub Copilot và Grok Build, lệnh này còn cài luôn hook manifest cho project đó. Khởi động lại harness rồi chạy `/impeccable init` bên trong nó. Người dùng Claude Code cũng có thể chạy `/plugin marketplace add pbakaus/impeccable` rồi cài từ danh sách; team muốn vendor gói này qua Git thì thêm nó dưới dạng git submodule. `npx impeccable update` dùng để làm mới bản cài đã có — người dùng Codex cần mở lại `/hooks` và duyệt lại hook của project sau đó, vì Codex theo dõi trust theo từng định nghĩa hook.

Dùng Impeccable với AI agent của bạn

Mọi lệnh đều chạy qua skill `/impeccable` duy nhất: `/impeccable audit`, `/impeccable polish`, `/impeccable distill`, `/impeccable critique`, mỗi lệnh có thể chỉ định thêm mục tiêu như `/impeccable polish the checkout form`. Gõ `/impeccable` một mình để xem toàn bộ 23 lệnh, hoặc bỏ qua danh sách và mô tả thẳng điều bạn muốn, kiểu `/impeccable redo this hero section`. Codex không dùng cú pháp lệnh `/impeccable` — mở `/skills` hoặc gõ `$impeccable` thay vào đó. Nếu bạn dùng một lệnh liên tục, `/impeccable pin audit` sẽ nâng nó thành shortcut riêng `/audit`.

Ai nên dùng Impeccable?

Impeccable là một developer tool dành cho những dev dựa vào AI coding agent để làm UI thường xuyên đến mức các dấu hiệu thiết kế rập khuôn cứ lặp đi lặp lại — freelancer làm landing page cho khách, team nhỏ không có designer riêng, hoặc bất kỳ ai phải review nhiều component do agent sinh ra. Nó cũng phù hợp với team muốn có frontend design automation làm cổng kiểm tra trong CI: `npx impeccable detect --json .` chạy 59 quy tắc mà không cần agent hay API key nào. Impeccable sẽ ít hữu ích hơn nếu bạn hiếm khi đụng đến code frontend, hoặc coding tool bạn dùng không nằm trong danh sách provider được hỗ trợ.

Câu hỏi thường gặp

Lựa chọn thay thế

Repo liên quan