Impeccable là một kỹ năng mã nguồn mở dành cho Claude Code, được Paul Bakaus phát triển để khắc phục vấn đề "sự cẩu thả của AI" trong giao diện frontend do AI tạo ra. Bộ kỹ năng này cung cấp 20 lệnh điều khiển (/audit, /polish, /critique, v.v.), 7 tệp tham chiếu thiết kế chuyên biệt, cùng thư viện anti-pattern giúp AI tránh các lỗi giao diện phổ biến. Kết quả là sản phẩm frontend trông chuyên nghiệp, khác biệt, và ít bị "lộ" dấu vết AI hơn.
Tại sao mọi giao diện frontend do AI tạo ra đều trông giống nhau
Khi bạn yêu cầu bất kỳ trợ lý AI nào tạo dashboard, landing page hoặc bảng cài đặt, kết quả thường là các yếu tố quen thuộc: phông Inter, gradient tím-xanh, thẻ lồng thẻ, chữ xám trên nền màu, hero section với số lớn và label nhỏ, hiệu ứng glassmorphism. Điều này xuất phát từ việc AI được huấn luyện trên dữ liệu mẫu phổ biến, dẫn đến các giao diện lặp lại, thiếu cá tính.
Impeccable được phát triển để phá vỡ vòng lặp này. Dựa trên kỹ năng frontend-design của Anthropic, Impeccable bổ sung thêm chiều sâu, phạm vi, và các ràng buộc rõ ràng để tránh các mẫu giao diện nhàm chán do AI thường tạo ra.
💡Trước khi sử dụng các lệnh như /audit, /polish hoặc /overdrive trong Claude Code với Impeccable, hãy tải Apidog miễn phí. Apidog giúp bạn kiểm tra và gỡ lỗi trực quan các endpoint API mà frontend AI của bạn sẽ gọi, xác thực payload, token, response shape và dữ liệu giả chỉ trong vài giây. Điều này giảm thiểu việc phải chỉnh sửa qua lại giữa UI và backend chưa ổn định.
Impeccable thực sự là gì
Impeccable là một kỹ năng cho Claude Code, gồm tập hợp hướng dẫn, tệp tham chiếu, và lệnh gạch chéo cài đặt được, giúp tăng cường khả năng tạo frontend của AI.
Bao gồm ba thành phần chính:
Kỹ năng thiết kế frontend mở rộng
Bên trong Impeccable có kỹ năng frontend-design với 7 tệp tham chiếu chuyên biệt theo từng lĩnh vực:
Ví dụ: tệp hướng dẫn về kiểu chữ phân tích chi tiết về nhịp điệu dọc, cách xử lý FOUT, khi nào không nên dùng clamp(), v.v. Tính chi tiết này giúp AI tránh các lỗi "lười biếng" thường gặp.
Giao thức lấy ngữ cảnh thiết kế
Lệnh /teach-impeccable yêu cầu người dùng xác nhận đối tượng mục tiêu, use case, và tính cách thương hiệu trước khi AI bắt đầu tạo giao diện. Ngữ cảnh này lưu vào .impeccable.md ở root dự án và tự động được tải về sau.
Đây là điểm khác biệt quan trọng giúp AI tạo ra giao diện phù hợp với dự án, thay vì default theo các lựa chọn trung bình.
20 lệnh sửa lỗi giao diện frontend do AI tạo ra
Impeccable cung cấp 20 lệnh gạch chéo, mỗi lệnh xử lý một lỗi phổ biến trong UI do AI tạo ra. Dùng trực tiếp trong Claude Code, ví dụ:
/audit → Kiểm tra accessibility, performance, responsive
/critique → Đánh giá UX, hệ thống phân cấp, cảm xúc
/polish → Tinh chỉnh cuối cùng trước khi deploy
/distill → Rút gọn, loại bỏ phức tạp
/normalize → Đưa về chuẩn hệ thống design system
/animate → Thêm chuyển động purposeful
/colorize → Giới thiệu màu chiến lược cho UI đơn sắc
/bolder → Làm nổi bật thiết kế an toàn, nhạt nhòa
/quieter → Giảm tông thiết kế quá mạnh
/delight → Thêm yếu tố vui vẻ, memorable
/typeset → Xử lý font, phân cấp, kích thước
/arrange → Sắp xếp layout, spacing, visual rhythm
/harden → Xử lý lỗi, i18n, edge cases
/optimize → Tối ưu hiệu suất
/extract → Tách component tái sử dụng, token design
/adapt → Điều chỉnh cho thiết bị/ngữ cảnh khác
/onboard → Thiết kế onboarding, empty state
/clarify → Cải thiện UX copy
/overdrive → Hiệu ứng kỹ thuật nâng cao (shader, spring, scroll reveal)
/teach-impeccable → Thu thập & lưu ngữ cảnh thiết kế
Các lệnh nhận thêm argument phạm vi nếu cần, ví dụ /audit header chỉ kiểm tra header, /polish checkout-form chỉ polish quy trình checkout. Có thể xâu chuỗi lệnh để tạo pipeline tối ưu, ví dụ: /audit → /arrange → /typeset → /polish.
Thư viện Anti-Pattern: Dạy AI điều không nên làm
Điểm mạnh nhất của Impeccable là thư viện anti-pattern. Nó liệt kê rõ ràng các lỗi AI thường mắc phải (KHÔNG nên làm), giúp mô hình tránh lặp lại các lỗi quen thuộc:
Kiểu chữ:
- Không dùng Inter, Roboto, Arial, font hệ thống mặc định
- Không lạm dụng monospace cho cảm giác "developer"
- Không đặt icon tròn lớn trên tiêu đề
Màu sắc:
- Không dùng chữ xám trên nền màu
- Không dùng "bảng màu AI": xanh ngọc, gradient tím-xanh, neon
- Không dùng màu đen/ trắng thuần (
#000,#fff)
Bố cục:
- Không gói mọi thứ trong card
- Không lồng card trong card
- Không tạo grid lặp lại icon + tiêu đề + text
- Không căn giữa tất cả, ưu tiên căn trái và bố cục bất đối xứng
Chuyển động:
- Không dùng bounce, elastic easing
- Không animate
width,height,padding; chỉ animatetransformvàopacity
Những quy tắc này giúp AI tránh các thói quen xấu phổ biến khi generate mã frontend.
Bên dưới: Hệ thống Build, Unit Test và Hỗ trợ Đa công cụ
Hệ thống Build
Nguồn kỹ năng nằm trong source/skills/ (YAML frontmatter) và build ra 8 định dạng nhà cung cấp: Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi.
bun run build # Build cho tất cả nhà cung cấp
bun run rebuild # Xóa và build lại
Transformer tự động điều chỉnh format, metadata, placeholder… phù hợp từng platform.
Bộ Unit Test
Unit test dựa trên Bun (tests/build.test.js), kiểm tra toàn bộ pipeline build:
- Orchestration: Đúng hàm, đúng argument
- Integration: Sinh file thực, check output cho từng provider
- Transformation correctness: Check output đúng định dạng, placeholder
- Edge case: Danh sách kỹ năng rỗng không gây lỗi
bun test
Unit test đảm bảo bạn có thể chỉnh sửa Impeccable an toàn mà không phá vỡ hỗ trợ đa nền tảng.
Impeccable + Apidog: Kết hợp chất lượng thiết kế UI và API
Impeccable giúp kiểm soát chất lượng UI do AI tạo ra, còn Apidog đảm bảo chất lượng API phía backend.
Khi phát triển sản phẩm thực tế với AI, cả UI và API đều phải đáng tin cậy. Apidog cung cấp khả năng:
- Thiết kế API trực quan trước khi code backend
- Tự động tạo mock server từ schema API để frontend có dữ liệu thật
- Chạy test API tự động cho từng endpoint, phát hiện lỗi sớm
- Chia sẻ tài liệu API tương tác cho team frontend/backend
Sử dụng Impeccable cho UI và Apidog cho API sẽ giúp sản phẩm AI của bạn hoàn thiện cả về thiết kế và backend.
Dùng thử Apidog miễn phí để tạo mock server và tài liệu API cho dự án frontend AI tiếp theo.
Bắt đầu với Impeccable
Tải gói đã build sẵn từ impeccable.style, chọn tool và giải nén.
Ví dụ với Claude Code:
# Cài đặt cho dự án
cp -r dist/claude-code/.claude your-project/
# Hoặc cài đặt toàn cục
cp -r dist/claude-code/.claude/* ~/.claude/
Sau đó chạy /teach-impeccable để lưu ngữ cảnh thiết kế, bạn có thể sử dụng toàn bộ 20 lệnh.
Câu hỏi thường gặp
Impeccable khác gì kỹ năng frontend-design của Anthropic? Impeccable bổ sung 7 tệp tham chiếu chuyên sâu, 20 lệnh điều khiển và thư viện anti-pattern rất rõ ràng. Đó là một hệ thống hoàn chỉnh xây dựng trên kỹ năng chính thức.
Impeccable hỗ trợ những công cụ nào? Hỗ trợ Cursor, Claude Code, OpenCode, Gemini CLI, Codex CLI, VS Code Copilot, Kiro, Pi. Build system xuất ra đúng dialect cho từng công cụ.
Lệnh /overdrive có tác dụng gì? Dùng cho hiệu ứng kỹ thuật cao (shader, bảng ảo 60fps, vật lý lò xo, scroll reveal) – dành khi muốn tạo UI ấn tượng vượt chuẩn thông thường.
Unit test trong Impeccable hoạt động thế nào? Dự án có bộ unit test Bun kiểm tra toàn bộ pipeline, từ transformer đến output thực tế. Chạy bun test để kiểm tra.
Có thể kết hợp Impeccable với API-driven frontend không? Có, Impeccable xử lý chất lượng UI, còn Apidog quản lý thiết kế, test, mock và tài liệu API.
Impeccable có miễn phí không? Có. Impeccable mã nguồn mở, giấy phép Apache 2.0. Mã nguồn trên GitHub, bản build tại impeccable.style.
Top comments (0)