Impeccable: Skill giúp AI tạo UI đẹp thay vì "AI slop"

TL;DR

• AI agent biết về OKLCH, baseline grid, tinted neutrals - nhưng không tự áp dụng vì không ai ra lệnh đúng từ ngữ. Đây là "vocabulary problem".
• Impeccable giải quyết bằng 23 slash command và 46 deterministic rule, cho phép bạn điều khiển AI bằng ngôn ngữ thiết kế chuyên nghiệp.
• Benchmark độc lập (Tessl): aggregate score 0.82/1.00, cải thiện +59% chỉ bằng vocabulary injection - không thay model.
• Free, Apache 2.0; được a16z backing và tích hợp sẵn trong GitHub Copilot app.

"AI slop" là gì và tại sao nó xảy ra

Nếu bạn đã dùng Claude Code, Cursor, hay GitHub Copilot để tạo web interface, chắc chắn bạn đã nhận ra pattern: mọi kết quả đều trông giống nhau. Font Inter trên mọi thứ, gradient tím-xanh, cards lồng trong cards, text xám trên nền màu, hero section căn giữa với con số phát sáng.

Cộng đồng developer đặt tên cho hiện tượng này là "AI slop".

Vấn đề không phải là các model AI thiếu kiến thức thiết kế. Claude, GPT, Gemini đều biết rất rõ về OKLCH color, tinted neutrals, vertical typographic rhythm, 8-pixel baseline grid. Chúng biết, nhưng không bao giờ áp dụng - vì không ai ra lệnh đúng từ ngữ. Bottleneck nằm ở khoảng trống giữa intent của developer và execution của AI: đây là vocabulary problem.

Impeccable là gì

Impeccable không phải component library, không phải design system, không phải CSS theme. Nó là một vocabulary layer - lớp ngôn ngữ nằm giữa intent của bạn và execution của AI agent.

Tạo bởi Paul Bakaus - người đã tạo jQuery UI và từng làm Head of Creator Relations tại Google - Impeccable được xây dựng trên ba trụ cột:

• Enhanced skill với 7 reference file chuyên sâu: typography (type systems, font pairing, OpenType), color và contrast (OKLCH, tinted neutrals, dark mode, a11y), spatial design (spacing systems, grids, visual hierarchy), motion design, interaction design, responsive design, và UX writing.
• 23 slash command tạo thành ngôn ngữ thiết kế đầy đủ giữa bạn và AI.
• 46 deterministic detector rule cho phép scan code tìm anti-pattern mà không cần LLM hay API key.

Điểm quan trọng: Impeccable không generate UI từ đầu. Nó chạy bên trong repo agent của bạn để refine, audit, và polish code đã có, đồng thời kế thừa design tokens và Tailwind config của bạn thay vì tạo parallel design system mới.

Bắt đầu trong 30 giây

Cài đặt chỉ cần một lệnh từ root của project:

npx impeccable install

CLI tự detect AI harness của bạn (Claude Code, Cursor, Gemini CLI, Codex, GitHub Copilot...) và cài files vào đúng vị trí. Sau đó, trong AI coding tool, chạy:

/impeccable init

Command init sẽ hỏi bạn đây là loại surface nào: brand (marketing, landing page, portfolio) hay product (app UI, dashboard, tool). Sau đó nó scan codebase, merge Tailwind theme, catalog components, và tạo PRODUCT.md - file context chứa audience, brand voice, anti-references, màu sắc, typography, và components của project. Mọi command sau đó đều đọc PRODUCT.md trước khi design, đảm bảo output phù hợp với context thực tế chứ không phải default của model.

23 command - ngôn ngữ thiết kế chung

Toàn bộ commands được truy cập qua /impeccable. Thay vì mô tả dài dòng, bạn dùng từ ngữ chuyên ngành mà cả bạn và AI đều hiểu như nhau:

Một số command đáng chú ý:

• /impeccable craft - full flow từ UX brief đến code, kết hợp shape và build.
• /impeccable critique - UX design review với persona test và automated detection: hierarchy, clarity, emotional resonance.
• /impeccable audit - kiểm tra kỹ thuật 5 chiều: a11y, performance, responsive, với severity P0-P3.
• /impeccable polish - final pass trước khi ship: alignment, spacing, design system consistency.
• /impeccable bolder - khuếch đại design đang too safe.
• /impeccable typeset - fix font choices, hierarchy, scaling.
• /impeccable layout - fix layout, spacing, visual rhythm.
• /impeccable overdrive - thêm effects kỹ thuật cao: shaders, spring physics, scroll-driven reveals (beta).
• /impeccable live - iterate trực tiếp trong browser qua HMR variants (beta).

Commands có thể chain: /impeccable audit landing → /impeccable polish landing. Mỗi command nhận optional argument để target section cụ thể.

46 quy tắc và CI pipeline

Phần có thể quan trọng nhất của Impeccable là hệ thống negative constraints - tức là nói rõ với AI những gì không được làm. Khi bạn cấm Inter, AI buộc phải chọn font thật. Khi bạn cấm pure black, AI sẽ dùng tinted neutrals.

Các anti-pattern được mã hóa thành quy tắc rõ ràng:

• Typography: không Inter/Roboto/Arial làm default, không monospace cho "developer vibes", không icon tile hình vuông tròn góc trên mọi heading.
• Color: không gray text trên colored background, không "AI palette" (cyan-on-dark, gradient tím-xanh, neon-on-dark), không pure black (#000) hay pure white (#fff).
• Layout: không wrap everything in cards, không nest cards trong cards, không identical card grids (icon + heading + text), không center everything.
• Motion: không bounce hay elastic easing, không animate width/height/padding - chỉ dùng transform và opacity.

CLI detector tích hợp CI/CD pipeline:

npx impeccable detect src/

Detector chạy 46 rules mà không cần LLM, không cần API key. Exit code 2 khi tìm thấy anti-pattern - tích hợp vào PR check để block AI slop trước khi merge. Chrome extension chạy cùng detector như một overlay trên bất kỳ trang web nào, kể cả staging và competitor sites. Thêm --json để lấy machine-readable output cho automation.

Kết quả đo được: +59% chất lượng UI

Tessl - một bên thứ ba độc lập - đã benchmark chất lượng interface được tạo bởi AI với và không có Impeccable, trên ba loại project: revenue dashboard, landing page, và task manager.

Kết quả:

• Aggregate score: 0.82/1.00 (improvement +0.35, 1.59x multiplier).
• OKLCH color usage: từ 0 lên 12/12 khi có skill active.
• Tinted neutrals và fluid typography: gần như bằng 0 khi không có skill, maximum khi có.

Key insight: cải thiện 59% này không đến từ model tốt hơn - mà đến từ vocabulary injection. Capability đã có sẵn trong model. Chỉ là prompt chưa đủ specific để unlock.

So sánh với các công cụ khác

Impeccable khác hoàn toàn với v0 hay Stitch - hai công cụ generate UI from scratch từ prompt hay mockup. Impeccable không tạo song song một design system mới; nó kế thừa tokens và components đã có của bạn.

So với frontend-design skill gốc của Anthropic - bộ skill đầu tiên được dùng rộng rãi cho Claude - Impeccable là một upgrade toàn diện: thêm 7 reference files chuyên sâu, mở rộng từ 17 lên 23 commands, và quan trọng hơn là harness-specific builds. Nghĩa là build cho Gemini CLI sẽ thêm rules chặn thói quen image-on-hover motion của Gemini; build cho Codex CLI từ chối ghost-cards và over-rounding. Cùng một skill, được compile khác nhau cho từng target.

Ai nên dùng ngay

Impeccable phù hợp nhất cho:

• Developer solo hay founder muốn UI đẹp mà không có designer trong team.
• Team đang dùng AI agent (Claude Code, Cursor, Copilot) để implement UI và nhận thấy output "trông như vibe code".
• Design engineer muốn thêm automated design guardrails vào CI pipeline.
• Team có design system muốn AI agent tuân thủ tokens và conventions thay vì tự chế.

Giới hạn cần biết: Impeccable đưa vào context 7 reference files - có token cost thật với mỗi session. Nó cũng là opinionated theo taste của tác giả: "no bounce easing" là quy tắc, không phải universal truth. Và Live Mode (iterate trong browser) vẫn đang beta, cần dev server có HMR.

Kết

Impeccable giải quyết một vấn đề thực tế mà bất kỳ ai dùng AI agent để làm UI đều gặp phải. Thay vì mô tả dài dòng trong mỗi prompt, bạn có một ngôn ngữ thiết kế chung với AI - 23 command rõ ràng, 46 quy tắc cụ thể, và context project được lưu một lần dùng mãi. Kết quả benchmark cho thấy đây không phải chỉ là lý thuyết.

Cài đặt miễn phí qua npx impeccable install, sau đó chạy /impeccable init trong AI coding tool của bạn.

via GitHub pbakaus/impeccable · via a16z (Impeccable by Design)