Giúp Figma AI sử dụng hệ thống thiết kế của bạn

Vấn đề lớn nhất trong thiết kế AI

🔄 Tóm tắt nhanh: Trong Bài học 4, bạn đã tạo ra thiết kế đầu tiên của mình với MCP agent - và có lẽ đã nhận thấy kết quả trông… ổn nhưng chưa hoàn hảo. Khoảng cách giữa "ổn" và "sẵn sàng để sử dụng" hầu như luôn giống nhau: Agent đã bỏ qua hệ thống thiết kế của bạn. Bài học này sẽ khắc phục điều đó.

Đây là sự thật khó chịu về các AI agent và thiết kế: Nếu để chúng tự hoạt động, chúng sẽ hardcode mọi thứ. Màu sắc trở thành giá trị thập lục phân. Khoảng cách trở thành số pixel. Kiểu chữ trở thành kích thước phông chữ thô. Hệ thống thiết kế được bạn duy trì cẩn thận? Agent không biết nó tồn tại trừ khi bạn cho nó biết.

Đây là bài học phân biệt những nhà thiết kế nhận được đầu ra AI hữu ích với những nhà thiết kế nhận được sản phẩm rác rưởi. Như một nhà thiết kế người Nhật đã nói: "Chất lượng đầu ra của AI phụ thuộc vào cách bạn viết skill - không phải prompt, mà là chất lượng của đặc tả thiết kế". Đó là sự thấu hiểu. Prompt chỉ là yêu cầu. Đặc tả hệ thống thiết kế mới là yếu tố quyết định xem đầu ra có thể sử dụng được hay không.

Sau khi hoàn thành bài học này, bạn sẽ có thể:

• Xác định các giá trị được hardcode trong đầu ra của AI và hiểu tại sao chúng lại là vấn đề

• Viết những câu lệnh buộc các agent phải tham chiếu đến các token thiết kế, biến và thư viện thành phần của bạn

Tại sao các agent lại hardcode (và lý do điều đó quan trọng)?

Khi bạn yêu cầu một agent "tạo một biểu mẫu đăng nhập với một nút màu xanh lam", nó sẽ làm những gì mà bất kỳ hệ thống hợp lý nào cũng sẽ làm: Chọn một giá trị hex màu xanh lam và áp dụng nó. Kết quả trông ổn. Vấn đề không thể nhìn thấy cho đến khi ai đó thay đổi bảng màu thương hiệu - và nút đó vẫn bị đóng băng ở giá trị được hardcode trong khi mọi thành phần do con người xây dựng đều tự động cập nhật.

Đây là sự khác biệt giữa kết quả được hardcode và kết quả được căn chỉnh theo hệ thống thiết kế:

Kết quả được hardcode (kết quả mặc định mà hệ thống tạo ra):

Button frame:
  Fill: #2563EB
  Corner radius: 8px
  Padding: 12px 24px
  Text: Inter, 14px, #FFFFFF

Kết quả được căn chỉnh theo hệ thống thiết kế (kết quả bạn thực sự muốn):

Button frame:
  Fill: brand/primary-500 (variable)
  Corner radius: radius/md (variable)
  Padding: spacing/sm spacing/lg (variables)
  Text: typography/button-md (style)
  Uses component: Buttons/Primary/Default (instance)

Kết quả trực quan giống nhau. Nhưng việc bảo trì hoàn toàn khác nhau. Phiên bản đầu tiên là một quả bom hẹn giờ. Phiên bản thứ hai hoạt động và tương thích với hệ thống thiết kế của bạn.

✅ Kiểm tra nhanh: Hệ thống thiết kế của bạn có một biến gọi là surface/card dành cho nền thẻ. Một agent tạo ra một thẻ với màu nền #FFFFFF. Nó trông giống hệt các thẻ trong hệ thống thiết kế của bạn. Điều này có chấp nhận được không?

Câu trả lời: Không. Ngay cả khi kết quả hiển thị giống hệt nhau hôm nay, màu nền #FFFFFF được hardcode sẽ không cập nhật nếu bạn thay đổi bề mặt/thẻ — ví dụ, khi triển khai chế độ tối. Biến mới là điểm mấu chốt.

Hệ thống lộn xộn tạo ra kết quả lộn xộn

Nếu hệ thống thiết kế của bạn lộn xộn, không có prompt nào có thể cứu bạn.

Bitovi đã thử nghiệm Figma MCP server với 6 nhiệm vụ thiết kế khác nhau. Kết quả của họ: Độ chính xác 85-90% trên các file được cấu trúc tốt. Còn trên các file lộn xộn? Nỗ lực ban đầu của monday.com đã thất bại hoàn toàn. Agent không thể tìm thấy các thành phần, không thể khớp tên biến, không thể tuân theo quy ước đặt tên không tồn tại.

"Cấu trúc tốt" có nghĩa là gì trong thực tế:

Hãy nghĩ theo cách này: Agent xử lý file Figma của bạn như tài liệu. Nếu tài liệu của bạn lộn xộn - các layer không được đặt tên, các biến chưa được công bố, các thành phần nằm rải rác trên 15 trang mà không có quy tắc đặt tên nào - hệ thống sẽ đọc mớ hỗn độn đó và tạo ra kết quả tương ứng.

Trước khi bắt đầu tạo yêu cầu, hãy dành 30 phút để kiểm tra:

• Các biến màu của bạn đã được công bố chưa? Được đặt tên nhất quán chưa?

• Các thành phần của bạn có tuân theo thứ tự phân cấp Category/Variant/State rõ ràng không?

• Các giá trị khoảng cách và kích thước của bạn có được ghi lại dưới dạng biến, chứ không chỉ được áp dụng dưới dạng số thô không?

Đây không phải là việc làm vô bổ. Đây là bước chuẩn bị mang lại lợi tức đầu tư cao nhất cho thiết kế hỗ trợ bởi AI.

Cách tham chiếu hệ thống thiết kế của bạn trong các prompt

Điều quan trọng là phải rõ ràng. Agent không đoán xem nên sử dụng hệ thống thiết kế nào. Chúng không quét file của bạn và suy ra các quy ước của bạn. Bạn phải cho chúng biết.

Bước 1: Đặt tên cho thư viện của bạn

Bắt đầu mỗi prompt thiết kế bằng cách khai báo những gì người dùng nên sử dụng:

Sử dụng hệ thống thiết kế của tôi:
- Thư viện thành phần: "Thành phần cốt lõi" (được xuất bản trong file này)
- Biến màu: sử dụng bộ sưu tập "brand/" và "surface/"
- Biến khoảng cách: sử dụng bộ sưu tập "spacing/"
- Kiểu chữ: sử dụng kiểu chữ đã được xuất bản, không đặt phông chữ thủ công

Bước 2: Chỉ định các thành phần, không phải mô tả

Đừng mô tả hình dạng của một thứ gì đó. Hãy cho người dùng biết thành phần nào cần sử dụng.

Sai: "Thêm một trường nhập văn bản với nhãn phía trên, đường viền và văn bản giữ chỗ"

Đúng: "Sử dụng thành phần Input/Text/Default từ thư viện của tôi. Đặt nhãn là 'Email address' và văn bản giữ chỗ là 'you@example.com'"

Yêu cầu đầu tiên mời người dùng xây dựng một trường nhập văn bản từ đầu - với các giá trị được hardcode. Tùy chọn thứ hai hướng dẫn hệ thống lấy thành phần hiện có của bạn, vốn đã có sẵn kiểu dáng, trạng thái và hành vi phù hợp.

✅ Kiểm tra nhanh: Bạn muốn hệ thống thêm thanh điều hướng vào trang của mình. Thư viện của bạn có một thành phần tên là Navigation/TopNav/Default. Tùy chọn nào tốt hơn? A) "Tạo một thanh điều hướng ngang ở đầu trang với logo, liên kết và nút CTA" hoặc B) "Chèn thành phần Navigation/TopNav/Default từ thư viện của tôi vào đầu khung."

Đáp án: B. Phương án A mô tả giao diện tổng quát của thanh điều hướng. Phương án B sử dụng thanh điều hướng của bạn - với màu sắc, khoảng cách và kiểu chữ đã được thiết lập sẵn.

Bước 3: Thêm quy tắc chống hardcode

Sau khi bạn đã tham chiếu thư viện của mình, hãy thêm các ràng buộc rõ ràng:

Quy tắc:
- KHÔNG BAO GIỜ sử dụng màu hex được hardcode — luôn tham chiếu các biến màu
- KHÔNG BAO GIỜ đặt giá trị pixel cho khoảng cách — sử dụng khoảng cách/biến
- KHÔNG BAO GIỜ đặt thuộc tính phông chữ thủ công — áp dụng kiểu văn bản
- Nếu một thành phần tồn tại trong thư viện của tôi, hãy sử dụng thể hiện — đừng tạo lại nó

Những quy tắc này nghe có vẻ thẳng thừng. Đó chính là điểm mấu chốt. Các agent tuân theo hướng dẫn trực tiếp đáng tin cậy hơn là hướng dẫn ngụ ý.

Bước 4: Chỉ định quy ước đặt tên

Hãy cho agent biết cách đặt tên cho những gì nó tạo ra:

Quy ước đặt tên:
- Layer: mô tả nội dung, không phải cấu trúc (ví dụ: "Hero Section" chứ không phải "Frame 1")
- Thành phần: Danh mục/Biến thể/Trạng thái (ví dụ: "Card/Product/Hover")
- Khung bố cục tự động: bao gồm gợi ý hướng (ví dụ: "Form Fields (Vertical)")

Điều này có vẻ như là quản lý chi tiết. Đúng vậy! Và nó hiệu quả.

Ví dụ minh họa: Thẻ Settings

Hãy xem toàn bộ prompt và sự khác biệt mà nó tạo ra.

Prompt KHÔNG có tham chiếu hệ thống thiết kế:

Tạo một thẻ settings với tiêu đề, mô tả, công tắc chuyển đổi,
và một đường phân cách ở phía dưới.

Kết quả đầu ra của agent: Một khung với màu nền #F9FAFB, khoảng cách lề 12px, tiêu đề in đậm Inter 16px, mô tả thường Inter 14px, hình dạng nút chuyển đổi vẽ tay và đường viền dưới #E5E7EB 1px. Trông khá ổn. Nhưng không có gì phù hợp với hệ thống thiết kế của bạn.

Prompt kèm theo tham chiếu hệ thống thiết kế:

Tạo thẻ settings sử dụng hệ thống thiết kế của tôi:

Các thành phần cần sử dụng:
- Container thẻ: sử dụng thành phần "Card/Surface/Default"
- Tiêu đề: áp dụng kiểu chữ "typography/heading-sm"
- Mô tả: áp dụng kiểu chữ "typography/body-sm"
- Công tắc: sử dụng thành phần "Toggle/Default" từ thư viện của tôi
- Đường phân cách: sử dụng thành phần "Divider/Horizontal"

Biến:
- Màu nền thẻ: surface/card-primary
- Khoảng cách lề thẻ: spacing/lg
- Khoảng cách giữa tiêu đề và mô tả: spacing/xs
- Khoảng cách giữa mô tả và công tắc: spacing/md

Quy tắc:
- KHÔNG hardcode bất kỳ màu hex hoặc giá trị pixel nào
- Sử dụng bố cục tự động cho tất cả các container
- Đặt tên các layer một cách mô tả (ví dụ: "Settings Toggle Card")

Kết quả đầu ra của agent: Một thể hiện Card/Surface/Default với biến surface/card-primary chính xác được áp dụng, kiểu chữ được căn chỉnh đúng khoảng cách, một ví dụ thực tế của thành phần Toggle/Default và một thành phần Divider/Horizontal. Mỗi giá trị đều liên kết trở lại hệ thống thiết kế của bạn. Thay đổi màu sắc thương hiệu của bạn, và thẻ này sẽ tự động cập nhật.

Sự khác biệt là một trời một vực. Cùng một prompt, nhưng chất lượng đầu ra khác biệt đáng kể.

✅ Kiểm tra nhanh: Bạn xem lại kết quả của trình biên dịch và nhận thấy nó đã sử dụng typography/heading-sm cho tiêu đề (đúng) nhưng lại đặt văn bản mô tả thành Inter, 14px theo cách thủ công thay vì typography/body-sm. Điều gì đã sai?

Câu trả lời: Trình biên dịch đã thực hiện một phần hướng dẫn của bạn nhưng lại sử dụng hardcode cho một phần tử. Điều này khá phổ biến. Hãy kiểm tra mọi phần tử so với hệ thống thiết kế của bạn - trình biên dịch không phải lúc nào cũng áp dụng các quy tắc của bạn một cách nhất quán trên toàn bộ thành phần. Hãy tạo lại hoặc sửa thủ công kiểu văn bản mô tả.

Thực hành: Kiểm tra và viết lại

Lấy một trong những prompt bạn đã viết trong Bài học 4 cho thiết kế do trình biên dịch tạo ra đầu tiên của bạn. Bây giờ hãy viết lại nó:

1. Thêm khai báo thư viện ở đầu

2. Thay thế bất kỳ mô tả trực quan nào ("nút màu xanh") bằng các tham chiếu thành phần (Button/Primary/Default)

3. Thay thế bất kỳ mô tả kích thước/màu sắc nào bằng tên biến

4. Thêm các quy tắc chống hardcode

5. Chạy cả hai prompt. So sánh kết quả cạnh nhau.

Phiên bản được viết lại sẽ tạo ra đầu ra mà bạn thực sự có thể triển khai - hoặc ít nhất là đầu ra chỉ cần vài phút để dọn dẹp thay vì hàng giờ.

Khi nào hệ thống thiết kế của bạn chưa sẵn sàng?

Điều gì sẽ xảy ra nếu bạn không có một hệ thống thiết kế được cấu trúc tốt? Hãy bắt đầu từ những việc nhỏ:

1. Công bố màu sắc của bạn dưới dạng biến — thậm chí chỉ là màu thương hiệu và màu trung tính

2. Tạo 5-10 thành phần cốt lõi — nút, ô nhập liệu, thẻ, điều hướng

3. Đặt tên chúng một cách nhất quán — chọn một quy ước và tuân thủ nó

4. Công bố kiểu chữ của bạn — tiêu đề, nội dung, chú thích là tối thiểu

Bạn không cần một hệ thống hoàn chỉnh. Bạn cần đủ để AI agent tham khảo. 5 thành phần được đặt tên tốt và công bố sẽ cho kết quả tốt hơn 200 thành phần không được đặt tên và nằm rải rác.

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

• Các AI agent hardcode mọi thứ theo mặc định — màu thập lục phân, kích thước pixel, giá trị phông chữ thô — trừ khi bạn chỉ định rõ ràng cho chúng sử dụng hệ thống thiết kế của bạn

• Hệ thống thiết kế lộn xộn sẽ tạo ra đầu ra AI lộn xộn. Hãy làm sạch việc đặt tên, công bố các biến của bạn, sắp xếp những thành phần của bạn trước khi đưa ra prompt. Mỗi prompt nên khai báo thư viện của bạn, đặt tên cho các thành phần cụ thể, tham chiếu những biến theo tên và bao gồm các quy tắc chống hardcode.

• Sự khác biệt giữa đầu ra được hardcode và đầu ra phù hợp với hệ thống thiết kế là sự khác biệt giữa các bản phác thảo dùng một lần và sản phẩm sẵn sàng cho sản xuất.

• Bạn không cần một hệ thống thiết kế hoàn hảo — bạn cần một hệ thống nhất quán với các biến đã được công bố và những thành phần được đặt tên.

• Luôn kiểm tra đầu ra của agent từng phần một. Các agent thường tuân theo hướng dẫn một phần nhiều hơn bạn nghĩ.