Impeccable: đưa design language vào AI coding agent để frontend bớt “mặc định”
Impeccable là design skill cho AI coding agent, với 24 lệnh, PRODUCT.md và 62 rule kiểm tra xác định. Công cụ giúp đưa planning UI, review UX, accessibility và responsive vào quy trình làm frontend.
AI coding agent có thể dựng landing page rất nhanh. Nhưng kết quả thường lộ “mùi template”: Inter ở mọi nơi, gradient tím–xanh, card lồng card, icon trong ô vuông bo tròn phía trên mỗi heading.
Code chạy được, nhưng chưa chắc đã giống sản phẩm của đội bạn.
Vấn đề không chỉ nằm ở một prompt. Qua từng phiên chat, agent dễ thiếu bối cảnh: người dùng là ai, sản phẩm giải quyết việc gì, giọng điệu nào phù hợp, ràng buộc nào không được phá. Frontend vì thế có thể trở thành chuỗi bản vá giao diện thay vì một hệ thống nhất quán.
Impeccable là design skill cho AI coding agent, hiện có hơn 89.000 stars trên GitHub theo dữ liệu được cung cấp. Nó biến những yêu cầu mơ hồ như “làm bớt chán” hay “soát trước khi ship” thành tập lệnh dùng chung, đi kèm file bối cảnh sản phẩm và các kiểm tra có thể chạy không cần API key.
Impeccable thay đổi gì trong quy trình frontend?
Theo README, Impeccable bắt đầu từ frontend-design, skill của Anthropic dành cho Claude, rồi mở rộng thành lớp hướng dẫn thiết kế cho nhiều AI harness như Claude Code, Cursor và Codex CLI.
Công cụ xoay quanh ba phần:
PRODUCT.md: lưu thông tin bền vững về sản phẩm như đối tượng dùng, mục đích, ngữ cảnh vận hành, ràng buộc, giọng điệu và bằng chứng.
DESIGN.md: ghi lại hệ thống visual hiện có hoặc mới xây dựng, tách khỏi bối cảnh sản phẩm.
24 command: hỗ trợ từ lập kế hoạch UI, critique UX đến kiểm tra accessibility, responsive và hiệu năng.
Điểm thực dụng là team không cần lặp lại toàn bộ brief ở mọi prompt. Agent có một điểm tham chiếu chung trước khi sinh hoặc chỉnh sửa giao diện.
> Impeccable không thay thế Figma, design token hay component library. Nó gần với lớp “brief + quy trình review” cho AI agent hơn.
Cài vào repo và khởi tạo bối cảnh
README khuyến nghị chạy installer từ thư mục gốc của dự án:
bash
npx impeccable install
Installer sẽ phát hiện các harness hoặc CLI hiện có, chẳng hạn Claude, Codex, Grok, Hermes, Veto hay cấu hình .cursor. Có thể chỉ định provider và phạm vi cài đặt:
bash
npx impeccable install --providers=claude,codex,replit,cursor,grok,hermes,veto --scope=project
Sau khi reload AI coding tool, chạy trong phiên agent:
text
/impeccable init
Lệnh init kiểm tra project, chỉ hỏi những phần còn thiếu trong bối cảnh sản phẩm dài hạn rồi ghi vào PRODUCT.md.
README cũng phân biệt rõ: kiểu người truy cập và hướng visual được chọn theo từng bề mặt UI; chúng không nên bị trộn lẫn với dữ kiện cốt lõi, lâu dài của sản phẩm.
Một luồng thử tối thiểu cho repo frontend có sẵn:
Chạy installer tại root repo.
Mở agent trong workspace và nhập /impeccable init.
Trả lời câu hỏi về người dùng, mục đích, ràng buộc và giọng điệu sản phẩm.
Đọc lại PRODUCT.md, chỉnh các mô tả quá mơ hồ.
Nếu codebase đã có UI, chạy tiếp:
text
/impeccable document
Lệnh này tạo DESIGN.md ở root từ code hiện hữu.
Để cập nhật bản cài đặt:
bash
npx impeccable update
Với Codex, README yêu cầu mở /hooks để chấp thuận project hook khi được nhắc. Với Grok Build, project cần được trust qua /hooks-trust hoặc khởi chạy với --trust trước khi script trong .grok/hooks/ hoạt động.
Đặt command vào vòng đời làm UI
Không nhất thiết phải dùng đủ 24 lệnh. Với team frontend, có thể gắn một số lệnh vào các bước vốn đã có trong quy trình:
| Thời điểm | Lệnh phù hợp | Mục đích |
|---|---|---|
| Trước khi code flow mới | /impeccable shape | Lập kế hoạch UX/UI trước khi sinh component |
| Review trải nghiệm | /impeccable critique | Soát hierarchy, độ rõ ràng và cảm xúc giao diện |
| Trước khi ship | /impeccable audit | Kiểm tra accessibility, hiệu năng và responsive |
| Hoàn thiện giao diện | /impeccable polish | Căn chỉnh design system và mức sẵn sàng phát hành |
| Xử lý trạng thái xấu | /impeccable harden | Bổ sung error handling, i18n, text overflow và edge case |
README đưa ra các ví dụ trực tiếp:
text
/impeccable audit blog
/impeccable critique landing
/impeccable polish settings
/impeccable harden checkout
Cũng có thể dùng mô tả tự do:
text
/impeccable redo this hero section
Nếu một lệnh được dùng thường xuyên, có thể tạo shortcut:
text
/impeccable pin audit
Sau đó gọi trực tiếp bằng:
text
/audit
62 rule có ích gì, và đâu là phần vẫn cần người review?
Impeccable có 62 deterministic detector rules, bên cạnh các kiểm tra critique chỉ dành cho LLM. Theo README, CLI và browser extension có thể chạy nhóm rule xác định mà không cần LLM hoặc API key.
Đây là điểm đáng chú ý nếu team muốn thêm một lớp kiểm tra UI mà không biến mọi lượt audit thành chi phí token.
README cũng nêu các anti-pattern mà skill hướng dẫn agent tránh:
font bị lạm dụng như Arial, Inter và system default;
chữ xám trên nền có màu;
dùng đen hoặc xám thuần;
bọc mọi thứ bằng card, đặc biệt là card lồng card;
easing bounce hoặc elastic dễ tạo cảm giác lỗi thời.
Tuy nhiên, đây là guidance, không phải luật thiết kế áp dụng cho mọi sản phẩm. Dashboard nội bộ có thể ưu tiên mật độ thông tin và tính quen thuộc hơn một landing page. Output vẫn cần được review theo thương hiệu, accessibility thực tế và mục tiêu sản phẩm.
Ngoài các lệnh review, Impeccable còn có:
/impeccable animate
/impeccable colorize
/impeccable typeset
/impeccable layout
/impeccable clarify
/impeccable adapt
/impeccable optimize
/impeccable live
Trong đó, live là chế độ lặp biến thể trực tiếp trong browser. Lệnh generate tạo các biến thể cho một element được đặt tên mà không cần chọn thủ công.
Tích hợp theo nhiều cách
README cho biết Impeccable không cần runtime riêng. Mỗi bản skill có launcher nhỏ và engine binary tự chứa, đặt cạnh launcher hoặc được tải một lần vào:
text
~/.impeccable/bin/
Node chỉ cần khi dùng installer npx; các cách dùng Git hoặc cài thủ công không phụ thuộc Node.
Với team muốn đưa Impeccable vào repo bằng Git submodule:
bash
git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable link --source=.impeccable --providers=claude,cursor
git add .gitmodules .impeccable .claude .cursor
git commit -m "Add Impeccable skills"
README nói lệnh link sẽ liên kết từng thư mục skill từ .impeccable/dist/universal/ và không đè các thư mục skill thật có sẵn, trừ khi dùng --force.
GitHub Copilot trong VS Code cũng có extension riêng:
bash
code --install-extension renaissance-geek.impeccable
Theo README, extension này yêu cầu VS Code 1.109.3+, Copilot Chat và local workspace được trust. Đây là extension dạng skill, không cài automatic hooks; tài liệu cũng khuyến cáo tránh cài hai bản Impeccable trùng nhau trong cùng workspace hoặc profile.
Checklist thử nghiệm
[ ] Cài ở phạm vi project nếu muốn chia sẻ thiết lập trong repo.
[ ] Chạy /impeccable init và đọc lại PRODUCT.md.
[ ] Dùng /impeccable document nếu repo đã có UI.
[ ] Dùng shape trước khi build, critique khi review UX và audit trước khi ship.
[ ] Không xem detector rule là phán quyết cuối cùng.
[ ] Kiểm tra kết quả trên giao diện thực tế, thiết bị phù hợp và tiêu chí sản phẩm.
Impeccable đáng thử không phải vì hứa hẹn tạo UI đẹp chỉ bằng một lệnh. Giá trị của nó nằm ở việc buộc AI coding agent làm việc trong một ngôn ngữ chung: hiểu sản phẩm trước, giữ hướng thiết kế nhất quán, rồi mới tăng tốc viết frontend.