Design Systems

Dùng design-system skill để tạo hoặc rà soát một UI system, trích xuất token từ code hiện có và kiểm tra tính nhất quán của styling trong các repo thực tế.

Dùng skill shadcn để kiểm tra ngữ cảnh dự án, chạy đúng lệnh CLI, cài component và ghép UI theo các mẫu đã được tài liệu hóa cho base vs radix, forms, theming và registries.

design-consultation là một skill design-consultation giúp biến một ý tưởng sản phẩm thô thành một hướng thiết kế hoàn chỉnh. Skill này tạo ra một nguồn sự thật DESIGN.md, bản xem trước và hướng dẫn ở cấp hệ thống cho typography, màu sắc, khoảng cách, bố cục và chuyển động. Phù hợp nhất cho các sản phẩm mới và các bề mặt UI cần một điểm khởi đầu mạch lạc.

ui-ux-pro-max là kỹ năng toàn diện hỗ trợ AI cho thiết kế UI/UX. Cung cấp hướng dẫn cấu trúc về bố cục, phong cách, hệ màu, kiểu chữ và quy tắc UX cho dự án web và di động. Phù hợp cho lập trình viên và nhóm cần quyết định thiết kế thực tế trên React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter và HTML/CSS. Dùng để lên kế hoạch, đánh giá và cải thiện UI với trí tuệ thiết kế chọn lọc.

ckm:design-system giúp bạn xây dựng token ba lớp, spec component, CSS variables, mapping Tailwind và slide thương hiệu nhất quán dựa trên token architecture rõ ràng.

ckm:design là skill thiết kế có cấu trúc để định tuyến và triển khai logo, mockup CIP, banner, slide và icon SVG. Bộ này có tài liệu tham chiếu thực dụng, tùy chọn dựa trên CSV và script Python cho quy trình lặp lại ổn định thay vì chỉ dựa vào prompt chung chung.

ckm:brand là kỹ năng quy trình thương hiệu để tạo, cập nhật và rà soát brand guidelines, thông điệp, giọng điệu, nhận diện hình ảnh và đồng bộ design tokens bằng các script và checklist thực tế.

design-system-patterns giúp các nhóm xây dựng nền tảng UI có khả năng mở rộng với cấu trúc token, kiến trúc theming và các mẫu API component tái sử dụng cho design system và thư viện component.

visual-design-foundations giúp các nhóm xây dựng hệ thống UI thực tiễn với thang kiểu chữ, token màu, quy tắc khoảng cách và hướng dẫn iconography. Hãy dùng skill này để thiết lập nền tảng thiết kế vững chắc, tạo style guide, rà soát phân cấp thị giác và tạo CSS variables sẵn sàng triển khai từ các ràng buộc thiết kế rõ ràng.

Kỹ năng web-component-design giúp các nhóm thiết kế UI component có thể tái sử dụng cho React, Vue và Svelte, với các mẫu API chắc chắn, hướng dẫn về khả năng truy cập và tài liệu tham khảo về các đánh đổi khi styling trong design system.

Dùng skill tailwind-design-system để xây dựng design system với Tailwind CSS v4, bao gồm tokens, theming, variants, accessibility và hướng dẫn chuyển từ v3 sang v4.

polish là kỹ năng rà soát UI ở bước cuối để bắt lỗi căn chỉnh, khoảng cách, tính nhất quán, việc dùng token và các chi tiết nhỏ trước khi phát hành. Kỹ năng này phù hợp nhất với những màn hình, luồng hoặc component đã dùng được nhưng vẫn còn cảm giác gần đúng chứ chưa thật sự hoàn thiện. Hãy dùng nó để nâng mức sẵn sàng ra mắt, bám sát design system hơn và cải thiện chất lượng tổng thể mà không cần thiết kế lại quá mức.

figma-create-design-system-rules giúp bạn tạo các quy tắc Design System theo từng dự án cho công việc Figma-to-code. Dùng skill này để ghi lại quy ước cho component, naming, token, vị trí file và những thứ không nên hardcode, ताकि các AI coding agent luôn nhất quán trên toàn bộ repo của bạn. Cần kết nối với Figma MCP server.

site-architecture giúp lập kế hoạch hoặc tái cấu trúc hệ thống phân cấp trang, điều hướng, mẫu URL và liên kết nội bộ cho website. Dùng skill này để tạo sitemap, đặc tả điều hướng, bản đồ URL, cùng sơ đồ website bằng Mermaid hoặc ASCII phục vụ lập kế hoạch marketing và UI/UX.

Skill normalize giúp rà soát một tính năng UI và đưa nó về đúng với design system của bạn. Tìm hiểu các lựa chọn cài đặt normalize, phần chuẩn bị frontend-design cần có và cách dùng thực tế cho page, route và component.

extract giúp các nhóm tìm ra các mẫu UI, token và component lặp lại, rồi lên kế hoạch hoặc thực hiện việc hợp nhất vào design system hiện có với lộ trình chuyển đổi an toàn hơn.

Skill normalize dùng để rà soát một tính năng UI và đưa nó về đúng với design system của bạn. Tìm hiểu bối cảnh cài đặt normalize, phần chuẩn bị bắt buộc với /frontend-design và cách dùng thực tế cho page, route và component.

Skill extract giúp các nhóm tìm ra những mẫu UI, token và component lặp lại, rồi hợp nhất chúng vào design system hiện có với kế hoạch migration an toàn hơn.

Skill design-md phân tích các dự án Stitch và biến các màn hình thành một nguồn chân lý DESIGN.md mang tính ngữ nghĩa, giúp duy trì nhất quán về bố cục, giọng điệu, màu sắc và ngôn ngữ thành phần. Hãy dùng design-md cho Design Systems khi bạn cần hướng dẫn có thể prompt cho các lần tạo Stitch sau này, chứ không chỉ một bản tóm tắt trực quan.

Dùng kỹ năng wpds để xây dựng hoặc rà soát WordPress UI với WordPress Design System (WPDS). Kỹ năng này giúp bạn kiểm tra components, tokens, patterns và mức độ phù hợp của package thông qua WPDS MCP server, để hướng dẫn wpds của bạn bám vào tài liệu chuẩn thay vì suy đoán. Rất phù hợp cho công việc wpds trong Design Systems trên Gutenberg, WooCommerce, WordPress.com, Jetpack và các giao diện liên quan.

figma-use là skill cần cài trước mỗi lần gọi `use_figma` để JavaScript chạy an toàn trong ngữ cảnh file Figma. Skill này hỗ trợ các công việc triển khai thiết kế như tạo và chỉnh sửa node, gắn biến và style, xây dựng component và variant, cũng như kiểm tra cấu trúc file bằng lập trình. Repo đi kèm hướng dẫn sử dụng, các điểm dễ vấp, và những mẫu thực hành giúp giảm lỗi tự động hóa Figma thường gặp.

mui là hướng dẫn tập trung cho Material UI v7 trong React, bao quát sx styling, tùy biến theme, layout responsive và các thay đổi quan trọng khi migrate lên v7. Bạn có thể dùng skill này để cài đặt, bám theo các tệp cốt lõi và tạo component MUI theo các mẫu @mui/material hiện hành.

makepad-2.0-theme là một skill theme cho Makepad 2.0, dùng để áp dụng các biến `theme.*`, chuyển đổi giữa giao diện tối và sáng, và giữ cho styling theo design token luôn nhất quán. Hãy dùng hướng dẫn này để hiểu cách cài đặt và sử dụng makepad-2.0-theme cho UI production và hệ thiết kế.

figma-generate-library giúp bạn xây dựng hoặc cập nhật một hệ thống thiết kế Figma từ một codebase, theo quy trình có thứ tự cho tokens, thư viện component, tài liệu và theming sáng/tối. Hãy dùng skill figma-generate-library khi bạn cần một hướng dẫn thực chiến cho Design Systems, không phải một mockup làm một lần. Skill này bổ trợ cho figma-use khi cần gọi Plugin API.