Figma Use

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.

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.

figma-create-new-file tạo một file Figma hoặc FigJam mới, trống trong drafts, với mặc định cho loại editor và tên file. Skill figma-create-new-file này hỗ trợ triển khai thiết kế, tạo mẫu nhanh, và bắt đầu một canvas mới trước khi dùng use_figma. Skill cũng xử lý việc xác định planKey thông qua whoami khi cần.

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