Có một sự thật khá buồn cười trong thời đại AI coding:

AI viết code ngày càng giỏi.

Nhưng AI thiết kế giao diện thì đôi khi vẫn rất… “AI”.

Bạn chỉ cần bảo:

Tạo cho tôi landing page SaaS hiện đại.

Và rất có thể bạn sẽ nhận được combo quen thuộc:

• nền gradient tím xanh,
• font Inter ở khắp mọi nơi,
• card bo góc lồng trong card bo góc,
• icon nằm trong ô vuông bo tròn,
• text xám nhạt trên nền màu,
• spacing đều đều như dùng thước kẻ trong Excel.

Nhìn không hẳn xấu.

Nhưng nhìn vào là biết:

“À, giao diện này chắc AI vừa đẻ ra.”

Và đó là lúc repo Impeccable trở nên thú vị.

Repo này không phải framework UI.

Cũng không phải component library kiểu shadcn/ui, MUI hay Ant Design.

Nó giống một bộ “ngôn ngữ thiết kế” dành cho AI coding hơn.

Nói đơn giản:

Impeccable giúp AI hiểu thiết kế tốt hơn trước khi nó viết code UI cho bạn.

---

1. Impeccable là gì?

Impeccable là một repo giúp các AI coding tool như Cursor, Claude Code, Gemini CLI, Codex CLI, Copilot, OpenCode… có thêm “kỹ năng thiết kế giao diện”.

Thay vì chỉ bảo AI:

Làm UI đẹp hơn đi.

Bạn có thể nói cụ thể hơn:

/impeccable polish dashboard
/impeccable audit checkout-form
/impeccable critique landing page
/impeccable animate hero section
/impeccable layout pricing page

Lúc này AI không còn đoán mò kiểu:

“Đẹp hơn nghĩa là thêm gradient và shadow đúng không?”

Mà nó có một bộ tiêu chuẩn rõ ràng để xử lý:

• typography,
• màu sắc,
• spacing,
• motion,
• interaction,
• responsive,
• UX writing.

Nói vui một chút:

Nếu AI coding là một lập trình viên junior, thì Impeccable giống người mentor đứng sau nhắc: “Em ơi, đừng dùng text xám trên nền tím nữa, người dùng không đọc nổi đâu.”

---

2. Repo này có gì đáng chú ý?

Impeccable xoay quanh 3 phần chính:

1. Design skill
2. Bộ command cho AI
3. Anti-pattern detector

Nghe hơi kỹ thuật, nhưng thực ra rất dễ hiểu.

---

2.1 Design Skill — dạy AI có gu hơn

Phần quan trọng nhất của Impeccable là bộ skill thiết kế.

Nó gồm nhiều mảng thiết kế frontend thường gặp:

Mảng	Tác dụng
Typography	Chọn font, cỡ chữ, hierarchy
Color & Contrast	Màu sắc, độ tương phản, dark mode
Spatial Design	Spacing, grid, bố cục
Motion Design	Animation, easing, reduced motion
Interaction Design	Form, focus state, loading state
Responsive Design	Mobile-first, container query
UX Writing	Button label, empty state, error message

Điểm hay là AI không chỉ biết “viết CSS”.

Nó bắt đầu hiểu:

• chỗ nào cần nổi bật,
• chỗ nào cần yên tĩnh,
• nút nào nên rõ ràng hơn,
• form nào đang khó dùng,
• layout nào đang bị nghẹt thở,
• animation nào đang hơi “lố”.

Ví dụ trước đây bạn prompt:

Make this page look better.

AI có thể thêm:

<div className="bg-gradient-to-r from-purple-500 to-blue-500 shadow-xl rounded-2xl">

Nhìn thì có vẻ “đẹp hơn”.

Nhưng nếu trang nào cũng tím xanh, shadow, rounded thì sau 3 màn hình người dùng sẽ thấy như đang đi lạc trong showroom đèn LED.

Với Impeccable, prompt có thể rõ hơn:

/impeccable quieter pricing page

AI sẽ hiểu là:

• giảm độ chói,
• giảm hiệu ứng dư thừa,
• làm hierarchy rõ hơn,
• giữ giao diện sạch và dễ đọc.

---

2.2 Bộ command — nói chuyện với AI bằng ngôn ngữ thiết kế

Điểm cực kỳ đáng giá của Impeccable là bộ lệnh /impeccable.

Thay vì mô tả dài dòng, bạn có thể dùng command như một shortcut.

Một số command nổi bật:

Command	Dùng để làm gì?
/impeccable craft	Lên flow thiết kế rồi build UI
/impeccable teach	Thiết lập context thiết kế cho project
/impeccable document	Tạo tài liệu DESIGN.md từ project hiện có
/impeccable shape	Lên UX/UI trước khi code
/impeccable critique	Review UI/UX
/impeccable audit	Kiểm tra accessibility, responsive, performance
/impeccable polish	Dọn UI trước khi ship
/impeccable bolder	Làm thiết kế mạnh, nổi bật hơn
/impeccable quieter	Giảm độ lố, làm UI tinh tế hơn
/impeccable harden	Xử lý edge case, lỗi form, text dài
/impeccable animate	Thêm motion có chủ đích
/impeccable layout	Sửa spacing, grid, nhịp thị giác
/impeccable clarify	Viết lại UX copy cho dễ hiểu
/impeccable adapt	Tối ưu giao diện cho nhiều thiết bị

Đây chính là phần rất hợp với vibe coding.

Vì vibe coding thường bắt đầu bằng cảm giác:

Làm màn này đẹp hơn chút.

Nhưng “đẹp hơn” là một yêu cầu rất mơ hồ.

Impeccable biến cảm giác mơ hồ đó thành hành động cụ thể.

Ví dụ:

/impeccable layout dashboard

Tức là:

Tập trung sửa bố cục dashboard.

/impeccable polish settings page

Tức là:

Dọn lại UI trang settings để sẵn sàng ship.

/impeccable harden checkout form

Tức là:

Xử lý lỗi nhập liệu, trạng thái loading, empty state, edge case.

Nó giống như bạn có một bộ nút điều khiển:

• làm mạnh hơn,
• làm nhẹ hơn,
• làm rõ hơn,
• làm mượt hơn,
• làm chắc hơn.

Rất đúng tinh thần vibe coding.

---

2.3 Anti-pattern detector — máy soi “UI mùi AI”

Impeccable còn có CLI để phát hiện các anti-pattern trong giao diện.

Hiểu đơn giản:

Nó giúp bạn soi những lỗi UI mà AI rất hay tạo ra.

Ví dụ các lỗi thường gặp:

• dùng font quá phổ biến không có cá tính,
• lạm dụng gradient tím xanh,
• text xám trên nền màu,
• card lồng card,
• animation bounce/elastic hơi cũ,
• padding quá chật,
• line length quá dài,
• touch target quá nhỏ,
• heading bị nhảy cấp.

Bạn có thể chạy:

npx impeccable detect src/

Hoặc quét một file HTML:

npx impeccable detect index.html

Hoặc quét cả một URL:

npx impeccable detect https://example.com

Điểm hay là phần detector có thể chạy mà không cần API key AI.

Tức là bạn có thể dùng nó như một công cụ kiểm tra UI độc lập.

Nó không thay designer.

Nhưng nó giúp bắt những lỗi rất phổ biến trước khi bạn đem sản phẩm đi khoe.

---

3. Ứng dụng Impeccable trong vibe coding

Vibe coding là kiểu làm sản phẩm bằng cách:

• nghĩ nhanh,
• prompt nhanh,
• build nhanh,
• sửa nhanh,
• nhìn kết quả rồi tiếp tục chỉnh.

Nó rất hợp để:

• làm MVP,
• prototype,
• landing page,
• admin dashboard,
• tool nội bộ,
• demo sản phẩm.

Nhưng điểm yếu lớn nhất của vibe coding là:

giao diện dễ bị “na ná nhau”.

Vì AI thường sinh ra UI theo các pattern quen thuộc.

Impeccable giúp xử lý đúng điểm đau này.

---

3.1 Dùng Impeccable để lên concept trước khi code

Thay vì prompt ngay:

Tạo landing page cho ứng dụng quản lý nhân sự.

Bạn có thể đi theo flow tốt hơn:

/impeccable shape landing page for HRM SaaS

AI sẽ tập trung vào:

• đối tượng người dùng,
• bố cục chính,
• hero section,
• CTA,
• trust signal,
• flow đọc nội dung,
• điểm nhấn thị giác.

Sau đó mới build.

Đây là cách vibe coding có kiểm soát.

Không phải cứ “quăng prompt rồi cầu nguyện”.

---

3.2 Dùng Impeccable để polish UI trước khi ship

Sau khi AI tạo xong giao diện, thường sẽ có cảm giác:

“Nhìn ổn, nhưng vẫn thiếu gì đó.”

Đó là lúc dùng:

/impeccable polish dashboard

Nó sẽ xem lại:

• spacing có đều không,
• heading có rõ không,
• màu có bị loạn không,
• button có đủ nổi bật không,
• card có bị lạm dụng không,
• mobile có ổn không.

Ví dụ một card AI tạo ban đầu:

<div className="bg-white rounded-xl shadow p-4">
  <h3 className="text-gray-500 text-sm">Revenue</h3>
  <p className="text-2xl font-bold">$24,500</p>
</div>

Sau khi polish, AI có thể chỉnh thành:

<div className="rounded-2xl border bg-white p-5 shadow-sm">
  <p className="text-sm font-medium text-slate-500">Monthly Revenue</p>
  <div className="mt-3 flex items-end justify-between">
    <p className="text-3xl font-semibold tracking-tight text-slate-950">$24,500</p>
    <span className="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">
      +12.4%
    </span>
  </div>
</div>

Khác biệt không chỉ là “đẹp hơn”.

Mà là:

• thông tin rõ hơn,
• spacing tốt hơn,
• hierarchy tốt hơn,
• trạng thái dữ liệu có ý nghĩa hơn.

---

3.3 Dùng Impeccable để audit giao diện

Khi bạn làm nhanh, rất dễ quên các chi tiết nhỏ:

• focus state,
• mobile layout,
• text overflow,
• contrast,
• loading state,
• empty state,
• error state.

Mà những thứ này khi demo thì không sao.

Nhưng khi user thật dùng thì bắt đầu “toang”.

Dùng:

/impeccable audit checkout-form

AI sẽ review giao diện theo góc nhìn kỹ thuật hơn.

Nó có thể gợi ý:

• input cần label rõ hơn,
• error message nên cụ thể hơn,
• button loading cần disable,
• touch target mobile cần lớn hơn,
• màu error cần đủ contrast,
• form submit cần xử lý double click.

Ví dụ form ban đầu:

<button onClick={submit}>Pay now</button>

Sau khi harden/audit:

<button
  type="submit"
  disabled={isSubmitting}
  aria-busy={isSubmitting}
  className="min-h-11 rounded-xl bg-slate-950 px-5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-60"
>
  {isSubmitting ? "Processing..." : "Pay now"}
</button>

Đây là phần rất quan trọng.

Vì vibe coding tạo ra sản phẩm nhanh.

Nhưng muốn sản phẩm dùng được thật thì phải harden.

---

3.4 Dùng Impeccable để làm UI bớt “AI generated”

Một vấn đề rất phổ biến hiện nay:

AI tạo UI nhìn đẹp, nhưng nhìn cái biết AI tạo.

Các dấu hiệu thường gặp:

• gradient tím xanh quá quen,
• card quá nhiều,
• section nào cũng giống section nào,
• icon tile lặp lại,
• text marketing hơi sáo rỗng,
• animation cho có.

Impeccable có các lệnh rất hợp để xử lý:

/impeccable distill landing page

Dùng khi UI quá rối.

/impeccable bolder hero section

Dùng khi UI quá nhạt.

/impeccable quieter pricing page

Dùng khi UI quá màu mè.

/impeccable clarify onboarding copy

Dùng khi text khó hiểu hoặc nghe quá AI.

Đây là điểm mình thấy rất hay.

Nó không ép mọi giao diện phải theo một style duy nhất.

Mà giúp AI điều chỉnh “âm lượng thiết kế”.

Khi nhạt thì làm đậm hơn.

Khi ồn thì làm yên hơn.

Khi rối thì chắt lọc lại.

---

4. Cách cài và dùng nhanh

Impeccable hỗ trợ khá nhiều AI coding tool.

Một số tool phổ biến:

• Cursor
• Claude Code
• Gemini CLI
• Codex CLI
• GitHub Copilot
• OpenCode
• Trae
• Kiro
• Qoder

Cách đơn giản nhất là vào website của Impeccable để tải bundle phù hợp với tool bạn đang dùng.

Nếu dùng theo repo, có thể copy thư mục tương ứng vào project.

---

4.1 Với Cursor

Ví dụ copy skill cho Cursor:

cp -r dist/cursor/.cursor your-project/

Sau đó trong Cursor, bạn có thể dùng skill để gọi các command thiết kế.

Ví dụ:

/impeccable polish dashboard

Hoặc:

/impeccable critique landing

Cursor rất hợp với Impeccable vì workflow quen thuộc với developer.

Bạn vừa code, vừa chat với AI, vừa yêu cầu polish UI ngay trong project.

---

4.2 Với Codex CLI

Codex CLI có thể dùng theo dạng skill.

Ví dụ cài project-local:

cp -r dist/agents/.agents your-project/

Hoặc cài user-wide:

mkdir -p ~/.agents/skills
cp -r dist/agents/.agents/skills/* ~/.agents/skills/

Sau đó có thể mở danh sách skill hoặc gọi skill Impeccable tùy tool hỗ trợ.

Điểm hay khi dùng với Codex là:

• Codex mạnh về reasoning,
• Impeccable bổ sung gu thiết kế,
• combo này rất hợp để build UI có logic tốt hơn.

---

4.3 Với Gemini CLI

Gemini vốn đã khá mạnh về UI/UX.

Khi thêm Impeccable, Gemini có thêm bộ tiêu chuẩn để tránh overdesign.

Ví dụ:

/impeccable quieter hero section

Rất hợp khi Gemini bắt đầu thêm hơi nhiều hiệu ứng.

Kiểu:

“Đẹp rồi em, nhưng bớt pháo hoa lại một chút.”

---

5. Đánh giá tổng quan

Impeccable không phải công cụ thay thế designer.

Nó cũng không biến một giao diện tệ thành masterpiece chỉ bằng một câu lệnh.

Nhưng nó giải quyết rất đúng một vấn đề của vibe coding:

AI code nhanh, nhưng UI dễ bị chung chung.

Điểm mạnh của Impeccable là nó cho AI một bộ ngôn ngữ thiết kế rõ ràng hơn.

Thay vì nói:

Làm đẹp hơn.

Bạn có thể nói:

/impeccable polish
/impeccable layout
/impeccable audit
/impeccable clarify
/impeccable harden

Và AI sẽ hiểu bạn muốn cải thiện theo hướng nào.

---

Khi nào nên dùng Impeccable?

Nên dùng khi bạn:

• vibe code landing page,
• build dashboard,
• làm SaaS MVP,
• tạo admin panel,
• làm form checkout,
• polish UI trước khi demo,
• muốn AI bớt tạo giao diện “mùi template”.

Không nhất thiết dùng nếu bạn:

• chỉ viết backend,
• chỉ sửa logic nhỏ,
• không quan tâm UI,
• đã có design system rất chặt.

---

Kết luận

Nếu phải mô tả Impeccable trong một câu:

Đây là bộ “gu thẩm mỹ có cấu trúc” dành cho AI coding.

Nó không làm thay toàn bộ công việc thiết kế.

Nhưng nó giúp AI:

• hiểu UI tốt hơn,
• tránh lỗi thiết kế lặp lại,
• polish sản phẩm sạch hơn,
• audit giao diện kỹ hơn,
• và biến vibe coding từ “code nhanh cho vui” thành “prototype có thể đem demo thật”.

Trong thời đại AI coding, ai cũng có thể tạo giao diện.

Nhưng tạo giao diện có gu, có flow, có khả năng dùng thật thì vẫn cần một lớp tư duy thiết kế.

Impeccable chính là lớp đó.