evondevKitui-uxBeta
Mới: làm việc như một designer

UI dashboard không còn mùi AI

evon:ui-ux đọc codebase của bạn, đưa brief và 2–3 wireframe để bạn chọn. Chọn xong mới dựng, bằng chính component của dự án, rồi tự kiểm tra bằng script.

Cài skillXem màn đã dựng
/evon:ui-ux Dựng màn danh sách đơn hàng: mã đơn, khách, tổng tiền, trạng thái.

Dùng được với

  • Claude Code
  • Cursor
  • Codex
  • OpenCode
  • Antigravity
  • ZCode
  • npx
  • bunx

Đã qua 70 prompt test từ một cái nút tới cả trang hoàn chỉnh

component đạt
30
component dựng không cần mẫu
8
khối ghép
10
trang hoàn chỉnh
22

Đếm từ danh sách test của skill, ngày 29/09/2026.

0109Tính năng

Skill làm được gì

Một skill, ba kiểu việc

Không cần nhớ lệnh. Skill đọc prompt rồi tự biết nên làm theo cách nào. Mặc định nó làm như designer, muốn khác thì bạn nói thẳng trong prompt.

01

Dựng màn mới

Mặc định skill đi đủ các bước như designer. Muốn tiết kiệm token thì bảo nó bỏ wireframe. Làm nhiều màn thì chốt design system trước. Việc nhỏ hơn một màn thì nó làm luôn.

  • Mới

    Làm như một designer

    Cách mặc định mỗi khi bạn nhờ dựng hoặc làm lại một màn. Skill viết brief, xác định màn này để làm gì, rồi đưa 2–3 wireframe có nội dung thật. Bạn chọn xong nó mới dựng.

    Prompt mẫu

    /evon:ui-ux Dựng màn danh sách đơn hàng: mã đơn, khách, tổng tiền, trạng thái.
  • Mới

    Dựng luôn, bỏ wireframe

    Tiết kiệm token. Skill tự chọn phương án nó thấy hợp nhất rồi dựng thẳng. Lúc giao, nó nói rõ đã chọn bố cục nào và vì sao.

    Prompt mẫu

    /evon:ui-ux Dựng luôn màn cài đặt thông báo.
  • Mới

    Dựng design system trước

    Chốt màu, chữ, khoảng cách và bảy component nền trên một trang. Duyệt một lần, các màn sau đều ráp từ bộ đó. Đã có shadcn hay bộ riêng thì skill chỉnh luôn bộ đó.

    Prompt mẫu

    /evon:ui-ux Dựng design system cho app quản lý phòng khám trước, chưa cần màn nào.

  • Việc nhỏ hơn một màn

    Sửa một component, thêm một dropdown, fix một lỗi, đổi một màu. Skill vẫn đọc codebase trước, rồi làm luôn, không cần wireframe.

    Prompt mẫu

    /evon:ui-ux Thêm dropdown lọc theo trạng thái vào bảng đơn hàng.
02

Làm lại UI đang có

Cả bốn cách đều bắt đầu bằng việc đo trang của bạn. Khác nhau ở chỗ skill được phép đổi tới đâu.

  • Soi lỗi UI đang có

    Đưa link localhost, skill tự mở trang, đo từ 375 tới 1920px, rồi gửi bảng lỗi kèm ảnh trước / sau. Bạn trả lời “sửa 1, 3” thì nó mới sửa.

    Prompt mẫu

    /evon:ui-ux Xem giúp trang này chỗ nào chưa ổn: http://localhost:3000/orders

  • Dựng lại, giữ brand

    Giữ nguyên khung trang và màu của bạn. Skill thay các control tự chế bằng component chuẩn và làm gọn từng card. Bạn trả lời “ok” hoặc “bỏ 7”.

    Prompt mẫu

    /evon:ui-ux Dựng lại trang này giữ brand.

  • Làm lại theo gu skill

    Giống dựng lại giữ brand, nhưng đổi luôn cả màu sang bộ token của skill. Chỉ giữ logo và màu nhấn chính của bạn.

    Prompt mẫu

    /evon:ui-ux Dựng lại hoàn toàn theo gu skill, bỏ style cũ.
  • Mới

    Thêm dark mode cho app đang có

    Nút Sáng / Tối / Theo hệ thống, nhớ lựa chọn, tải trang không nháy trắng. Skill đổi màu qua token rồi soi lại bảng, form, lớp nổi, biểu đồ trên nền tối. Đã test trên một dự án thật, 7/7 mục.

    Prompt mẫu

    /evon:ui-ux Thêm dark mode cho app, có nút đổi sáng / tối trên header, mặc định theo hệ điều hành.
03

Dọn code

Chỉ đổi code bên dưới. Giao diện phải y như cũ.

  • Beta

    Dọn code, giao diện không đổi

    Đổi class, xoá CSS thừa, chụp ảnh trước và sau để chắc giao diện không lệch một pixel nào. Phần này mới viết, chưa qua test.

    Prompt mẫu

    /evon:ui-ux Refactor CSS trang /settings sang Tailwind, giữ nguyên giao diện.

0209Quy trình

Chế độ designer

Brief, wireframe, rồi mới dựng

Màn xấu thường không phải do màu mà do cấu trúc: card nhồi quá nhiều thứ, bộ lọc nằm xa bảng, hai nút tranh nhau. Designer bắt những lỗi này ngay từ wireframe, lúc sửa còn chưa tốn gì.

  1. U1

    Brief

    Đọc repo, README và route trước. Chỉ hỏi những gì không tự tìm ra được.

  2. U2

    Màn này để làm gì

    Người dùng vào đây để làm gì, họ so sánh dựa trên cái gì, và bấm gì ở cuối.

    Dừng lần 1: bạn sửa brief hoặc trả lời “ok”

  3. U3

    2–3 wireframe

    Các phương án khác nhau thật ở cách bố cục, không phải chỉ đổi màu. Nội dung thật, khối nào cũng đánh số để bạn góp ý cho dễ.

    Dừng lần 2: bạn chọn, ví dụ “C + D”

  4. U4

    Dựng thật

    Code theo phương án bạn chọn, bằng component có sẵn của dự án. Chạy script kiểm tra rồi sửa, tối đa ba vòng. Lỗi nào còn lại, lúc giao sẽ ghi rõ lý do.

Phương ánABCMàuDesktopMobileTrạng thái: Có dữ liệu

Vì sao chọn A

Khuyên dùng
Ưu
Tìm đơn trễ nhanh vì ô tìm kiếm và bộ lọc nằm ngay trên bảng.
Nhược
Ít chỗ cho biểu đồ tổng quan.
Hợp khi
Người dùng vào để xử lý đơn, không phải để xem số tổng.

Ngay trên wireframe, bạn đổi qua lại các phương án, bật màu, thử màu nhấn, xem bản mobile, xem lúc trống dữ liệu và lúc lỗi, đọc ưu nhược, rồi chép góp ý theo số từng khối.

0309Trước / sau

Một màn thật

Từ màn cũ tới wireframe, rồi tới bản hoàn chỉnh

Màn Phòng trọ của 68Lane qua ba bước: màn gốc, wireframe skill đưa ra để chọn, và màn dựng từ đúng wireframe đó. Kéo thanh ở giữa để so.

68Lane · Phòng trọ
Màn Phòng trọ sau khi skill dựng xong
Màn Phòng trọ của 68Lane trước khi làm lại
TrướcSau

Kéo ngang trong khung, hoặc bấm vào tay nắm rồi dùng phím ← →.

0409Soi và đo

Script kiểm tra

Đo bằng script, không nhìn bằng mắt

Script mở trang thật, rê chuột, bấm Tab, mở từng menu, đo độ tương phản và thử từng độ rộng màn hình. Lỗi nào nó báo cũng phải lên bảng, hoặc phải ghi lý do bỏ qua.

Skill liệt kê lỗi, bạn chọn sửa gì. Nó được soi thoải mái, nhưng chỉ sửa khi bạn đồng ý. Lỗi chấm theo chuẩn của dự án bạn, không theo gu của skill.

#LỗiĐề xuất
1

Chữ phụ chỉ đạt 3,2:1 trên nền card

Hỏng

Đổi sang màu phụ đạt 4,6:1
2

Menu bị rớt dòng ở 860–1000px

Hỏng

Gom mục phụ vào một menu
3

Cùng loại card mà ba kiểu bo góc

Lệch chuẩn

Dùng một bo góc theo dự án
4

Hai nút nền đặc tranh nhau

Gu

Giữ một nút chính, nút kia để viền

Bạn trả lời: sửa 1, 2

Hỏng
Sai đo được: thiếu tương phản, tràn, rớt dòng, bấm không được.
Lệch chuẩn
Khác với quy ước của chính dự án bạn.
Gu
Gợi ý theo gu của skill, mặc định không chọn.

Đo ở sáu độ rộng. 375, 768, 1024, 1280, 1440 và 1920px. Thêm --sweep để quét liền từ 1440 xuống 375 và chỉ ra đoạn nào bị vỡ.

Kiểm tra1920144012801024768375
Tương phản chữ ≥ 4,5:1
Không cuộn ngang
Menu không rớt dòng
Dropdown, modal không tràn màn
Hover có thấy rõ

Báo cáo mẫu. Script còn kiểm tra mục đang chọn, viền focus và trạng thái ngay sau khi bấm.

0509Showcase

Màn đã dựng

Gõ một câu, ra màn này

Mỗi ô là prompt gốc và màn hình skill dựng từ đúng prompt đó, chụp nguyên bản chưa chỉnh. Dựng xong bạn vẫn tuỳ chỉnh thêm theo ý mình.

Bộ nút

Prompt “Dựng cho tôi bộ nút: nút chính, nút viền, nút chỉ icon, nút xoá, đủ trạng thái hover, focus, đang tải, bị khoá.”

Badge trạng thái

Prompt “Dựng cho tôi badge trạng thái cho đơn hàng: chờ xử lý, đang giao, đã giao, đã huỷ.”

Ô chọn ngày

Prompt “Dựng cho tôi ô chọn ngày, và ô chọn khoảng ngày có sẵn các mốc 7 ngày, 30 ngày, tháng này.”

Biểu đồ

Prompt “Dựng cho tôi bộ biểu đồ: đường doanh thu theo tháng, cột so sánh theo nhóm, donut tỉ lệ, và sparkline nhỏ trong card số liệu.”

Modal có form

Prompt “Dựng cho tôi modal mời thành viên, có form bên trong và nút huỷ, gửi.”

Dòng thời gian

Prompt “Dựng cho tôi dòng thời gian hoạt động của một đơn hàng: tạo đơn, xác nhận, đóng gói, giao hàng, có một bước giao thất bại.”

Cây thư mục

Prompt “Dựng cho tôi cây thư mục tài liệu, mở đóng được từng nhánh, có thư mục rỗng và tên file rất dài.”

Bình luận lồng nhau

Prompt “Dựng cho tôi khu bình luận có trả lời lồng nhau, có bình luận đã xoá và bình luận đang gửi.”

Ô nhập nhiều tag

Prompt “Dựng cho tôi ô nhập email người nhận, gõ xong Enter thành một tag, có email sai định dạng.”

0609Gu

Gu của skill

Không dặn “làm cho đẹp”, chỉ có luật cụ thể

Mỗi luật nằm ở đúng một file, nhiều luật ra đời từ lỗi gặp lúc test. Đây là bốn luật bạn nhìn thấy ngay trên màn hình.

  • P6 · M12

    Mặc định là flat

    Nền xám nhạt, card trắng. Không gradient, không hiệu ứng kính cho đẹp.

  • M3 · I1 · I3

    Chỉ một nút chính

    Nút mặc định chỉ có viền. Mỗi khu vực chỉ một nút tô màu nhấn, nên nút cần nổi thì nổi thật.

  • M13 · M15

    Viền thay cho shadow

    Card trong trang cách nhau bằng viền 1px. Shadow chỉ dùng cho thứ nổi lên trên trang như modal, dropdown.

  • R1 · T15

    Không vỡ ở 375px

    Nhãn dài thì tự xuống dòng, trang không bao giờ bị cuộn ngang.

Muốn phong cách khác, nói một câu trong prompt

Flat được chăm kỹ nhất. Kiểu khác vẫn giữ đúng tương phản và thứ bậc nhưng chưa tinh bằng. Dự án đã có phong cách riêng thì skill theo dự án, và báo lại lúc giao.

Mặc định
  • Flat viền mảnh
Theo dự án hoặc khi bạn nói
  • Shadow
  • Nền tối
  • Có màu
Làm được, ít hợp dashboard
  • Glassmorphism
  • Gradient

0709Cài đặt

Cài đặt

Cài xong trong một phút

Chọn công cụ bạn đang dùng. Toàn bộ test của skill đều chạy trên Claude Code.

Claude Code
  1. 01

    Thêm marketplace rồi cài plugin evon.

    • /plugin marketplace add evondev/evondevKit
    • /plugin install evon@evondevkit
  2. 02

    Gọi skill bằng lệnh này, hoặc cứ gõ prompt bình thường: prompt nói về giao diện app là skill tự bật.

    • /evon:ui-ux
  3. 03

    Cập nhật khi skill có bản mới.

    • /plugin marketplace update evondevkit

0809Sắp có

Lộ trình

Mình đang làm, sắp có

Những thứ mình chưa dám hứa. Chưa test xong thì trang này chưa ghi là có.

  • Sắp có

    Landing page

    Hero, tính năng, bảng giá, FAQ. Chọn section theo việc khách cần làm: dùng thử, mua luôn, đặt lịch demo hay vào danh sách chờ.

    Chưa dạy, nhờ thì vẫn làm

  • Sắp có

    E-commerce

    Danh sách sản phẩm, trang chi tiết, giỏ hàng, thanh toán.

    Chưa dạy, nhờ thì vẫn làm

  • Sắp có

    Blog

    Trang danh sách bài và trang đọc bài: cỡ chữ, độ rộng dòng, mục lục, khối code.

    Chưa dạy, nhờ thì vẫn làm

  • Sắp có

    Nhiều kiểu cho component

    Ví dụ ô nhập lúc focus: giờ skill dùng viền ring. Mình đang thử thêm kiểu chỉ gạch chân, không ring, và vài kiểu khác, để bạn chọn kiểu hợp app.

    Đang nghiên cứu

0909Hỏi đáp

Hỏi đáp

Câu hỏi hay gặp

Skill dùng thật được chưa?

Được, đang ở bản beta. Giao diện app nền sáng đã qua 70 prompt test trên dự án thật. Dark mode cho app đang có đã test trên một dự án. Cursor, Codex, OpenCode, Antigravity và ZCode mình chưa tự test, bạn dùng thấy lỗi cứ báo. Gặp chỗ nào chưa ổn thì mở issue trên GitHub, kèm link hoặc ảnh màn đó. Cập nhật bản mới bằng lệnh /plugin marketplace update evondevkit (Claude Code) hoặc npx skills update (công cụ khác).

Dựng xong mà chưa ưng thì sao?

Skill không hoàn hảo, nó chỉ làm tốt nhất có thể trong bộ luật của nó. Gu mỗi người mỗi khác, dự án nào cũng có cái riêng. Dựng xong bạn sửa tay hay nhờ AI sửa đều được, cứ nói như đang góp ý cho designer: “tiêu đề đậm hơn”, “thoáng hơn chút”, “bỏ khối 3”.

Có tốn phí không?

Không. Skill mở mã nguồn theo giấy phép MIT.

Skill có hỏi nhiều không?

Chế độ designer chỉ dừng hai lần: duyệt brief và chọn wireframe. Ngoài hai lần đó, skill tự chọn theo mặc định rồi báo lại lúc giao. Muốn bỏ luôn bước wireframe thì gõ “dựng luôn”. Dựng design system trước thì chỉ dừng một lần, để bạn duyệt trang design system.

Prompt cần viết dài cỡ nào?

Một câu là đủ để bắt đầu, các prompt trên trang này đều ngắn như vậy. Skill đọc codebase và đưa brief để bạn chỉnh trước khi dựng. Muốn ra sát ý hơn thì kể thêm: ai dùng màn này, họ làm việc gì chính ở đó, dữ liệu thật trông ra sao (vài dòng mẫu, cột nào quan trọng). Mấy chữ như “đẹp”, “hiện đại” thì không cần, skill đã lo phần đó.

Dự án đã có design system thì sao?

Skill dùng component của bạn. Dự án dùng shadcn, Radix, MUI, Ant hay bộ tự làm thì nó dùng đúng bộ đó, chỉ chỉnh token cho khớp. Màu brand giữ nguyên, trừ khi bạn nói “bỏ style cũ”.

Có bắt buộc dùng Tailwind không?

Không. Dự án dùng CSS Module, SCSS hay styled-components thì skill theo cách đó. Với HTML thuần, WordPress hay PHP, skill chuyển mẫu sang HTML và class rồi mới đưa.

Có làm dark mode không?

Có, đang ở bản beta. Thêm dark mode cho app đang có đã test trên một dự án thật, đủ 7 mục (nút đổi theme, bảng, khung app, lớp nổi, form, biểu đồ, màn đăng nhập). Mặc định skill vẫn dựng nền sáng, bạn nhờ thì nó mới làm dark mode. Gu tối mỗi người một khác, dựng xong muốn chỉnh thì cứ nhắn.

Skill có làm landing page không?

Nhờ thì vẫn làm, nhưng chưa được dạy. Skill được dạy kỹ cho màn hình bên trong app: dashboard, danh sách, bảng, form, cài đặt, modal, và các trang người dùng lướt để chọn, kể cả bảng giá. Landing page, e-commerce, blog thì skill báo trước một dòng rồi mới làm. Mình đang làm phần này, bạn xem ở mục Sắp có.

Chữ trên giao diện sẽ là tiếng gì?

Theo ngôn ngữ của dự án. Có i18n thì theo i18n, có sẵn nhãn thì theo nhãn đó, dự án trống thì theo ngôn ngữ bạn gõ prompt.

Bắt đầu

Dựng màn đầu tiên nhé?

Cài vào Claude Code, Cursor, Codex, OpenCode, Antigravity hoặc ZCode, rồi viết prompt như đang nói chuyện với designer. Miễn phí, mã nguồn mở MIT.

Cài skillXem trên GitHub
  • /plugin marketplace add evondev/evondevKit
  • /plugin install evon@evondevkit