Nếu bạn từng thấy coding agent của mình tự ý đổi spacing từ 36px sang 38px rồi nhảy lên 40px giữa các phiên làm việc, thì interface-design skill chính là thứ bạn cần. Đây là một skill mã nguồn mở trên GitHub giúp Claude Code, Codex và các coding agent khác ghi nhớ quyết định thiết kế (spacing, depth, màu sắc) và áp dụng nhất quán xuyên suốt dự án – đặc biệt hữu ích cho dashboard, app nội bộ và admin panel.

Thank you for reading this post, don't forget to subscribe!

Những điểm chính

• Interface-design skill lưu quyết định thiết kế vào file .interface-design/system.md để coding agent dùng lại giữa các phiên.
• Hỗ trợ cả Claude Code và Codex thông qua CLI npx skills add – cài trong một dòng lệnh.
• Bao gồm các lệnh slash: /interface-design, design-review và design-deslop để kiểm tra chất lượng UI.
• Cung cấp sẵn nhiều design direction mẫu (Precision & Density, Warmth, Boldness…) phù hợp từng loại dự án.
• Không dành cho marketing site – chỉ tập trung vào giao diện ứng dụng và công cụ.

Interface-Design skill là gì và giải quyết vấn đề gì?

Interface-design là một skill (kỹ năng) được cài vào coding agent như Claude Code hay Codex. Nó giải quyết vấn đề kinh điển: khi bạn bảo agent xây UI, các quyết định về spacing, depth, surface elevation cứ bị “trôi” dần sau mỗi lần chat. Hôm nay button cao 36px, mai 38px, card padding lúc 16px lúc 21px. Không có hệ thống nào giữ chúng lại. Interface-design can thiệp bằng cách: nó đọc file system.md (nếu có), áp dụng pattern đã lưu, và khi bạn xây cái mới nó hỏi “anh muốn lưu lại không?”. Kết quả là UI của bạn giống nhau từ session đầu tới session cuối.

Bạn có thể xem chi tiết tại repository gốc trên GitHub.

Những tính năng nổi bật của interface-design skill

Ngoài chức năng ghi nhớ chính, skill này còn có vài điểm đáng chú ý. Đầu tiên là Craft: nó không chỉ áp dụng token mà còn hiểu về visual hierarchy – giúp UI ra hồn chứ không chỉ đúng số. Thứ hai là Visual Direction: nếu agent có tool sinh ảnh, nó có thể tạo direction board, UI reference, thậm chí paintover để bạn hình dung trước hướng đi. Thứ ba là hai lệnh design-review (đánh giá sâu về focal point, typography, motion) và design-deslop (quét nhanh để xoá các dấu hiệu của UI sinh tự động như token mặc định, palette nhút nhát, card giống nhau). Đây là điểm cộng lớn cho team muốn kiểm soát chất lượng visual.

Hướng dẫn cài đặt và sử dụng interface-design

Cài đặt cực kỳ đơn giản nếu bạn đã có Node.js. Dùng CLI skills.sh, chỉ một dòng lệnh. Dưới đây là các bước chi tiết:

1. Mở terminal và chạy: npx skills add https://github.com/Dammyjay93/interface-design --skill interface-design --agent claude-code -g
2. Nếu muốn cài cho Codex, thay --agent claude-code bằng --agent codex.
3. Khởi động lại coding agent của bạn.
4. Gõ /interface-design trong Claude Code hoặc Codex để bắt đầu sử dụng. Khi xây dashboard, agent sẽ tự động load file .interface-design/system.md nếu có.
5. Để lưu quyết định, sau khi xây xong UI, agent sẽ hỏi “Want me to save these patterns?” – gõ y và hệ thống ghi nhớ cho lần sau.

Nếu bạn không dùng npm, có thể clone repo và copy thủ công vào thư mục skill của agent (xem README gốc).

Ai nên dùng – ai không nên dùng?

Interface-design sinh ra cho các lập trình viên build dashboard, app nội bộ, admin panel, tool phân tích – nơi UI cần độ chính xác và nhất quán cao. Nếu bạn làm marketing site, landing page hay blog, skill này không phù hợp vì tác giả đã nói rõ: “Not for marketing sites”. Cũng lưu ý rằng skill này chỉ có ích khi bạn dùng coding agent (Claude Code, Codex). Lập trình viên code bằng tay hoàn toàn có thể dùng design system khác như Figma tokens, nhưng nếu bạn muốn agent tự động giữ đúng design pattern thì đây là lựa chọn đáng thử. Một hạn chế nữa: skill cần file system.md để hoạt động tốt nhất, nếu mới bắt đầu bạn phải dành 10-15 phút để thiết lập direction ban đầu.

Câu hỏi thường gặp

Interface-design skill có miễn phí không?

Có, repo được cấp phép MIT, bạn có thể dùng miễn phí và sửa đổi tuỳ ý. Chỉ cần cài đặt qua CLI hoặc clone về.

Làm sao để đảo ngược nếu agent lưu sai pattern?

Đơn giản: xoá file .interface-design/system.md trong project, sau đó chạy lại lệnh /interface-design và thiết lập lại từ đầu.

Skill này có hoạt động với Cursor hay WindSurf không?

Hiện tại README chỉ hỗ trợ Claude Code và Codex chính thức. Tuy nhiên nếu agent khác hỗ trợ skills.sh, bạn có thể thử cài với --agent '*'.

Tôi chưa dùng coding agent bao giờ, có nên bắt đầu với interface-design không?

Nên bắt đầu bằng cách dùng Claude Code hoặc Codex trước, làm quen với agent. Sau đó mới cài skill này để quản lý design – nếu không bạn sẽ thấy nó hơi “ngợp”.

Interface-design khác gì với một thư viện component như shadcn/ui?

Shadcn/ui cung cấp component có sẵn, interface-design là skill giúp coding agent áp dụng design token nhất quán khi tự sinh UI. Hai thứ bổ sung chứ không thay thế nhau.

Kết luận

Interface-design không phải là công cụ thần thánh, nhưng nó giải quyết một vấn đề thực tế mà ai dùng AI coding agent lâu dài đều gặp: sự trôi dạt thiết kế. Nếu bạn xây dựng ứng dụng nội bộ hoặc dashboard, hãy dành 5 phút cài thử – tôi tin bạn sẽ thấy sự khác biệt ngay trong phiên làm việc thứ hai. Truy cập repository interface-design trên GitHub để bắt đầu.