Agent Skills về design

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.

figma-generate-design giúp chuyển các trang, modal, drawer, sidebar, panel và những giao diện nhiều phần khác đã được code thành Figma bằng cách dùng design system đã công bố. Kỹ năng này tìm component, biến, style và tài nguyên thư viện từ Code Connect cùng các nguồn liên quan, rồi ghép màn hình theo từng phần cho Design Implementation thay vì vẽ lại thủ công toàn bộ. Hãy dùng hướng dẫn figma-generate-design khi bạn cần độ khớp cao với code và token.

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.

Kỹ năng design giúp biến các yêu cầu UI mơ hồ thành đầu ra trực quan đạt chuẩn sản xuất cho trang, component, dashboard và tinh chỉnh dựa trên screenshot. Hãy dùng khi giao diện trông xấu, chưa rõ ràng, thiếu nhất quán hoặc sai về mặt thị giác, và khi bạn cần design cho UI Design thay vì logic backend hay pipeline dữ liệu. Kỹ năng này bao gồm hướng dẫn cài đặt, cách dùng, các rào chắn an toàn và những quyết định thẩm mỹ tốt 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 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ế.

figma-generate-design giúp chuyển một màn hình, trang hoặc bố cục nhiều phần thực tế vào Figma bằng cách tái sử dụng hệ thống thiết kế đã xuất bản thay vì các hình khối chung chung. Đây là lựa chọn lý tưởng khi cần bám sát giao diện code hoặc trang sản phẩm với độ tương đồng cao, cấu trúc có thể chỉnh sửa và tính nhất quán dựa trên token. Hãy dùng cho việc cập nhật thiết kế UI toàn trang, không phải cho mockup sơ bộ.

ui-design-system là một Claude skill cho Design Systems, hỗ trợ tạo design tokens, color scales, typography, spacing, responsive rules, tài liệu component và tài sản developer handoff, kèm tài liệu tham chiếu và Python token generator để xuất JSON, CSS, SCSS hoặc bản tóm tắt.

frontend-design-review là một GitHub skill dùng để review công việc UI frontend và tạo giao diện khác biệt, đạt chuẩn production từ con số 0. Skill này giúp đánh giá mức độ tuân thủ design system, khả năng tiếp cận, chất lượng hình ảnh và việc một UI trông chung chung hay có chủ đích thiết kế rõ ràng. Hãy dùng cho review PR, review component và frontend-design-review trong thiết kế UI.

Dùng frontend-design để xây dựng các giao diện frontend khác biệt, sẵn sàng cho sản xuất, với định hướng thị giác rõ ràng. Skill frontend-design này phù hợp cho landing page, dashboard, app shell và các component mà thứ bậc nội dung, kiểu chữ, chuyển động và độ chỉn chu quan trọng không kém phần triển khai. Nó cũng bao gồm hướng dẫn cài đặt và sử dụng cho công việc UI theo hướng thiết kế trướ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.

Kỹ năng tool-design giúp bạn thiết kế các công cụ dành cho agent với hợp đồng rõ ràng, giảm chồng chéo và cải thiện khả năng chọn đúng tool. Hãy dùng nó cho Design Implementation, thiết kế tool MCP, hợp nhất tool, quy ước đặt tên và gỡ lỗi khi agent gọi sai tool. Đây là lựa chọn phù hợp khi bạn cần một hướng dẫn thực hành về tool-design kèm bước cài đặt và sử dụng, các file nguồn để kiểm tra, cùng những ràng buộc cụ thể giúp mô tả tool bớt mơ hồ.