Thiết kế đầu tiên do Figma agent tạo ra

Agent của bạn đã được kết nối. Giờ thì sao?

🔄 Trong Bài học 3, bạn đã thiết lập Figma MCP Server và xác minh kết nối. Agent của bạn có thể xem cấu trúc file, đọc các thành phần và truy cập token thiết kế của bạn. Hệ thống đã hoạt động.

Bây giờ bạn sẽ sử dụng nó để thực sự xây dựng một thứ gì đó.

Bài học này sẽ hướng dẫn bạn từng bước tạo ra thiết kế do agent tạo ra đầu tiên. Bạn cũng sẽ tìm hiểu về hai khái niệm quan trọng thay đổi cách bạn suy nghĩ về thiết kế do AI tạo ra: Vòng lặp tự phục hồi và đầu ra không xác định.

Chia sẻ file của bạn với agent

Mọi tương tác MCP bắt đầu bằng việc chia sẻ URL file Figma. Sao chép URL từ trình duyệt của bạn - nó trông tương tự như https://www.figma.com/design/AbCdEfGhIjKl/My-Project-Name.

Dán URL vào cuộc trò chuyện của bạn:

Tôi đang làm việc trong file Figma này: [dán URL]
Tạo một biểu mẫu đăng nhập trên trang 'Auth Screens'.

Luôn luôn chỉ rõ trang. Nếu không có hướng dẫn, agent sẽ chọn ngẫu nhiên một trang - và có thể đó không phải là cái bạn muốn.

Mẫu thiết kế đầu tiên do agent tạo ra

Hãy cùng xây dựng một biểu mẫu đăng nhập. Đây là một prompt hoạt động tốt:

Trong file Figma của tôi [URL], trên trang đầu tiên, hãy tạo một biểu mẫu đăng nhập:
- Một khung có tên "Login Screen" với kích thước 390x844 (kích thước iPhone 14)
- Đặt một thẻ màu trắng ở giữa khung với khoảng cách lề 24px
- Nội dung thẻ từ trên xuống dưới:
  - Tiêu đề "Welcome Back", in đậm 24px
  - Văn bản phụ "Sign in to your account", màu xám 14px
  - Khoảng cách 24px
  - Trường nhập email với nhãn "Email address"
  - Trường nhập mật khẩu với nhãn "Password"
  - Khoảng cách 16px giữa các trường
  - Một nút toàn chiều rộng có nhãn "Sign In", nền xanh lam, chữ trắng
  - Khoảng cách 12px
  - Liên kết văn bản "Forgot password?", căn giữa, màu xám

Gửi prompt này. Sau đó quan sát.

✅ Kiểm tra nhanh: Trước khi gửi prompt, hãy đếm các chi tiết cụ thể: Tên khung, kích thước khung, khoảng cách lề thẻ, kích thước tiêu đề, độ đậm phông chữ, kích thước văn bản phụ, màu văn bản phụ, giá trị khoảng cách, nhãn trường, văn bản nút, màu nút, văn bản liên kết, căn chỉnh liên kết. Mỗi chi tiết cụ thể là một quyết định mà agent ít phải đoán hơn. Prompt này chứa bao nhiêu chi tiết cụ thể?

Câu trả lời: Ít nhất 14 ràng buộc khác nhau.

Điều gì diễn ra phía sau?

Agent không tạo ra thiết kế trong một lần. Đây là trình tự:

1. Đọc file — lấy cấu trúc file

2. Tạo khung — xây dựng "Login Screen" ở kích thước 390x844

3. Thêm các phần tử — thẻ, tiêu đề, ô nhập liệu, nút, từng cái một

4. Áp dụng thuộc tính — khoảng cách lề, kích thước phông chữ, màu sắc, khoảng cách

5. Chụp ảnh màn hình — ghi lại những gì nó đã xây dựng

6. Đánh giá — so sánh ảnh chụp màn hình với mô tả của bạn

7. Sửa lỗi — sửa bất kỳ lỗi nào

Các bước 5-7 là vòng lặp tự phục hồi.

Vòng lặp tự phục hồi

Đây là điều phân biệt các MCP agent với việc tạo code đơn giản.

Sau khi tạo thiết kế, agent sẽ chụp ảnh màn hình kết quả và đánh giá nó so với mô tả của bạn. Có thể khoảng cách giữa các trường là 24px thay vì 16px mà bạn yêu cầu. Agent nhận thấy, điều chỉnh, chụp ảnh màn hình lại, đánh giá lại.

Vòng lặp này có thể chạy nhiều lần. Tạo, chụp ảnh màn hình, đánh giá, sửa, chụp ảnh màn hình, đánh giá, hoàn tất.

Thực tế phũ phàng: Trong tuần đầu tiên sau khi ra mắt, vòng lặp tự phục hồi chỉ là lời hứa hẹn chứ chưa được chứng minh. Chưa ai chia sẻ ví dụ được xác nhận về việc tự động sửa lỗi hoàn toàn. Kỹ thuật thực tế gần nhất: Yêu cầu Claude "phê bình những gì bạn vừa xây dựng và thực hiện lại". Một nhà phát triển đã chia sẻ quy trình làm việc trong đó họ để Claude xây dựng, sau đó yêu cầu nó xem xét và lặp lại - về cơ bản là một vòng lặp tự phục hồi thủ công. Nó hoạt động, nhưng không phải là phép màu tự động sửa lỗi như quảng cáo.

Điểm mấu chốt: Mỗi lần lặp lại đều sử dụng các lệnh gọi MCP. Một thành phần đơn giản có thể sử dụng 8-10 lệnh gọi. Một vòng lặp tự phục hồi chạy 3 lần có thể sử dụng 25-30 lần. Với 200 lần gọi/ngày trên gói Professional, đó là ngân sách cho 6-8 thiết kế phức tạp mỗi ngày.

✅ Kiểm tra nhanh: Tại sao vòng lặp tự phục hồi lại quan trọng?

Câu trả lời: Nó giúp chuyển đổi đầu ra của agent từ bản nháp thô ban đầu thành sản phẩm gần với yêu cầu của bạn hơn. Nếu không có nó, bạn sẽ nhận được kết quả tạo ra một lần duy nhất giống như Figma Make - với nó, agent có thể phát hiện và tự sửa lỗi.

Độ chính xác 85% có ý nghĩa gì?

Hãy đặt ra những kỳ vọng thực tế. Sau vòng lặp tự phục hồi, một agent được hướng dẫn tốt thường tạo ra kết quả có độ chính xác khoảng 85% trên các file được cấu trúc tốt. Nhà thiết kế Brian Lovin đã báo cáo con số này sau khi thử nghiệm rộng rãi, và nó phù hợp với những gì hầu hết mọi người trải nghiệm.

Con số 85% đó có nghĩa là:

Những gì agent thường làm đúng:

• Cấu trúc bố cục tổng thể

• Thứ tự ưu tiên của các phần tử (tiêu đề → văn bản phụ → các trường → nút)

• Khoảng cách gần với những gì bạn đã chỉ định (trong vòng 2-4px)

• Nội dung văn bản chính xác như đã viết

• Áp dụng màu sắc cơ bản

Những gì bạn thường cần sửa:

• Điều chỉnh khoảng cách nhỏ (agent có thể dùng 14px trong khi bạn nói 16px)

• Sự không nhất quán về độ đậm hoặc kiểu chữ

• Bán kính góc trên các phần tử cụ thể

• Độ đậm nhạt trực quan giữa các phần (agent không "cảm nhận" được thứ tự ưu tiên theo cách bạn cảm nhận)

• Quy ước đặt tên cho các layer (agent đặt tên các layer theo chức năng, không theo hệ thống của nhóm bạn)

Đạt 85% trong 2 phút là một điểm khởi đầu tốt. 15% còn lại sẽ mất của bạn 5-10 phút để tinh chỉnh thủ công. Hãy so sánh điều đó với việc xây dựng cùng một màn hình từ đầu - có lẽ mất 20-30 phút.

Để dễ hình dung hơn: Một nhà phát triển đã xây dựng một bảng điều khiển thị trường dự đoán hoàn chỉnh — dark theme, card thị trường, phần portfolio — chỉ trong một prompt. Một người khác đã kết nối hệ thống thiết kế Material 3 và tạo ra một màn hình Android thực tế với các token và component chính xác chỉ bằng một cú nhấp chuột. Đây không phải là những bản demo được chọn lọc kỹ càng - mà là những gì bạn có thể mong đợi một cách hợp lý với các prompt tốt và một hệ thống thiết kế sạch sẽ.

Nhưng đây là mặt trái: Một nhà thiết kế đã cố gắng trích xuất toàn bộ hệ thống thiết kế từ một trang web chỉ bằng một prompt. Các biến được tạo đúng cách, nhưng "không có component nào chính xác. Ngay cả các nút cũng vậy". Hệ thống đã đọc sai màu sắc từ ảnh chụp màn hình và tạo ra cấu trúc component sai.

Bài học rút ra: Hãy bắt đầu với các component riêng lẻ, chứ không phải toàn bộ hệ thống.

Thời gian tiết kiệm được: Khoảng 50-60% trên các màn hình đơn giản.

Kết quả không xác định

Chạy cùng một prompt hai lần và bạn sẽ nhận được kết quả khác nhau. Đây không phải là lỗi - mà là cách các mô hình AI hoạt động. Mỗi lần tạo ra đều liên quan đến các lựa chọn xác suất, vì vậy mô hình sẽ chọn một đường dẫn hơi khác nhau mỗi lần.

Đối với thiết kế, điều này có nghĩa là bố cục, khoảng cách và lựa chọn component khác nhau giữa các lần chạy.

Cách sử dụng: Chạy cùng một prompt 2-3 lần. So sánh kết quả. Chọn phiên bản gần nhất với yêu cầu của bạn, sau đó tinh chỉnh.

Cách giảm thiểu sự khác biệt: Prompt cụ thể hơn sẽ giảm thiểu sự khác biệt. "Một nút màu xanh" có nhiều khả năng được hiểu theo nhiều cách. "Một nút có nền màu #2563EB, chữ màu trắng #FFFFFF, khoảng cách lề 12px, 24px, bán kính viền 8px" hầu như không có khả năng đó.

Ví dụ minh họa: Trước và sau khi tinh chỉnh

Đây là một tình huống thực tế. Bạn gửi yêu cầu tạo banner thông báo:

Prompt ban đầu:

Tạo một banner thông báo ở đầu trang. Nền xanh dương,
chữ trắng, biểu tượng chuông ở bên trái và nút X để đóng ở bên phải.

Kết quả mà agent tạo ra: Một thanh màu xanh dương ở đầu trang với văn bản và một nút X. Nhưng biểu tượng chuông quá lớn, văn bản không được căn giữa theo chiều dọc và không có khoảng đệm bên trong banner.

Prompt đã tinh chỉnh:

Sửa banner thông báo:
- Đặt khoảng đệm thành 12px 16px
- Làm cho biểu tượng chuông có kích thước 20x20px
- Căn giữa tất cả các phần tử trong banner theo chiều dọc
- Thêm khoảng cách 8px giữa biểu tượng và văn bản
- Làm cho nút X có kích thước 16x16px, màu xanh nhạt khi di chuột

Sau khi tinh chỉnh: Banner trông có chủ đích. Khoảng cách, căn chỉnh và tỷ lệ đều đặn. Tổng thời gian thực hiện vẫn chưa đến 1 phút.

Đây là quy trình làm việc: Prompt → đánh giá → tinh chỉnh. Không có prompt → chấp nhận. Agent là cộng tác viên, không phải nhà cung cấp giao sản phẩm hoàn chỉnh.

✅ Kiểm tra nhanh: Bạn chạy cùng một biểu mẫu đăng nhập ba lần và nhận được ba thiết kế hơi khác nhau. Đây có phải là vấn đề không?

Đáp án: Không - điều này là bình thường. Kết quả đầu ra của AI không mang tính xác định. Hãy tận dụng điều này: So sánh các biến thể, chọn biến thể tốt nhất và tinh chỉnh từ đó.

5 quy tắc để tạo prompt agent tốt hơn

1. Đặt tên cho khung và trang của bạn. "Trên trang 'Dashboard', trong khung 'Sidebar'" tốt hơn là "ở đâu đó trong file."

2. Chỉ định kích thước. "Khung 390x844" cho agent biết chính xác những gì cần xây dựng. Nếu không có điều này, nó sẽ chọn một khung mặc định.

3. Liệt kê nội dung từ trên xuống dưới. Cấu trúc prompt theo một chồng dọc - tiêu đề, sau đó là phần chính, sau đó là các tính năng, rồi đến footer. Điều này phù hợp với cách các agent xây dựng trong Figma.

4. Tham chiếu các thành phần hiện có. "Sử dụng thành phần 'Button/Primary'" tốt hơn là "thêm một nút màu xanh". Agent có thể lấy các thành phần từ thư viện của bạn.

5. Nêu rõ các giá trị cụ thể. Mọi giá trị không được nêu rõ đều là giá trị mà agent đoán. Kích thước phông chữ, màu sắc, khoảng cách, bán kính viền - hãy nêu rõ chúng.

Thực hành: Xây dựng hai thành phần

Tạo mỗi thành phần bằng cách sử dụng agent được kết nối MCP của bạn. Sau mỗi thành phần, hãy đánh giá và tinh chỉnh bằng một prompt tiếp theo:

Thành phần 1 — Avatar kèm tên: Avatar hình tròn (48x48), tên in đậm ở bên phải và phụ đề màu xám bên dưới tên. Khoảng cách 12px giữa avatar và văn bản.

Thành phần 2 — Thẻ thống kê: Thẻ có số lớn (in đậm 48px), nhãn màu xám bên dưới (14px) và biểu tượng mũi tên màu xanh lá cây nhỏ hướng lên bên cạnh số, biểu thị sự thay đổi tích cực.

Đối với mỗi thành phần, hãy ghi chú: Agent đã sử dụng bao nhiêu lần gọi MCP? Tỷ lệ phần trăm nào cảm thấy chính xác trong lần chạy đầu tiên? Cần sửa chữa những gì?

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

• Chia sẻ URL file Figma của bạn, chỉ định trang và khung hình mà agent nên làm việc

• Vòng lặp tự phục hồi (tạo → chụp ảnh màn hình → đánh giá → sửa) là điều làm cho các MCP agent chính xác hơn so với việc tạo một lần duy nhất

• Độ chính xác dự kiến ​​khoảng 85% đối với các file được cấu trúc tốt — 15% còn lại cần đến con mắt thiết kế của bạn

• Kết quả không xác định có nghĩa là cùng một prompt, nhưng kết quả khác nhau mỗi lần.

• Hãy sử dụng nó để tạo sự đa dạng; giảm thiểu nó bằng các giá trị cụ thể

• Prompt càng cụ thể = agent càng ít phải đoán = kết quả càng tốt. Đặt tên cho các khung của bạn, nêu rõ kích thước, liệt kê nội dung từ trên xuống dưới

• Tiết kiệm thời gian ròng: Khoảng 50-60% trên các màn hình đơn giản so với việc xây dựng từ đầu