Skill Claude Code miễn phí: xoá 90% dấu vết giao diện AI

Claude Code viết mã nhanh và logic tốt, nhưng nếu bạn để nó tự quyết định phần nhìn, kết quả thường bị gắn mác "AI-slop". Đó là những giao diện AI rập khuôn: font Inter mặc định, gradient tím-sang-xanh, và các thẻ card lồng nhau vô tận. Vấn đề không phải ở khả năng code của Claude, mà là nó thiếu một "quan điểm thiết kế" (design opinion) và đang chọn giải pháp an toàn nhất từ kho dữ liệu template SaaS đại trà — tức những bộ giao diện mẫu bán/phát sẵn cho các sản phẩm phần mềm SaaS, bị tái sử dụng tràn lan nên sản phẩm nào cũng trông na ná nhau.

Thay vì tốn thời gian viết prompt dài để chỉnh từng pixel, cách thực dụng nhất là dùng các tệp kỹ năng (.SKILL). Các tệp này định hình tư duy thẩm mỹ cho AI trước khi nó chạm vào mã nguồn. Dưới đây là các bộ skill miễn phí giúp bạn loại bỏ dấu vết AI và đưa tiêu chuẩn kỹ thuật thiết kế vào quy trình phát triển.

Vì sao giao diện do AI tạo luôn trông giống nhau?

Nếu bạn dựng 2-3 dự án bằng AI, bạn sẽ thấy những "vết tích" đặc trưng: font Inter phủ khắp nơi, các mảng gradient tím-xanh trang trí vô tội vạ, và các icon bo góc đặt trên đầu mục như một nghĩa vụ bắt buộc.

Nguyên nhân gốc rễ là các mô hình học từ cùng một kho template SaaS đại trà, nên chúng mặc định chọn phương án có xác suất xuất hiện cao nhất — tức là những thứ an toàn và nhàm chán nhất. Claude Code cần một bộ lọc để biết khi nào nên dừng việc trang trí vụn vặt và tập trung vào cấu trúc thông tin.

Skill emil-design-eng: gu thẩm mỹ cho chuyển động và tương tác

Skill này được đóng gói từ kinh nghiệm của Emil Kowalski (tác giả Sonner, Vaul). Thay vì các hiệu ứng thô cứng, emil-design-eng áp dụng các nguyên lý chuyển động dựa trên vật lý (springs) thay vì thời gian cố định.

Điểm đắt giá nhất là tư duy phản hồi: giao diện phải cho cảm giác "snappy" (nhạy) ngay cả khi người dùng nhấn chuột chậm và có tính toán. Skill này cũng áp dụng quy tắc thông minh cho tooltip: bỏ qua delay hoàn toàn cho cái thứ hai trong cùng một nhóm để tránh cảm giác trì trệ.

Cài đặt bằng lệnh CLI:

git clone https://github.com/emilkowalski/skills
cp -r skills/emil-design-eng ~/.claude/skills/

Ngoài ra, bộ skill này (phối hợp cùng Jakub Krehel và Jhey Tompkins) có chế độ "audit mode" hoặc "motion-review". Nó sẽ quét mã nguồn để loại bỏ các "rác giao diện AI" như dấu chấm trạng thái nhấp nháy vô nghĩa hoặc hiệu ứng hover-scale vô tội vạ trên mọi phần tử.

Skill Impeccable: hệ thống thị giác tổng thể và file PRODUCT.md

Paul Bakaus xây dựng skill Impeccable với 23 lệnh chuyên biệt để quản lý hệ thống thị giác. Điểm khác biệt là quá trình "phỏng vấn" AI thông qua file PRODUCT.md.

Trước khi viết code, skill này yêu cầu bạn xác định đối tượng khách hàng và giọng nói thương hiệu. AI sau đó sẽ hiểu các từ vựng thiết kế như "quieter" (tĩnh lặng), "distill" (tinh lọc) hay "critique" (phản biện). Một thử nghiệm thực tế cho thấy khi dùng lệnh audit, AI có thể chỉ ra các lỗi thiết kế mà con người từng bảo vệ, đạt điểm số 25/40 — một con số chứng minh AI có thể "bắt bài" sự thiếu nhất quán.

Quy trình sử dụng:

npx impeccable install
/impeccable init
/impeccable polish the pricing page

Taste Skill: biến tấu bố cục và typography theo brief

Taste Skill của Leon Lin hiện đã có phiên bản v2 (experimental). Thay vì một bộ quy tắc cố định, nó đọc brief để chọn hướng đi: từ phong cách editorial của Notion/Linear đến kiểu Swiss-typography tương phản mạnh.

Khi cài đặt bằng lệnh dưới đây, skill sẽ xuất hiện dưới tên design-taste-frontend:

npx skills add leonxlnx/taste-skill --agent claude-code

Bạn có thể điều chỉnh 3 "nút xoay" (dials) từ 1–10: DESIGN_VARIANCE (độ phá cách), MOTION_INTENSITY (mật độ chuyển động), và VISUAL_DENSITY (mật độ thông tin). Đặc biệt, skill này có quy tắc chống lười biếng (anti-laziness), ngăn Claude để lại các placeholder vô nghĩa trong code.

Skill frontend-design: bản chính chủ của Anthropic

Trong skill frontend-design, Anthropic định nghĩa UI là một "luận điểm" (thesis). Skill này ép AI phải chọn ra một "Signature element" (yếu tố nhận diện độc bản) thay vì trang trí dàn trải.

AI được huấn luyện để nhận diện và né tránh 3 "look" mặc định: (1) màu kem/serif kiểu tối giản, (2) đen/acid-green kiểu công nghệ, và (3) kiểu báo chí với hairline rules. Nó yêu cầu AI tự phản biện bản kế hoạch trước khi viết code. Quy tắc cốt lõi là triết lý của Chanel: "Trước khi rời nhà, hãy soi gương và tháo bớt một món phụ kiện" để giữ sự tinh giản tuyệt đối.

Skill ui-ux-pro-max: bộ máy design system theo ngành

Skill ui-ux-pro-max là công cụ mạnh nhất để xây dựng Design System bài bản với 161 quy tắc tư duy cho từng ngành dọc (Fintech, Healthcare, E-commerce...). Nó chứa cơ chế phản biện "Anti-Patterns": ví dụ, tuyệt đối không dùng gradient tím/hồng cho giao diện ngân hàng để giữ tính tin cậy.

Cơ chế "Master + Overrides" cho phép bạn thiết lập quy tắc chung trong file Master, nhưng vẫn có thể ghi đè (override) ở cấp độ từng trang cụ thể để đảm bảo tính linh hoạt mà không làm vỡ hệ thống.

Cài đặt thông qua gói NPM chính thức:

npm install -g ui-ux-pro-max-cli
uipro ds --industry saas --style bento

Nên phối hợp và bắt đầu từ skill nào?

Đừng cài tất cả cùng lúc. Lộ trình thực thi thực dụng nhất là:

1. Taste Skill (v2): dùng đầu tiên để dựng khung (scaffolding), chốt bố cục và font chữ theo brief.
2. Impeccable: dùng cho các thành phần đối ngoại để giữ vững "brand voice" thông qua file PRODUCT.md.
3. emil-design-eng: dùng cuối cùng để tinh chỉnh các trạng thái tương tác nhỏ (micro-interactions) và chuyển cảnh mượt mà.

Các skill này không thay thế tư duy của bạn, chúng chỉ là những "rào chắn kỹ thuật" ngăn AI chọn những bản năng mặc định rẻ tiền. Hãy thử cài một skill và chạy lệnh audit trên một project cũ, bạn sẽ thấy sự khác biệt ngay lập tức trong cách AI đánh giá mã nguồn giao diện.

Tài liệu tham khảo

• 3 Free Claude Code Skills That Fix 90% of That "AI-Generated" UI Look — Nitin Gavhane (Medium)
• emilkowalski/skills — Skills for Design Engineers
• pbakaus/impeccable — The design language that makes your AI harness better at design
• Leonxlnx/taste-skill — Gives your AI good taste, stops generic slop
• anthropics/skills — frontend-design SKILL.md
• nextlevelbuilder/ui-ux-pro-max-skill — Design intelligence for building professional UI/UX