evondevKit là bộ skill mã nguồn mở (giấy phép MIT) do evondev phát triển, giúp các AI Coding Agent như Claude Code, Cursor, Codex, OpenCode, Antigravity, ZCode làm việc và thiết kế giao diện như một UI/UX Designer thực thụ.

Thay vì những câu lệnh nhắc nhở chung chung kiểu "hãy làm giao diện cho đẹp", mỗi skill trong evondevKit được xây dựng thành một bộ quy tắc cụ thể, có mã số rõ ràng và đã được kiểm thử thực tế qua hơn 70 prompt trên các dự án thật (đặc biệt tối ưu tốt cho cả tiếng Việt lẫn tiếng Anh).

Liên kết chính thức

Triết lý cốt lõi: "Hứa ít, đo nhiều"

  • Quy tắc cụ thể, có mã số: Mọi tiêu chuẩn về bố cục, khoảng cách, màu sắc, trạng thái trống/lỗi đều được định nghĩa thành các điều luật riêng biệt sinh ra từ quá trình test thực tế.
  • Tôn trọng Codebase hiện có: Skill luôn đọc trước cấu trúc dự án của bạn. Nếu dự án đang dùng shadcn/ui, MUI, Tailwind CSS hay bộ component nội bộ, AI sẽ tái sử dụng đúng token và component đó chứ không tự ý cài đè thư viện lạ.
  • Quy trình làm việc chuẩn Designer: Mặc định khi dựng màn hình mới, AI không lao vào viết code ngay mà đi theo luồng: Lập Brief ➔ Bạn duyệt ➔ Tạo 2–3 bản Wireframe tương tác để chọn ➔ Tiến hành code hoàn chỉnh.

Skill nổi bật: /evon:ui-ux

Hiện tại, tâm điểm của bộ công cụ là skill /evon:ui-ux, chuyên trị các bài toán giao diện Web App (Dashboard, bảng biểu, form, cài đặt, modal) và Mobile App prototype:

  • Dựng mới có Wireframe trực quan: Xuất ra 2–3 phương án wireframe có thanh công cụ cho phép bạn đổi màu nhấn (accent color), xem thử giao diện mobile, kiểm tra trạng thái trống/lỗi và phản hồi theo từng số thứ tự block trước khi chốt code.
  • Soi lỗi & Đo đạc giao diện tự động: Cung cấp đường dẫn localhost đang chạy, AI sẽ tự mở trang, đo đạc thực tế trên dải kích thước từ 375px đến 1920px, chụp ảnh so sánh trước/sau và xuất bảng báo cáo các điểm bất hợp lý.
  • Đa dạng chế độ làm việc theo Prompt:
    • Thiết kế Design System trước: Tạo sẵn bộ token và 7 component nền tảng trên trang /design-system để đồng bộ cho toàn bộ các màn hình sau.
    • Làm gọn UI nhưng giữ nguyên Brand: Tinh chỉnh lại khoảng cách, thay đổi control hợp lý hơn mà vẫn giữ đúng màu sắc thương hiệu gốc.
    • Dọn code giữ nguyên giao diện: Refactor CSS cũ sang Tailwind CSS và tự đối chiếu ảnh chụp màn hình để đảm bảo giao diện không hề xê dịch.
    • Đánh giá luồng Onboarding: Đi từng bước trên ứng dụng để chỉ ra những điểm khiến người dùng mới dễ bị lạc hoặc bối rối.

Hướng dẫn cài đặt nhanh

1. Dành cho Claude Code

Chạy lần lượt 2 lệnh sau trong giao diện Claude Code:

/plugin marketplace add evondev/evondevKit
/plugin install evon@evondevkit

Sau khi cài đặt, gọi skill bất cứ lúc nào bằng cú pháp /evon:ui-ux kèm yêu cầu của bạn.

2. Dành cho Cursor, Antigravity, Codex, OpenCode, ZCode

Chạy lệnh sau tại thư mục gốc của dự án (có thể thay npx bằng bunx hoặc thêm cờ -g để dùng chung cho mọi dự án):

npx skills add evondev/evondevKit
  • Với Cursor / Antigravity: Gọi bằng /ui-ux <yêu cầu>
  • Với Codex / ZCode: Gọi bằng $ui-ux <yêu cầu>

Các sản phẩm khác từ tác giả evondev

Bên cạnh evondevKit, tác giả Trần Anh Tuấn (evondev) còn phát triển nhiều công cụ phục vụ lập trình viên và học tập thực tế:

  • Hệ sinh thái AI & Ứng dụng web:
    • Teach Template: Bộ template miễn phí biến AI Coding Agent thành gia sư hướng dẫn học lập trình từng bước một.
    • SpeakNow: Ứng dụng luyện nói tiếng Anh thông qua phương pháp shadowing và hội thoại trực tiếp cùng AI.
    • Personal Tracker: Tiện ích trình duyệt (Extension) miễn phí giúp quản lý công việc và thói quen cá nhân ngay khi mở tab mới.
  • Bộ Theme & Extension VS Code (hơn 417.000 lượt cài đặt):
    • Evondev Dracula: Giao diện tối (Dark theme) tinh chỉnh độ tương phản cao giúp giảm mỏi mắt khi lập trình lâu (163K+ lượt cài).
    • Indent Rainbow Palettes: Tô màu các cấp thụt lề theo bảng màu cầu vồng giúp dễ quan sát cấu trúc code lồng nhau (147K+ lượt cài).
    • Evondev Snippets & HTML to CSS Class: Bộ công cụ tăng tốc cắt giao diện HTML/CSS/Sass (hơn 105K+ lượt cài).

Xem đầy đủ các dự án khác tại trang chủ: https://evon.dev