Xây dựng một màn hình hoàn chỉnh trong Figma với AI

🔄 Tóm tắt nhanh: Hãy cùng điểm lại lộ trình. Bài 1 giới thiệu về lĩnh vực này - Make so với MCP, hai công cụ khác nhau cho các công việc khác nhau. Bài 2-4 dạy bạn cách sử dụng cả hai. Bài 5 chỉ cho bạn cách buộc hệ thống thiết kế phải đồng bộ (skill quan trọng nhất). Bài 6 đảo ngược hướng đi - từ mã nguồn sang Figma. Và Bài 7 cung cấp cho bạn các skill để mã hóa các quy ước của mình một cách vĩnh viễn. Bây giờ bạn sẽ xây dựng một thứ gì đó thực tế.

Đây là bài tập cuối cùng. Bạn sẽ xây dựng một màn hình sản phẩm hoàn chỉnh bằng cách sử dụng tất cả những gì bạn đã học - và sau đó đánh giá một cách trung thực những gì AI đã xử lý tốt và những gì vẫn cần đến chuyên môn của bạn.

Đến cuối bài học này, bạn sẽ có thể:

• Xây dựng một màn hình sản phẩm hoàn chỉnh bằng cách kết hợp MCP agent, hệ thống thiết kế của bạn và một skill tùy chỉnh
• - Đánh giá kết quả đầu ra dựa trên danh sách kiểm tra chất lượng và xác định những gì cần tinh chỉnh thủ công

Bài tập: Xây dựng trang Settings

Trang Settings rất phù hợp cho bài tập này. Chúng đủ phức tạp để kiểm tra mọi thứ - nhiều loại phần, điều khiển biểu mẫu, công tắc, nút, điều hướng - nhưng đủ cấu trúc để agent có thể tuân theo các quy tắc rõ ràng.

Bạn có thể thay thế bằng bất kỳ màn hình nào phù hợp với công việc của mình: Bảng điều khiển, trang profile, quy trình giới thiệu người dùng mới. Quy trình vẫn giống nhau.

Bước 1: Viết skill

Trước khi tương tác với agent, hãy viết skill cho màn hình bạn đang xây dựng. Dưới đây là template ban đầu:

# Xây dựng trang Settings

## Khi nào sử dụng
Tạo một trang Settings hoàn chỉnh với thanh điều hướng bên, tiêu đề phần,
các điều khiển biểu mẫu và các nút hành động.

## Cấu trúc trang
1. Tạo khung cấp cao nhất "trang Settings" (1440 x 900)
2. Áp dụng bố cục tự động theo chiều ngang:
  - Khung bên trái: thanh điều hướng bên (chiều rộng cố định 280px)
  - Khung bên phải: khu vực nội dung (lấp đầy phần còn lại)
  - Nền: surface/page

## Thanh bên
1. Sử dụng thành phần Navigation/SideNav/Default
2. Các mục menu: Hồ sơ, Thông báo, Bảo mật, Thanh toán, Tích hợp
3. Trạng thái hoạt động: "Hồ sơ" được tô sáng bằng cách sử dụng Navigation/SideNav/Active
4. Nền: surface/sidebar

## Các phần nội dung
Đối với mỗi phần cài đặt:
1. Tạo khung có tên "Phần: [Tên]"
2. Tiêu đề phần: áp dụng kiểu chữ/heading-md
3. Mô tả phần: áp dụng kiểu chữ/body-sm, màu chữ text/secondary
4. Điều khiển: sử dụng Toggle/Default, Input/Text/Default hoặc Select/Default
5. Đường phân cách giữa các phần: sử dụng thành phần Divider/Horizontal
6. Phần Khoảng cách: khoảng cách/2xl giữa các phần

## Hàng nút
Áp dụng skill "Tạo hàng nút" ở cuối khu vực nội dung.

## Những điều KHÔNG nên làm
- KHÔNG mã hóa cứng màu sắc — liên kết tất cả các màu nền với các biến
- KHÔNG tạo các công tắc chuyển đổi tùy chỉnh — sử dụng thể hiện Toggle/Default
- KHÔNG đặt tên khung là "Frame 1", "Group 2" — sử dụng tên mô tả
- KHÔNG đặt thuộc tính phông chữ thủ công — áp dụng kiểu văn bản

Điều chỉnh mọi tên thành phần và biến để phù hợp với hệ thống thiết kế thực tế của bạn.

Bước 2: Đưa prompt cho agent

Với skill đã viết, hãy yêu cầu MCP agent:

Sử dụng skill "Build Settings Page" của tôi để tạo một trang Settings trong
tệp Figma hiện tại của tôi.

Bao gồm các phần sau:
1. Hồ sơ: ô nhập tên hiển thị, ô nhập email, chỗ tải ảnh đại diện
2. Thông báo: bật/tắt thông báo email, bật/tắt thông báo đẩy,
  bật/tắt bản tóm tắt hàng tuần
3. Bảo mật: ô nhập mật khẩu hiện tại, ô nhập mật khẩu mới,
  bật/tắt xác thực hai yếu tố
4. Thanh toán: hiển thị gói dịch vụ (Pro, 12$/tháng), nút phụ "Change Plan"

Áp dụng các biến số hệ thống thiết kế của tôi cho tất cả màu sắc, khoảng cách và kiểu chữ.
Tạo một trang mới có tên "Settings - AI Generated".

Bước 3: Xem xét so với danh sách kiểm tra

Sau khi agent tạo ra kết quả, hãy đánh giá nó dựa trên danh sách kiểm tra này:

✅ Kiểm tra nhanh: Trước khi đọc danh sách kiểm tra, hãy thử tự viết danh sách của riêng bạn từ trí nhớ. Bạn sẽ kiểm tra những gì?

Đáp án: Hãy nhớ lại Bài học 5 - sự đồng bộ của hệ thống thiết kế là điều quan trọng nhất. Sau đó là việc đặt tên lớp từ Bài học 7. Tiếp theo là việc sử dụng thành phần so với các yếu tố được xây dựng thủ công. Nếu bạn nắm được ba điều đó, bạn đang theo dõi các tín hiệu chất lượng cốt lõi.)

Đồng bộ hệ thống thiết kế: - [ ] Tất cả màu sắc được liên kết với các biến (không có giá trị hex được mã hóa cứng) - [ ] Tất cả khoảng cách sử dụng các biến khoảng cách/ (không có giá trị pixel thô) - [ ] Tất cả kiểu chữ sử dụng các kiểu văn bản đã được công bố (không có cài đặt phông chữ thủ công) - [ ] Tất cả các yếu tố tương tác là các thể hiện của thành phần (không được vẽ tay)

Cấu trúc thành phần: - [ ] Các nút chuyển đổi sử dụng Toggle/Default - [ ] Các ô nhập liệu sử dụng Input/Text/Default - [ ] Các nút sử dụng Button/Primary/Default hoặc Button/Secondary/Default - [ ] Các đường phân cách sử dụng Divider/Horizontal - [ ] Thanh điều hướng sử dụng Navigation/SideNav/*

Đặt tên layer: - [ ] Khung cấp cao nhất có tên mô tả - [ ] Các khung phần được đặt tên là "Section:" [Tên]" - [ ] Không có "Frame 1," "Group 2," hoặc tên được tạo tự động - [ ] Thứ tự phân cấp lớp hợp lý (quan hệ cha-con phản ánh cấu trúc trực quan)

Khả năng truy cập: - [ ] Văn bản đáp ứng tỷ lệ tương phản tối thiểu so với nền - [ ] Các phần tử tương tác đủ lớn cho vùng chạm (tối thiểu 44px) - [ ] Các ô nhập liệu có nhãn liên kết - [ ] Thứ tự đọc tuân theo bố cục trực quan (từ trên xuống dưới, từ trái sang phải)

Bạn đã đánh dấu bao nhiêu ô? Trong quá trình thử nghiệm, các chuyên viên có skill và hệ thống thiết kế tốt thường đạt được 70-85% danh sách kiểm tra này ngay từ lần đầu tiên.

Quy tắc 85%

Đây là đánh giá trung thực từ tất cả những người đã thử nghiệm quy trình làm việc này - từ các nhà thiết kế cá nhân đến những công ty như Bitovi:

AI giúp bạn đạt được khoảng 85% mục tiêu.

85% đó thực sự có giá trị. Đó là việc lắp ráp cấu trúc - bố cục, vị trí thành phần, khoảng cách, liên kết biến, thứ bậc lớp. Những thứ quan trọng nhưng không mang tính sáng tạo. Công việc mất một giờ để kéo, căn chỉnh và cấu hình.

15% còn lại là nơi mà chuyên môn thiết kế của bạn phát huy tác dụng:

15% còn lại là skill. Đó là sự khác biệt giữa một màn hình hoạt động tốt và một màn hình được thiết kế có chủ đích. Không một chuyên gia nào có thể nói với bạn rằng khoảng cách giữa phần "Security" và "Billing" của bạn nên lớn hơn vì sự thay đổi nội dung ở đó lớn hơn. Đó mới là tư duy thiết kế.

✅ Kiểm tra nhanh: Một đồng nghiệp nói "Tôi đã thử sử dụng AI agent và kết quả không thể sử dụng được - tôi vẫn phải sửa mọi thứ." Bạn sẽ hỏi những câu hỏi nào?

Câu trả lời: Họ có tham khảo hệ thống thiết kế của họ không? Họ có sử dụng skill nào không? Họ có thư viện thành phần sạch sẽ không? Hầu hết các kết quả "không thể sử dụng được" đến từ việc bỏ qua công việc thiết lập từ Bài học 5 và 7. Agent chỉ tốt khi nhận được hướng dẫn chính xác.

Khi nào nên sử dụng cái gì: Framework quyết định

Sau 8 bài học, đây là phân tích trung thực:

Những nhà thiết kế thu được nhiều giá trị nhất từ ​​các AI agent không phải là những người sử dụng chúng cho mọi thứ. Họ là những người biết công cụ nào phù hợp với từng thời điểm.

Đối thủ cạnh tranh

MCP server của Figma không phải là lựa chọn duy nhất. Điều đáng biết đến:

Google Stitch là lựa chọn thay thế miễn phí mà mọi người đang bàn tán. Nó tạo ra các thiết kế giao diện người dùng hoàn chỉnh từ mô tả bằng văn bản (và giờ là bằng giọng nói). Một nhà phát triển cho biết: "Stitch đã thiết kế một ứng dụng di động hoàn chỉnh nhanh hơn cả khi tôi mô tả những gì mình muốn". Sự kết hợp mạnh mẽ đang nổi lên là Stitch cho thiết kế + Claude Code cho phát triển - không cần đăng ký Figma. Nhưng sự khác biệt về chất lượng là có thật: Figma MCP tạo ra đầu ra tốt hơn vì nó hoạt động trong hệ thống thiết kế hiện có của bạn, các thành phần và quy ước của bạn. Stitch tạo ra các thiết kế một cách độc lập. Nếu bạn có một hệ thống thiết kế hoàn chỉnh, MCP sẽ thắng. Nếu bạn đang bắt đầu từ đầu và muốn tốc độ, Stitch đáng để thử.

Quy trình làm việc dựa trên từng phần là kỹ thuật quan trọng nhất nổi lên từ tuần đầu tiên sử dụng thực tế. Đừng cố gắng tạo toàn bộ trang trong một lần - nó sẽ thất bại. Chia thiết kế của bạn thành các phần nhỏ (tiêu đề, phần chính, lưới thẻ, chân trang) và xây dựng từng phần như một nhiệm vụ riêng biệt. Giữ một file readme tổng quan mô tả cách các phần nhỏ kết nối với nhau. Cách tiếp cận này hiệu quả hơn nhiều so với "hãy xây dựng cho tôi một trang đích".

Cursor, VS Code và các trình soạn thảo code khác cũng có thể sử dụng MCP server của Figma. Nó không chỉ dành riêng cho Claude. Bất kỳ agent nào hỗ trợ giao thức MCP đều có thể đọc và ghi vào Figma canvas của bạn.

Thực tế về giá cả: Gói Figma miễn phí có 6 lượt gọi MCP mỗi tháng - thực tế là không thể sử dụng được. Gói Professional (12 USD/tháng) cho phép bạn 200 lượt gọi mỗi ngày. Nhưng hãy theo dõi việc sử dụng token của bạn - nhiều người dùng đã báo cáo việc nâng cấp lên gói Claude Max vì MCP tiêu tốn token rất nhanh. Một nhà phát triển mô tả sự leo thang chi phí là "vấn đề chi phí đang trở thành một rào cản". Hãy dự trù ngân sách cho cả Figma Professional và một gói LLM có khả năng.

Các bước tiếp theo

Nâng cao kỹ năng thực hành: Viết một skill mới mỗi tuần cho các mẫu thiết kế phổ biến nhất của bạn. Sau một tháng, bạn sẽ có một thư viện bao gồm 80% công việc lặp đi lặp lại của mình.

Khám phá cộng đồng: Thường xuyên truy cập figma.com/community/skills. Các nhóm khác đang giải quyết cùng một vấn đề. Điều chỉnh các skill của họ - đừng sử dụng chúng nguyên trạng.

Vượt qua giới hạn: Thử nghiệm quy trình làm việc đa màn hình. Tạo một trang Settings, sau đó sử dụng cùng một skill trên quy trình giới thiệu người dùng mới. Xem nó hoạt động tốt ở đâu và gặp sự cố ở đâu. Mỗi thất bại sẽ dạy bạn cách viết các skill tốt hơn.

Luôn cập nhật: MCP server là tính năng mới. Hỗ trợ hình ảnh, tạo mẫu, thiết kế đáp ứng - những tính năng này sẽ sớm ra mắt. Khi chúng xuất hiện, mọi thứ bạn đã học được về prompt, hệ thống thiết kế và skill sẽ được áp dụng trực tiếp.

Những điểm chính cần ghi nhớ

• Xây dựng một màn hình hoàn chỉnh bằng cách kết hợp MCP agent, các tài liệu tham khảo hệ thống thiết kế và một skill tùy chỉnh — sau đó xem xét lại dựa trên danh sách kiểm tra chất lượng
• AI giúp bạn hoàn thành 85% công việc. 15% cuối cùng — nhịp điệu hình ảnh, các trường hợp ngoại lệ, sắc thái cảm xúc, tương tác nhỏ — đòi hỏi chuyên môn thiết kế của bạn.
• Sử dụng Figma Make để khám phá, các MCP agent cho công việc sản xuất, chuyển code sang Figma để lập tài liệu và thiết kế thủ công cho công việc sáng tạo và tương tác.
• Google Stitch tạo ra các thiết kế một cách độc lập; Figma MCP hoạt động trong hệ thống tệp và thiết kế hiện có của bạn. Mỗi công cụ có thế mạnh khác nhau cho những nhu cầu khác nhau.
• Những nhà thiết kế được hưởng lợi nhiều nhất từ ​​các AI agent không phải là những người sử dụng chúng cho mọi thứ — mà là những người biết chọn đúng công cụ vào đúng thời điểm.
• AI không thay thế tư duy thiết kế. Nó thay thế việc lắp ráp lặp đi lặp lại. Gu thẩm mỹ, khả năng phán đoán và skill của bạn vẫn tạo nên sự khác biệt cuối cùng.