Tools
lookup_token
Tra cứu design token theo đường dẫn (VD: "colors.primary.light", "colors.accent.light"). Màu thương hiệu primary/accent kèm giá trị theo từng profile độ đọc rõ.
find_images_for_section
Lấy ảnh có sẵn từ kho 1.160 ảnh CC0 cho một khu vực của trang: hero, feature, gallery, background, avatar. KHÔNG sinh ảnh mới bằng AI. Trả URL tải được ngay kèm kích thước thật và chuỗi ghi công.
validate_token
Kiểm tra giá trị token hợp lệ — color, dimension, duration, fontWeight, number
suggest_token
Từ hex color hoặc dimension → tìm design token gần nhất kèm WCAG ratio
search_tokens
Tìm kiếm fuzzy trong toàn bộ design tokens, lọc theo loại
generate_color_vars
Sinh tất cả CSS vars --viui-color-* từ design tokens, hỗ trợ css/scss/ts/json với light/dark tự động; kèm khối vai trò màu thương hiệu nếu chọn profile độ đọc rõ
get_component_api
Xem API đầy đủ của Vi* component — props, slots, emits, defaults. Tool được dùng nhiều nhất.
get_component_usage
Xem ví dụ sử dụng Storybook cho bất kỳ Vi* component nào
scaffold_component
Tạo template Vue 3 SFC + Storybook story cho component mới
review_design_tokens
Quét file CSS/SCSS/JSX/TSX để phát hiện giá trị cứng nên thay bằng design token. Từ xa: gửi `sources`; chạy local qua stdio: dùng `project_root`
search_blocks
Tìm UI blocks theo keyword hoặc category
get_block
Lấy source code đầy đủ của một UI block theo slug, kèm profile độ đọc rõ (đánh đổi, cách khối dùng màu thương hiệu)
list_blocks
Liệt kê tất cả block có sẵn, có thể lọc theo danh mục
list_themes
Liệt kê tất cả themes có sẵn
compare_themes
So sánh CSS variables giữa 2 themes
get_landing_page_defaults
Lấy nội dung mẫu đầy đủ của một mẫu trang giới thiệu, để sửa từng phần
list_capabilities
Liệt kê tất cả tools và prompts có sẵn trong iNET UI MCP server
list_icons
Tìm kiếm icon trong bộ viui-icons (nguồn DUY NHẤT: outline + duotone). Không còn tabler/mdi.
list_docs
Liệt kê hoặc đọc tài liệu hệ thống
get_accessibility_guide
Hướng dẫn WCAG 2.1 AA: overview, checklist, design-rationale, ui-kit
get_ux_guide
Hướng dẫn UX chung: microcopy, forms, error-messages, dark-patterns — viết chữ và luồng cho landing/form; page-review — bộ chẩn đoán review trang (8 nhóm, 25 vấn đề: cân bằng, thứ bậc, căn lề, nhất quán, chữ, màu, tương tác, responsive)
review_ux_copy
Kiểm chữ UX trên mã HTML/Vue/React: nút mơ hồ, ô chỉ có placeholder, submit bị disabled, ô tick sẵn, nút từ chối gây xấu hổ, câu lỗi chung chung, giá thiếu chu kỳ
get_brand_rules
Lấy quy tắc Brand DNA iNET theo nhóm: color, motion, iconography, dataViz, illustration, hoặc all
list_brand_assets
Liệt kê ảnh thương hiệu iNET (mascot, logo, icon...) KÈM SẴN url dán được vào mascot_url / logo_url khi tạo landing — không phải tự ghép đường dẫn từ manifest.
validate_brand_usage
Quét CSS/SCSS/Vue code để phát hiện vi phạm Brand DNA: semantic color sai context, hardcoded motion, icon contrast thấp, dùng sai vai trò màu thương hiệu (chấm theo sàn của profile độ đọc rõ). Không kiểm khoảng cách THIẾU giữa phần tử liền kề: passed=true chưa bảo đảm bố cục đủ khoảng cách
list_dna_buttons
Liệt kê 14 DNA button concepts — Group A (iNET Brand #024799+#cc0e0e) và Group B (One Series #49c98d+#f7ad30) kèm SVG thumbnail preview
list_dna_notices
HTML mẫu + CSS cho alert, notify (toast), card, badge theo DNA iNET — hai series: iNET Brand (#024799+#cc0e0e) và One Series (#49c98d+#f7ad30)
list_dna_toc
Mục lục dạng cây ("Trên trang này") theo DNA iNET: HTML mẫu + mã gắn cho HTML thuần / Vue / React + CSS và JS gốc — mặc định cây có icon trong cột phải dính (như /admin/analytics), ≤ 768px tự thành rail gạch mép phải
list_dna_empty
HTML mẫu + CSS cho trạng thái trống của bảng, lưới thẻ, danh sách theo DNA iNET: chưa có dữ liệu, tìm không ra, bộ lọc loại hết, không tải được — mỗi lý do một biểu tượng, lời và hành động riêng; hai series iNET Brand / One Series
pick_color_for_role
Chọn token màu CÓ SẴN cho một vai trò (chữ, chữ phụ, link, icon, viền ô nhập, chữ trạng thái, nhãn series One, tím biểu đồ) trên một nền và theme — kèm biến CSS (nếu gói có phát), giá trị và tương phản đo trên đúng nền
list_footer_layouts
Hai mẫu footer để người dùng chọn: theo bộ thiết kế chung, hoặc theo trang giới thiệu iNET
list_landing_templates
Liệt kê các mẫu trang giới thiệu có sẵn để chọn
list_landing_headers
Liệt kê nội dung phần đầu trang do Marketing cấu hình
list_landing_footers
Liệt kê nội dung phần chân trang do Marketing cấu hình
rate_response
Chấm điểm hài lòng/không hài lòng cho một tool vừa sử dụng
dismiss_whats_new
Ẩn footer thông báo "Mới" trên tài khoản trong 24 giờ — áp cho mọi cuộc trò chuyện của người dùng
submit_feedback
Gửi góp ý / báo lỗi / đề xuất tính năng dạng văn bản tự do tới team iNET UI
submit_interview
Ghi phiếu phỏng vấn 5 câu về trải nghiệm dùng MCP — do người dùng trả lời, AI không tự điền
get_icon_svg
Trả về raw SVG markup của icon (bộ viui-icons — nguồn DUY NHẤT) để dán thẳng vào HTML. Biến thể outline (mặc định) hoặc duotone.
get_icon_usage
Trả snippet code sẵn-dùng cho icon theo từng framework (vue-viicon, react, html-inline, html-img) — biến icon thành code dán được ngay.
token_diff
Liệt kê design tokens đã thay đổi kể từ một mốc thời gian. Change log lưu trong memory và reset khi server khởi động lại.
inet_ux_search_rules
Tìm trong 60 quy tắc UI/UX và glossary Anh/Việt của iNET (không dấu, hiểu từ đồng nghĩa) — dùng khi review/audit giao diện: mất cân bằng, thứ bậc, khoảng cách, chữ, CTA, bố cục
inet_ux_get_rule
Đọc đầy đủ một quy tắc UI/UX theo ID (UX-001…UX-060): dấu hiệu, bằng chứng cần có, cách sửa, validation, ngoại lệ
inet_ux_get_audit_checklist
Checklist audit UI/UX: Core 20 hoặc đủ 60 quy tắc, lọc theo nhóm — hướng dẫn kiểm tra, không phải kết quả audit
Prompts
create-component
Hướng dẫn tạo component Vi* mới theo chuẩn design system
migrate-to-viui
Hướng dẫn chuyển code từ Vuetify sang Vi* design system
accessibility-check
Tạo checklist kiểm tra WCAG AA cho component
generate-block
Hướng dẫn AI tạo block UI mới theo chuẩn iNET UI design system
generate-page
Hướng dẫn AI tổ hợp trang hoàn chỉnh từ các block có sẵn
customize-block
Hướng dẫn AI chỉnh sửa block có sẵn theo yêu cầu mới
design-system-qa
Trả lời câu hỏi về design system iNET UI: components, tokens, blocks, themes, conventions
viui
Hub dispatcher: hỏi muốn làm gì, AI route đến tool/resource phù hợp
getting-started
Hướng dẫn kết nối và sử dụng iNET UI MCP server
choose-button
Chọn DNA button concept phù hợp từ 14 hướng thiết kế — iNET Brand (A) và One Series (B)
generate-landing-page
Hướng dẫn AI tạo landing page marketing hoàn chỉnh từ mẫu (template) có sẵn qua tool generate_landing_page
whats-new
Xem các cập nhật mới nhất của iNET UI: công cụ, token, icon, block
danh-gia
Chấm câu trả lời MCP vừa nhận: đúng hay sai, dùng được ngay mức mấy — AI hỏi bạn rồi ghi phiếu, không tự chấm
phong-van
Trả lời 5 câu về MCP iNET UI: dùng để làm gì, kết quả đúng không, có dễ tìm chức năng không, muốn sửa gì — AI hỏi từng câu rồi ghi phiếu
inet_ux_audit
Audit UI/UX dựa trên bằng chứng: Problem → Evidence → Impact → Fix → Validation (gói quy tắc UI/UX iNET)
inet_ux_remediation
Hướng dẫn sửa các phát hiện UI/UX đã xác nhận (gói quy tắc UI/UX iNET)
inet_ux_validation
Kiểm chứng thực tế sau khi sửa UI/UX, ghi rõ bước chưa chạy (gói quy tắc UI/UX iNET)
Resources
Brand primary/accent, màu trạng thái, backgrounds, borders, text colors. Hệ thống khoảng cách lưới 8pt. Font, cỡ chữ, độ đậm, chiều cao dòng. Giá trị đổ bóng (box-shadow). Thời lượng, easing, hiệu ứng chuyển tiếp. Toàn bộ design token gộp chung
Primary #024799 + Accent #cc0e0e cùng scale và hướng dẫn sử dụng. Màu sắc từng dòng sản phẩm iNET: One* (OneMail, OnePanel,...) — green #49c98d, orange #f7ad30, dark backgrounds
API của các Vi* component — ViButton, ViInput, ViDialog, ViDataTable, ViCard...
Danh sách, lọc theo category, và source code đầy đủ của UI blocks. Block trong một danh mục cụ thể. Metadata và mã nguồn đầy đủ của một block
Danh sách tất cả themes có sẵn trong hệ thống
Bộ icon viui-icons (nguồn DUY NHẤT): outline + duotone, nhóm theo services/product/ui/data/lucide. Tìm bằng list_icons, lấy SVG raw qua get_icon_svg. (Tabler/MDI đã gỡ.)
Tài liệu hệ thống và danh sách Storybook stories. Metadata và cấu trúc story. Cập nhật mới nhất của iNET Design System
Quy tắc code iNET UI — đặt tên, cấu trúc, patterns. Từ điển 167 thuật ngữ UI/UX đối chiếu Anh/Việt của gói quy tắc iNET. Cách audit giao diện dựa trên bằng chứng: Problem → Evidence → Impact → Fix → Validation. Cách sửa các phát hiện đã xác nhận, giữ nguyên logic nghiệp vụ và phân quyền. Cách kiểm chứng thực tế và ghi rõ các bước chưa chạy. 60 quy tắc vận hành (20 cốt lõi, 15 nhóm): dấu hiệu, bằng chứng, cách sửa, validation, ngoại lệ. JSON Schema hợp đồng báo cáo audit: finding, evidence, severity, confidence, kết quả kiểm tra
Nguyên tắc WCAG 2.1 AA và bảng tỷ lệ tương phản màu cho i-design-system. Danh mục kiểm tra WCAG 2.1 AA: tương phản màu, bàn phím, focus visible, ARIA. Lý do chọn nl-600 cho biểu tượng, opacity:0/1 pattern, focus ring style. Mẫu thành phần Vi* chuẩn tiếp cận: ViButton, ViInput, ViDialog, ViDataTable. CSS custom properties và giá trị thiết kế của admin dashboard: màu sắc, kiểu chữ, khoảng cách