Tóm tắt nhanh:
ak-ui-ux-pro-maxtra một kho dữ liệu thiết kế có sẵn (hơn 50 phong cách, 161 bảng màu, 99 quy tắc UX, 25 loại biểu đồ) bằng một script, rồi dùng kết quả để dựng giao diện hoặc rà giao diện có sẵn. Việc nhỏ như một component thì nó tra thẳng đúng mảng, không tạo design system mới. Nó không dành cho việc backend, API hay hạ tầng.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn sắp làm hoặc sửa một thứ người dùng nhìn thấy và bấm vào: trang mới chưa có hướng phong cách, component mới, màn hình app mobile, hoặc review UX và accessibility của trang có sẵn. Không cần khi việc không đổi gì trên giao diện, như API, database, hạ tầng hay script không có giao diện.
flowchart LR
A["Yêu cầu về giao diện"] --> B["ak-ui-ux-pro-max"]
B --> C["Design system hoặc kết quả tra cứu"]
C --> D["Dựng giao diện, rà checklist trước khi giao"]
B --> E["Danh sách lỗi review kèm cách sửa"]
A2["Việc backend, API, hạ tầng"] --> F["Không cần skill này"]Bốn khái niệm cần nắm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Design system | Sản phẩm này hợp phong cách, màu, font nào, và nên tránh gì? | Tra "fintech crypto" ra một bộ gồm kiểu bố cục, phong cách, bảng màu, cặp font, hiệu ứng và các anti-pattern cần tránh. |
| Tra cứu theo domain | Chỉ cần đúng một mảng, ví dụ màu, font, biểu đồ hay quy tắc UX? | Thêm biểu đồ cho dashboard thì tra domain chart, không cần tạo lại cả design system. |
| MASTER và file ghi đè từng trang | Trang đang làm theo luật chung hay luật riêng? | Trang checkout có file ghi đè riêng thì luật trong file đó thắng. Trang không có file riêng thì chỉ dùng MASTER.md. |
| 10 nhóm quy tắc theo ưu tiên | Rà giao diện thì soát nhóm nào trước? | Accessibility (tương phản 4.5:1, nhãn cho nút chỉ có icon) và Touch (vùng chạm tối thiểu 44×44) nặng nhất, nên soát trước. Biểu đồ đứng cuối. |
Prompt mẫu cho một trang mới:
/ak-ui-ux-pro-max page Làm landing page cho <tên sản phẩm>, app quản lý chi tiêu cho người trẻ.
Giọng: hiện đại, đáng tin. Dùng stack đang có trong project.
Cần: hero, bằng chứng xã hội (đánh giá, số người dùng), bảng giá.| Cờ | Để làm gì | Từ ak |
|---|---|---|
--style | Truyền tên một phong cách, dạng --style <style> | 2.15.0 |
--framework | Truyền tên framework, dạng --framework <fw> | 2.15.0 |
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, giải thích từng cờ, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-ui-ux-pro-max: chọn phong cách, màu, font và rà UX giao diện" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-ui-ux-pro-max". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-ui-ux-pro-max
