Design Tokens

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.

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.

figma-use là kỹ năng bắt buộc để gọi `use_figma` an toàn trong các quy trình làm việc với Figma Plugin API. Hãy dùng kỹ năng figma-use để cài đặt và nạp nó trước khi viết, cập nhật, kiểm tra hoặc cấu trúc các tệp Figma bằng JavaScript. Kỹ năng này đặc biệt hữu ích cho triển khai thiết kế, làm việc với component, variables, auto layout và đọc tệp theo cách lập trình.

figma-implement-design biến các màn hình Figma thành code sẵn sàng cho môi trường production ngay trong repo của bạn, với mục tiêu bám sát giao diện về bố cục, trạng thái, token và hành vi responsive. Hãy dùng cho triển khai Figma-to-code, không dùng để chỉnh sửa Figma, ánh xạ code connect hay tạo thiết kế mới. Kỹ năng này bao gồm hướng dẫn cài đặt, lưu ý sử dụng và các quy tắc ranh giới cho quy trình Design Implementation.

figma-generate-library giúp biến một codebase thành thư viện design system trên Figma với tokens, variables, components, theming và tài liệu. Hãy dùng skill figma-generate-library khi bạn cần một quy trình theo giai đoạn cho công việc Design Systems, bao gồm cài đặt, thiết lập, khám phá, tạo mới, kiểm tra và đối chiếu với code.

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ộ.