Figma Skills là các hướng dẫn dựa trên markdown để định hướng cách AI Design Agent hoạt động trong bối cảnh cụ thể của bạn. Hãy nghĩ về chúng như những prompt tùy chỉnh có thể tái sử dụng — bạn viết một lần, và chúng sẽ mã hóa các quy ước của nhóm, quy tắc component, và tiêu chuẩn chất lượng để agent tự động tuân theo mỗi lần.

Bất kỳ ai cũng có thể viết một skill. Không cần code. Không cần phát triển plugin. Không cần tích hợp API. Chỉ cần văn bản markdown mô tả agent nên làm gì và làm như thế nào. Skills là sự khác biệt giữa một agent tạo ra UI chung chung và một agent tạo ra UI của NHÓM bạn.

Điểm Quan Trọng

Skills biến Design Agent từ một AI chung chung thành AI của NHÓM bạn. Không có skills, agent sử dụng các quy ước mặc định và đoán sở thích của bạn. Với skills, nó tự động tuân theo hệ thống spacing, quy tắc đặt tên component, yêu cầu khả năng tiếp cận, và hướng dẫn thương hiệu. 30 phút viết 3-4 skills tiết kiệm hàng giờ chỉnh sửa trong nhiều tuần sử dụng agent.

Figma Skill Gồm Những Gì?

Thành Phần Skill Chức Năng Ví Dụ
Tên (với /)Cách bạn gọi skill/create-settings-page
Mục đíchSkill làm gì (một câu)"Tạo trang cài đặt theo quy ước của nhóm"
Các bướcHướng dẫn có thứ tự agent tuân theo"1. Sử dụng Section Header cho mỗi nhóm..."
Quy ướcQuy tắc agent phải tuân theo"Luôn sử dụng lưới 8px, không bao giờ dùng định vị tuyệt đối"
ComponentsComponent đã publish nào nên sử dụng"Sử dụng Toggle/Switch cho cài đặt boolean"
VariablesDesign token nào nên áp dụng"Sử dụng color-surface-primary cho nền"
Không nênNhững gì agent nên tránh"Không bao giờ sử dụng quá 3 cấp độ heading mỗi trang"

Figma ra mắt với 9 skill ví dụ bao gồm: xây dựng thư viện component, tạo thiết kế mới từ brief, tạo đặc tả khả năng tiếp cận, điều phối quy trình làm việc đa-agent, và đồng bộ design token với code. Khám phá tại figma.com/community/skills. Skill nền tảng /use-figma cho agent hiểu biết chung về cách Figma hoạt động về mặt cấu trúc. Các nhóm tùy chỉnh từ đó.

Viết Skill Đầu Tiên (Với Ví Dụ)

Bắt đầu với tác vụ thiết kế lặp lại nhiều nhất. Nếu bạn tạo bố cục form hàng tuần, hãy viết skill /form-layout. Đây là một ví dụ hoàn chỉnh, thực tế:

/form-layout Mục đích: Tạo bố cục form phù hợp với quy ước design system của chúng tôi. Các bước: 1. Tạo frame với padding ngang 24px và padding dọc 32px 2. Thêm tiêu đề trang sử dụng component Heading/H1 3. Nhóm các trường form liên quan thành từng phần sử dụng component Section/Header 4. Thêm các trường form sử dụng thư viện component (xem quy tắc bên dưới) 5. Thêm nút hành động ở cuối sử dụng component Button 6. Áp dụng auto layout cho tất cả container Quy Tắc Component: - Nhập liệu văn bản một dòng: sử dụng Input/Text - Văn bản nhiều dòng: sử dụng Input/Textarea - Chọn từ các tùy chọn: sử dụng Select/Dropdown - Bật/tắt có/không: sử dụng Toggle/Switch (không bao giờ dùng checkbox cho boolean đơn) - Lựa chọn nhiều: sử dụng Checkbox/Group - Chọn ngày: sử dụng DatePicker/Default Quy Tắc Spacing: - 16px giữa các trường form trong một phần - 32px giữa các phần - 24px padding ngang - Label luôn TRÊN input, không bao giờ bên cạnh (sử dụng style Body/Small) - Bao gồm văn bản hướng dẫn bên dưới input khi có quy tắc validation Quy Tắc Button: - Hành động chính căn phải ở cuối - Hành động phụ (Cancel/Reset) bên trái hành động chính với khoảng cách 16px - Button trong container auto layout ngang - Thanh dính cuối trên mobile Trạng Thái Validation: - Lỗi: viền đỏ (#EF4444) + thông báo lỗi bên dưới bằng Body/Small/Error - Thành công: dấu tick xanh inline sau input hợp lệ - Luôn hiển thị văn bản lỗi — không bao giờ chỉ thay đổi màu viền Không nên: - Không bao giờ sử dụng placeholder text làm label duy nhất - Không bao giờ xếp chồng hơn 8 trường mà không có ngắt phần - Không bao giờ dùng dropdown cho ít hơn 4 tùy chọn (sử dụng radio button) - Không bao giờ đặt chỉ báo bắt buộc/tùy chọn trên mọi trường (đánh dấu số ít)

Skill này cho agent biết chính xác cách nhóm bạn xây dựng form. Không có nó, agent sử dụng quy ước mặc định của Figma. Với nó, mọi form agent tạo ra đều tuân theo tiêu chuẩn cụ thể của bạn — nhất quán giữa các thành viên nhóm, nhất quán giữa các dự án.

📬 Thấy hữu ích?

Một insight AI hành động mỗi tuần. Cộng thêm gói prompt miễn phí khi đăng ký.

Đăng ký miễn phí →

So Sánh Skills với Các Hệ Thống Hướng Dẫn Tùy Chỉnh AI Khác

Skills về mặt khái niệm tương tự như các hệ thống hướng dẫn tùy chỉnh trong các công cụ AI khác:

Công Cụ Hướng Dẫn Tùy Chỉnh Tạo Bởi Chia Sẻ?
Figma SkillsFile Markdown hướng dẫn Design AgentThủ công bởi nhómCó (Thư viện cộng đồng)
ChatGPT Custom InstructionsVăn bản định hình mọi phản hồi ChatGPTThủ công bởi người dùngKhông (chỉ cá nhân)
Claude Code CLAUDE.mdHướng dẫn cấp dự án cho coding agentThủ công bởi nhómCó (qua repo)
Hermes Agent SkillsMẫu tác vụ tái sử dụng tự động tạoTự động từ việc sử dụngCó (thư viện skill)

Điểm khác biệt chính: Hermes Agent tạo skills tự động từ các tác vụ đã hoàn thành — học khi bạn làm việc. Figma yêu cầu tạo skill thủ công — bạn dạy nó một cách rõ ràng. Cách tiếp cận của Hermes mở rộng theo việc sử dụng; cách tiếp cận của Figma cho bạn kiểm soát nhiều hơn nhưng yêu cầu đầu tư ban đầu. Cả hai đều tạo ra output AI tốt hơn so với sử dụng công cụ mà không có hướng dẫn tùy chỉnh.

Nguyên tắc cơ bản giống nhau trong tất cả các hệ thống này: AI hoạt động tốt hơn với ngữ cảnh rõ ràng về sở thích, quy ước và tiêu chuẩn của bạn. Cho dù bạn đang viết Figma Skill, ChatGPT Custom Instructions, hay file Claude CLAUDE.md, framework ICCSSE tạo ra hướng dẫn tốt hơn. Prompt Optimizer miễn phí áp dụng cấu trúc này tự động — dán bản nháp skill của bạn, nhận phiên bản rõ ràng hơn.

4 Skills Thiết Yếu Mọi Nhóm Thiết Kế Cần

1. /form-layout — Tiêu chuẩn hóa thiết kế form trong nhóm. (Ví dụ ở trên.)

2. /page-layout — Định nghĩa quy ước cấu trúc trang của bạn: vị trí header, độ rộng sidebar, max-width nội dung, cấu trúc footer, mẫu điều hướng, breakpoint responsive.

3. /component-variant — Cho agent biết cách tạo variant component mới phù hợp với hệ thống hiện có: quy ước đặt tên, định nghĩa trạng thái (default, hover, active, disabled, error), thang kích thước (sm, md, lg), và yêu cầu tài liệu.

4. /accessibility-check — Định nghĩa tiêu chuẩn khả năng tiếp cận: cấp độ WCAG (AA vs AAA), kích thước touch target tối thiểu, tỷ lệ tương phản, quy tắc phân cấp heading, nhãn ARIA bắt buộc, và định dạng chú thích screen reader. Xem hướng dẫn đặc tả khả năng tiếp cận để biết chi tiết.

📬 Muốn thêm nội dung như thế này?

Một insight AI hành động mỗi tuần. Cộng thêm gói prompt miễn phí khi đăng ký.

Đăng ký miễn phí →

Câu Hỏi Thường Gặp

Tôi nên tạo bao nhiêu skills?

Bắt đầu với 3-4 skills bao gồm các tác vụ thiết kế phổ biến nhất: skill form, skill bố cục trang, skill variant component, và skill kiểm tra khả năng tiếp cận. Những skill này bao phủ 80% công việc thiết kế hàng ngày. Thêm skills khi bạn nhận ra các mẫu lặp lại mà agent xử lý không nhất quán.

Skills có thể gọi skills khác không?

Có — skills có thể tham chiếu skills khác, tạo quy trình làm việc chuỗi. Skill /new-feature có thể gọi /form-layout cho phần input, sau đó /accessibility-check để kiểm tra tuân thủ. Điều này cho phép quy trình làm việc phức tạp nhiều bước từ một lần gọi duy nhất.

Skills có tiêu tốn credit không?

Bản thân skill (hướng dẫn markdown) không tiêu tốn credit. Các hành động agent mà skill kích hoạt (tạo thiết kế, chỉnh sửa component) tiêu tốn credit với tỷ lệ bình thường. Skill được viết tốt thực tế có thể tiết kiệm credit bằng cách tạo ra output tốt hơn ngay lần đầu — ít lần lặp lại có nghĩa là ít lần tái tạo tiêu tốn credit hơn.

Tôi có thể chia sẻ skills với cộng đồng Figma không?

Có — thư viện skills cộng đồng của Figma cho phép bạn xuất bản và duyệt skills. Điều này có nghĩa bạn có thể sử dụng skills được viết bởi các nhóm thiết kế khác cho các mẫu phổ biến (bố cục dashboard, luồng onboarding, trang cài đặt) mà không cần viết từ đầu.

Skills được lưu trữ ở đâu?

Skills được liên kết với tổ chức Figma hoặc tài khoản cá nhân của bạn. Skills cấp nhóm có thể truy cập bởi tất cả thành viên nhóm; skills cá nhân chỉ bạn mới truy cập được. Lưu trữ skills quan trọng nhất ở cấp nhóm để tất cả designer đều hưởng lợi từ cùng các quy ước.

Tiết lộ: Một số liên kết trong bài viết này là liên kết affiliate. Chúng tôi chỉ giới thiệu các công cụ đã được kiểm tra cá nhân và sử dụng thường xuyên. Xem chính sách tiết lộ đầy đủ của chúng tôi.