Chào mọi người,
Nếu bạn từng nhờ coding agent làm một trang web và nhận về một giao diện na ná nhau: font Inter cho mọi thứ, gradient tím sang xanh, card lồng trong card, chữ xám trên nền màu, icon hình vuông bo tròn đặt trên mỗi tiêu đề, thì bạn đã gặp thứ mà cộng đồng gọi là AI slop. Repo hôm nay sinh ra để chặn đúng thứ đó trước khi nó lên production: Impeccable của Paul Bakaus.
Impeccable là gì?
Impeccable, repo pbakaus/impeccable, được mô tả ngắn gọn là bộ từ vựng thiết kế cho coding agent của bạn. Dùng nó để điều khiển agent bằng những lệnh có nghĩa rõ ràng như polish và bolder, review bằng critique và audit, và bắt AI slop trước khi ship.
Repo được tạo ngày 16/11/2025, giấy phép Apache-2.0, và bản sao GitHub được crawl gần đây ghi nhận hơn 101.500 sao, gần 6.000 fork, hơn 2.600 commit và 93 release. Đây không phải một repo mới nổi vài ngày, mà là một skill đã được dùng và phát triển qua nhiều tháng.
Impeccable xuất phát từ skill frontend-design của Anthropic, rồi được mở rộng thành một hệ ngôn ngữ thiết kế đầy đủ hơn, với ghi nhận đóng góp trong file NOTICE của repo.
Vì sao agent hay làm ra giao diện na ná nhau?
Khi bạn chỉ nói Make it pop hay làm cho đẹp lên, agent không có từ ngữ cụ thể để bám vào, nên nó sẽ chọn mẫu an toàn nhất mà nó đã thấy nhiều nhất: Inter, gradient tím-xanh, card lồng card, chữ xám trên nền màu. Những mẫu này xuất hiện lặp lại qua nhiều model và nhiều dự án, không phải vì chúng xấu trong mọi trường hợp, mà vì chúng là đáp án mặc định khi không có định hướng thiết kế rõ ràng.
Impeccable giải quyết bằng cách cho agent một từ vựng: thay vì nói chung chung, bạn nói /impeccable bolder the pricing cards, và agent sẽ tải đúng playbook cho thao tác đó, áp lên đúng đối tượng đó.
24 lệnh, chia theo vai trò
Tổng cộng có 24 lệnh, trong đó craft là alias cũ cho yêu cầu build thông thường. Các nhóm chính:
- Điều khiển (Steer): bolder làm mạnh thiết kế an toàn lên, quieter làm dịu thiết kế ồn ào xuống, distill lược bỏ thứ thừa, colorize thêm màu cho giao diện xám, typeset sửa font và hierarchy, layout sửa khoảng cách và nhịp, animate thêm chuyển động và phản hồi tương tác, delight thêm cá tính, overdrive chơi tới shader, spring physics và hiệu ứng theo scroll.
- Review: critique là review UX có chấm điểm và xếp thứ tự sửa, audit là báo cáo kỹ thuật về accessibility, hiệu năng, theming và responsive, với mức độ từ P0 chặn release tới P3 chỉ là polish.
- Hoàn thiện (Finish): polish là lượt cuối trước khi ship, harden lo lỗi, i18n, tràn nội dung và edge case, clarify viết lại copy khó hiểu, adapt xử lý màn hình và thiết bị, optimize sửa tốc độ tải và render, onboard thiết kế luồng lần đầu và trạng thái trống.
- Lặp trực tiếp (Live): live cho phép chọn một element trong trình duyệt và xoay vòng các biến thể, generate tạo biến thể cho một element mà không cần chọn tay.
- Lên kế hoạch và thiết lập: shape lên kế hoạch UX trước khi code, init viết PRODUCT.md, document viết DESIGN.md, extract tách các pattern lặp lại thành design system.
Quy tắc quan trọng: target càng hẹp thì kết quả càng tốt. Review kỹ một section tốt hơn nhiều so với lướt qua cả trang.
Cách hoạt động: PRODUCT.md và DESIGN.md
Chạy /impeccable init một lần cho mỗi project. Lệnh này đọc code của bạn, chỉ hỏi những gì nó không suy ra được, như sản phẩm này dành cho ai, cần làm gì và có ràng buộc gì, rồi ghi vào PRODUCT.md. Mọi lệnh sau đó đều đọc file này.
Chạy /impeccable document để ghi lại hệ thống thị giác hiện có vào DESIGN.md, nhờ đó các thay đổi sau vẫn giữ đúng thương hiệu, thay vì mỗi lần agent lại chọn một phong cách mới.
Bộ phát hiện AI slop: không cần LLM, không cần API key
Ngoài skill cho agent, Impeccable còn có một detector chạy bằng 62 quy tắc xác định, không dùng LLM và không cần API key. Nó bắt các dấu hiệu quen thuộc như font bị lạm dụng, gradient tím-xanh, card lồng card, chữ xám trên nền màu, tương phản thấp, chữ quá nhỏ, hierarchy phẳng, bỏ qua heading, padding chật, và nhiều vấn đề chất lượng khác.
Detector chạy được theo 3 cách:
- Trong agent, qua design hook: hook quét mọi file UI mà agent vừa sửa và trả kết quả lại trước khi agent coi như xong việc. Đây là nơi bắt được nhiều slop nhất, vì không cần ai nhớ chạy detector.
- Trong terminal hoặc CI, không cần agent: npx impeccable detect src/, quét một URL đã render bằng Chrome hoặc Edge đã cài, xuất JSON bằng --json, hoặc ghi annotation cho GitHub Actions bằng --github. Mã thoát 2 nghĩa là có phát hiện, mã 1 nghĩa là có target không quét được.
- Trong trình duyệt, qua extension Chrome: overlay cùng các phát hiện lên bất kỳ trang live nào, của bạn hay của người khác.
Ví dụ so sánh trực tiếp trong README, cùng một model và cùng một brief là một guesthouse 14 phòng ở bờ biển Liguria:
Không dùng Impeccable:
Dùng Impeccable:
Không dùng Impeccable, agent làm ra đáp án mặc định tasteful nhưng nhạt. Dùng Impeccable, trang được xây quanh một hình ảnh chủ đạo: ngôi nhà về đêm nhìn từ mặt biển.
Chế độ Live: chọn element ngay trong trình duyệt
/impeccable live mở dev server đang chạy của bạn kèm một lớp overlay. Bạn chọn một element, chọn hướng đi, và Impeccable đổi biến thể ngay tại chỗ. Chấp nhận một biến thể thì nó sẽ ghi ngược vào source code của bạn. Live mode hỗ trợ Vite, Next, SvelteKit, Astro, Nuxt và HTML thuần.
Lưu ý an toàn: live mode chỉ chỉnh sửa checkout local, đừng đưa nó vào site đã deploy hoặc nới lỏng CSP của production để nó chạy được. Ngoài ra, tính năng Apply có thể chạy CLI codex hoặc claude với chế độ bỏ qua approval và sandbox trong một số trường hợp, nên hãy đọc kỹ cấu hình và chỉ dùng trong repo mà bạn tin tưởng.
Cài đặt và công cụ hỗ trợ
Từ thư mục gốc của project:
npx impeccable install
Sau đó tải lại coding tool của bạn, rồi chạy /impeccable init trong agent, trên Codex thì dùng $impeccable init.
Impeccable hỗ trợ rất nhiều công cụ: Claude Code, Cursor, Codex CLI, GitHub Copilot, Devin, Replit Agent, Gemini CLI, Grok Build, OpenCode, Google Antigravity, Kiro, Trae, Rovo Dev, Qoder, Mistral Vibe, Pi, Hermes Agent, DeepSeek Harness và Veto. Ngoài ra còn có plugin cho Claude Code, extension cho VS Code, cài bằng git submodule cho cả team, hoặc copy thủ công nếu không muốn dùng Node.
Ưu điểm
- Cho agent từ ngữ thiết kế cụ thể, thay vì để nó đoán từ những câu mơ hồ như làm cho đẹp lên.
- Detector xác định, chạy nhanh, không tốn token LLM, dùng được trong CI và trong hook của agent.
- Có cả vai trò điều khiển, review và hoàn thiện, không chỉ dừng ở kiểm tra lỗi.
- Giữ nhất quán thương hiệu nhờ PRODUCT.md và DESIGN.md, thay vì mỗi lần sửa lại đổi phong cách.
- Hỗ trợ nhiều công cụ agent phổ biến, nên team không cần đổi tool mới dùng được.
Nhược điểm và giới hạn
- Vẫn phụ thuộc vào model: từ vựng tốt giúp agent làm tốt hơn, nhưng không biến một model yếu thành designer giỏi.
- Cần target hẹp và brief rõ: nhờ nó làm lại cả trang trong một lần thường cho kết quả kém hơn sửa từng section.
- Lệnh bolder và overdrive nếu lạm dụng sẽ đi ngược lại mục tiêu: từ giao diện nhạt thành giao diện ồn ào, nhiều hiệu ứng nhưng khó dùng.
- Live mode và Apply cần đọc kỹ quyền chạy, vì có trường hợp nó chạy agent CLI với quyền bỏ qua approval.
- Skill của bên thứ ba nói chung vẫn là code không tin cậy theo mặc định: hãy đọc SKILL.md và cấu hình hook trước khi cài, ưu tiên nguồn chính thức và phiên bản đã ghim.
- Impeccable không thay thế designer: nó giúp agent tránh lỗi phổ biến và làm đúng hệ thống hơn, chứ không tự tạo ra chiến lược thương hiệu hay trải nghiệm người dùng từ con số 0.
Ai nên dùng?
- Developer dùng coding agent để làm frontend và chán với giao diện mặc định na ná nhau.
- Team nhỏ muốn có một design system nhẹ, không muốn dựng cả quy trình design review nặng nề.
- Người làm landing page, dashboard và component, muốn review nhanh bằng critique và audit trước khi ship.
Nếu bạn chỉ code backend và ít đụng tới UI, Impeccable sẽ ít giá trị hơn. Còn nếu UI là thứ khách hàng nhìn thấy đầu tiên, thì đây là một trong những skill đáng thử nhất hiện nay.
Mọi người đã thử Impeccable chưa? Lệnh nào bạn thấy hữu ích nhất: critique, audit, polish hay live?
Nguồn tham khảo: