Khám phá MCP Capabilities

Tra cứu design token theo đường dẫn (VD: "colors.primary.light", "colors.accent.light")

Kiểm tra giá trị token hợp lệ — color, dimension, duration, fontWeight, number

Từ hex color hoặc dimension → tìm design token gần nhất kèm WCAG ratio

Tìm kiếm fuzzy trong toàn bộ design tokens, lọc theo loại

Sinh tất cả CSS vars --viui-color-* từ design tokens, hỗ trợ css/scss/ts/json với light/dark tự động

Xem API đầy đủ của Vi* component — props, slots, emits, defaults. Tool được dùng nhiều nhất.

Xem ví dụ sử dụng Storybook cho bất kỳ Vi* component nào

Tạo template Vue 3 SFC + Storybook story cho component mới

Tự động quét file CSS/SCSS/JSX/TSX để phát hiện giá trị cứng nên thay bằng design token

Tìm UI blocks theo keyword hoặc category

Lấy source code đầy đủ của một UI block theo slug

Liệt kê tất cả block có sẵn, có thể lọc theo danh mục

Liệt kê tất cả themes có sẵn

So sánh CSS variables giữa 2 themes

Lấy dữ liệu mẫu LandingPageData đầy đủ để làm base customize

Liệt kê tất cả tools và prompts có sẵn trong ViUI MCP server

Tìm kiếm icon trong bộ viui-icons (nguồn DUY NHẤT: outline + duotone, ~1338). Không còn tabler/mdi.

Liệt kê hoặc đọc tài liệu hệ thống

Hướng dẫn WCAG 2.1 AA: overview, checklist, design-rationale, ui-kit

Lấy quy tắc Brand DNA iNET theo nhóm: color, motion, iconography, dataViz, illustration, hoặc all

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

Liệt kê 16 DNA button concepts — Group A (iNET Brand #024799+#cc0e0e) và Group B (One Series #49c98d+#f7ad30) kèm SVG thumbnail preview

Tạo self-contained HTML landing page từ LandingPageData schema

Hướng dẫn tạo component Vi* mới theo chuẩn design system

Hướng dẫn chuyển code từ Vuetify sang Vi* design system

Tạo checklist kiểm tra WCAG AA cho component

Hướng dẫn AI tạo block UI mới theo chuẩn ViUI design system

Hướng dẫn AI tổ hợp trang hoàn chỉnh từ các block có sẵn

Hướng dẫn AI chỉnh sửa block có sẵn theo yêu cầu mới

Trả lời câu hỏi về design system ViUI: components, tokens, blocks, themes, conventions

Hub dispatcher: hỏi muốn làm gì, AI route đến tool/resource phù hợp

Hướng dẫn kết nối và sử dụng ViUI MCP server

Chọn DNA button concept phù hợp từ 16 hướng thiết kế — iNET Brand (A) và One Series (B)

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

30+ Vi* component APIs — 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

Quy tắc code ViUI — đặt tên, cấu trúc, patterns

Cập nhật mới nhất của iNET Design System

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