MCP CATALOG

Explore MCP Capabilities

Every tool, prompt and resource in the iNET Design System — ready for any AI agent.

44Tools
29Resources
17Prompts

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

Tokens
tokens://colorstokens://spacingtokens://typographytokens://elevationtokens://motiontokens://all

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

Brand New
brand://palettebrand://products

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

Components
components://list

API của các Vi* component — ViButton, ViInput, ViDialog, ViDataTable, ViCard...

Blocks New
blocks://listblocks://category/{cat}blocks://detail/{slug}

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

Themes New
themes://list

Danh sách tất cả themes có sẵn trong hệ thống

Icons New
icons://i-duotoneicons://brand

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ỡ.)

Docs New
docs://liststorybook://stories

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

Conventions
conventions://

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

Accessibility New
accessibility://overviewaccessibility://checklistaccessibility://design-rationaleaccessibility://ui-kit

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