Figma AI chỉ hoạt động tốt bằng những hướng dẫn bạn đưa ra. Các prompt mơ hồ tạo ra những bố cục chung chung mà bạn phải xây dựng lại từ đầu. Các prompt cụ thể — với loại màn hình, phần, thành phần, kích thước khung và khoảng cách — thường xuyên tạo ra 70–85% đầu ra sẵn sàng sản xuất chỉ trong một lần. 15 mẫu này được cấu trúc cho bộ AI 2026 của Figma: Design Agent, Figma Make, Skills, và các tính năng miễn phí (auto layout, đổi tên layer, thay thế nội dung) không tốn credit.

Sao chép bất kỳ mẫu nào, thay thế các placeholder trong ngoặc vuông bằng sản phẩm của bạn, và chạy qua Trình Tối ưu Prompt miễn phí nếu bạn muốn ràng buộc chặt chẽ hơn. Để tối ưu hóa một cú nhấp bên trong ChatGPT, Claude và Gemini khi bạn soạn thảo hướng dẫn agent, TresPrompt thêm cấu trúc kiểu ICCSSE vào thanh bên của bạn.

Điểm Chính

Mọi prompt Figma AI mạnh đều nêu bốn thứ: màn hình bạn đang xây dựng, những component đã xuất bản nào sử dụng, kích thước khung và quy tắc khoảng cách. Thêm ràng buộc phủ định ("không dùng khung không tên," "không lorem ipsum") và agent sẽ ngừng đoán. Skills mã hóa những mẫu này để bạn không phải gõ lại mỗi phiên.

Mẫu Design Agent (Màn hình trên Canvas)

1 Trang cài đặt mobile
Tạo trang cài đặt mobile (390×844) với: 1. Tài khoản — avatar, tên, email, nút chỉnh sửa 2. Thông báo — toggle cho email, push, SMS 3. Giao diện — toggle chế độ tối, bộ chọn cỡ chữ 4. Bảo mật — đổi mật khẩu, toggle 2FA 5. Footer — nút đăng xuất nguy hiểm, text phiên bản app Chỉ sử dụng published components. Auto layout: khoảng cách item 16px, 32px giữa các phần. Section Header component cho nhãn nhóm.
2 Tổng quan dashboard (desktop)
Tạo dashboard phân tích desktop (1440×900) với: - Nav trên: logo, tìm kiếm, menu người dùng - Sidebar trái: 5 item nav, trạng thái active trên "Overview" - Chính: 4 thẻ KPI trong một hàng, biểu đồ đường bên dưới, bảng hoạt động gần đây (5 hàng) Sử dụng biến design system cho màu sắc và khoảng cách. Card component cho KPI. Table component cho hoạt động. Không sử dụng nhãn dữ liệu biểu đồ placeholder như "Series 1."
3 Luồng onboarding (3 khung)
Tạo 3 màn hình onboarding mobile (390×844), từ trái qua phải: 1. Chào mừng — tiêu đề, phụ đề, CTA chính "Bắt đầu" 2. Quyền — danh sách thông báo + vị trí với toggle 3. Thành công — vùng minh họa dấu tick, CTA "Bạn đã sẵn sàng" Sử dụng Primary Button và Secondary Button components. Chỉ báo tiến độ hiển thị bước 1/3, 2/3, 3/3. Padding ngang 24px nhất quán trên tất cả khung.
4 Trạng thái rỗng + trạng thái lỗi
Tạo hai khung mobile (390×844): Khung A — Kết quả tìm kiếm rỗng: vùng icon, tiêu đề "Không có kết quả", nội dung, nút phụ "Xóa bộ lọc" Khung B — Lỗi: icon cảnh báo, "Đã xảy ra lỗi", chính "Thử lại", phụ "Liên hệ hỗ trợ" Sử dụng Empty State và Alert components đã xuất bản nếu có. Nội dung căn giữa, chiều rộng tối đa 280px cho khối text.
5 Cài đặt có thể truy cập (agent + a11y)
Tạo trang cài đặt mobile (390×844) với yêu cầu khả năng truy cập: - Các phần tử tương tác tối thiểu 44×44px vùng chạm - Độ tương phản text tối thiểu 4.5:1 (sử dụng màu text design system) - Thứ bậc tiêu đề H1 → H2, không bỏ qua cấp độ - Toggle bao gồm nhãn text hiển thị (không chỉ icon) - Trạng thái lỗi sử dụng màu VÀ text (không chỉ màu) Sử dụng published components. Auto layout khoảng cách 16px / 32px.

📬 Thấy hữu ích?

Một insight AI thực tế mỗi tuần. Cộng với gói prompt miễn phí khi đăng ký.

Đăng ký miễn phí →

Mẫu Figma Make (Prototype / Code)

6 Landing marketing (Make)
Xây dựng trang marketing một trang từ khung Figma này: - Hero: tiêu đề, phụ đề, thu thập email + CTA - 3 cột tính năng với icon - Hàng logo bằng chứng xã hội - Footer với liên kết Khớp khoảng cách và màu sắc từ khung được chọn. Responsive mobile. Không thư viện bên ngoài trừ khi được chỉ định trong ghi chú khung.
7 Prototype tương tác (Make)
Tạo prototype có thể nhấp từ các khung [liệt kê tên khung]: - Nhấp "Đăng ký" điều hướng đến khung biểu mẫu đăng ký - Submit hiển thị trạng thái toast thành công - "Quay lại" trở về màn hình trước Sử dụng components từ file. Giữ trạng thái hover trên nút chính. Không thêm màn hình mới không có trong file thiết kế.

Mẫu Skills (Hướng dẫn Agent có thể tái sử dụng)

Lưu những cái này dưới dạng file markdown Skills để agent tuân theo quy ước nhóm mọi lúc.

8 Skill: /settings-page
Khi tạo màn hình cài đặt: - Luôn sử dụng mẫu Section Header + danh sách nhóm - Bao gồm footer với phiên bản app (kiểu caption) và đăng xuất nguy hiểm - Mobile mặc định 390×844 trừ khi người dùng chỉ định desktop - Sử dụng Toggle component cho cài đặt boolean, không bao giờ checkbox tùy chỉnh - Khoảng cách: 16px trong nhóm, 32px giữa nhóm, 24px padding màn hình
9 Skill: /data-table
Khi tạo bảng: - Sử dụng Table/Header và Table/Row components - Bao gồm icon sắp xếp cột chỉ khi người dùng yêu cầu - Chiều cao hàng tối thiểu 48px cho chạm - Cắt ngắn text dài với dấu chấm lửng, không bao giờ xuống dòng quá 2 dòng trong ô - Trạng thái rỗng bên dưới bảng nếu không có hàng

Tính năng Miễn phí (Không Credit)

10 Thay thế Nội dung (hàng loạt)
Thay thế tất cả lorem ipsum trong khung được chọn bằng nội dung thực tế [B2B SaaS / thương mại điện tử / chăm sóc sức khỏe]. Tên: đa dạng, hợp lý. Địa chỉ: định dạng Mỹ. Tên sản phẩm: hư cấu nhưng chuyên nghiệp. Giữ số ký tự tương tự placeholder để bố cục không bị vỡ.
11 Đổi tên layer (chuẩn bị bàn giao)
Đổi tên tất cả layer trong trang này sử dụng mẫu: [Section]/[Component]/[State] Ví dụ: Settings/NotificationRow/Default Không đổi tên khung nền bị khóa. Bỏ qua layer ẩn.

MCP + Code Handoff Prompts (Claude Code / Cursor)

12 React từ khung Figma
Đọc khung Figma được chọn qua MCP. Tạo React component sử dụng [Tailwind / thư viện Shadcn của chúng tôi]: - Khớp khoảng cách và màu sắc từ token thiết kế trong file - Sử dụng HTML ngữ nghĩa (nav, main, section) - Bao gồm breakpoint responsive tại 768px và 1024px - Export dưới dạng SettingsPage.tsx với props có kiểu cho dữ liệu người dùng Không hardcode giá trị hex — sử dụng tên token từ biến Figma.

Mẫu Khám phá & So sánh

13 Ba hướng bố cục
Tạo 3 cách tiếp cận bố cục khác nhau cho [loại màn hình] trên desktop 1440×900: A — điều hướng sidebar B — điều hướng tab trên C — hub dựa trên thẻ Cùng nội dung trong cả ba. Sử dụng published components. Đặt khung cạnh nhau với khoảng cách 80px. Ghi nhãn mỗi khung "Direction A/B/C" bằng text caption nhỏ.
14 Prompt kiểm tra design system
Xem xét trang được chọn và liệt kê: - Components không từ thư viện đã xuất bản (đánh dấu là "detached") - Màu sắc không sử dụng biến - Text không sử dụng kiểu text - Khoảng cách auto layout không phải 4/8/16/24/32 Đầu ra dưới dạng danh sách kiểm tra trong ghi chú khung. Không tự động sửa — chỉ báo cáo.
15 Lượt tinh chỉnh (prompt thứ hai)
Trên khung đã tạo, chỉ áp dụng những sửa chữa này: 1. Tăng khoảng cách dọc giữa các phần lên 32px 2. Đổi nút chính sang biến thể Button/Primary/Large 3. Thêm text trợ giúp dưới trường email: "Chúng tôi sẽ không bao giờ chia sẻ email của bạn" 4. Căn chỉnh tất cả icon thành 24×24 trong hàng danh sách Không tái cấu trúc bố cục. Không thêm phần mới.

Cách Nối chuỗi Mẫu

Quy trình sản xuất: Mẫu 13 (khám phá) → chọn hướng → Mẫu 1 hoặc 2 (toàn màn hình) → Mẫu 15 (tinh chỉnh) → Mẫu 11 (đổi tên) → Mẫu 12 (MCP sang code). Mỗi bước sử dụng prompt tập trung thay vì một hướng dẫn khổng lồ làm rối agent.

Đối với hệ sinh thái Figma AI đầy đủ (Agent, Make, MCP, Skills, Sites), xem hướng dẫn hoàn chỉnh 2026 của chúng tôi. Để thiết lập agent từng bước, xem cách sử dụng Design Agent. Để lập ngân sách credit, xem giải thích credit Figma AI.

Câu hỏi Thường gặp

Những mẫu này có hoạt động trên gói Figma miễn phí không?

Mẫu 10–11 (Thay thế Nội dung, đổi tên) hoạt động trên gói miễn phí. Design Agent và Make yêu cầu gói trả phí và quyền truy cập beta. MCP hoạt động với bất kỳ gói nào có thể bật Dev Mode / MCP cho chỗ ngồi của bạn.

Tôi nên dán toàn bộ mẫu hay rút ngắn?

Bắt đầu với mẫu đầy đủ. Khi bạn thấy agent bỏ qua dòng nào, hãy rút ngắn. Prompt ngắn hơn chỉ hoạt động sau khi bạn biết design system của bạn thực sự cần ràng buộc nào.

Tôi có thể sử dụng cùng prompt cho Make và Design Agent không?

Không — Make mong đợi ngôn ngữ xây dựng/prototype và tiêu thụ credit khác nhau. Sử dụng mẫu Design Agent cho layer canvas và mẫu Make cho đầu ra tương tác. Trộn lẫn chúng tạo ra kết quả rối.

Làm thế nào để lưu prompt dưới dạng Skills?

Sao chép mẫu 8–9 vào file markdown Skills trong thư viện Skills của nhóm bạn. Gọi bằng /skill-name trong panel agent. Cập nhật Skills khi tên component của bạn thay đổi — xem hướng dẫn Skills của chúng tôi.

Tiết lộ: Một số liên kết trong bài viết này là liên kết liên kết. Chúng tôi chỉ giới thiệu các công cụ đã được thử nghiệm 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.