Bàn giao thiết kế đã là vấn đề đã được giải quyết cho các nhà phát triển con người từ khoảng năm 2016. Zeplin, InVision Inspect, Avocode, Dev Mode gốc của Figma — tất cả đều làm cùng một việc: cung cấp cho nhà phát triển giao diện web nơi họ có thể nhấp vào một nút và đọc các thuộc tính của nó.

Quy trình đó hoàn toàn bị hỏng khi "nhà phát triển" là một agent AI.

Bài viết này giải thích lý do tại sao, những gì agent thực sự cần, và cách cấu trúc quy trình bàn giao tạo ra mã đúng thay vì mã gần đúng. Giải pháp là figmascope — một công cụ dựa trên trình duyệt xuất gói ngữ cảnh có cấu trúc trực tiếp từ tệp Figma của bạn. Để xem quy trình từng bước, hãy xem Figma sang Claude Code hoặc Figma sang Cursor.

Giả định bàn giao thiết kế

Mọi công cụ bàn giao được xây dựng trước năm 2023 đều có cùng một giả định ngầm định: một người dùng ở phía bên kia, đang nhấp xung quanh, đọc các giá trị, đưa ra phán đoán. Nhiệm vụ của công cụ là hiển thị thông tin đủ rõ ràng để một nhà phát triển lành nghề có thể làm việc từ đó mà không phải liên tục chuyển ngữ cảnh trở lại với nhà thiết kế.

Giả định này được tích hợp vào toàn bộ UX của các công cụ này:

Không có gì trong số này là sai. Nó đúng với quy trình nhà phát triển con người. Chỉ là đây là giao diện sai cho một agent.

Những gì agent thực sự cần từ một thiết kế

Một agent AI nhận được nhiệm vụ thiết kế cần:

  1. Một đặc tả mà nó đọc trước khi làm bất cứ điều gì — ràng buộc, phạm vi, quy ước đặt tên token, ghi chú phiên bản. Không được ngầm định bởi việc di chuột qua một bảng; được viết ra một cách rõ ràng.
  2. Từ điển token có kiểu dữ liệu — không phải giá trị hex thô và số pixel, mà là các token có tên, có kiểu với giá trị của chúng. Agent cần biết rằng #d96a3a là color.accent để nó có thể tạo tên class Tailwind hoặc thuộc tính tùy chỉnh CSS đúng.
  3. Cây bố cục toàn màn hình — hệ thống phân cấp của mọi nút, mối quan hệ bố cục của chúng, kích thước của chúng, tham chiếu token của chúng. Không phải từng nút một theo yêu cầu; toàn bộ cây trong bộ nhớ.
  4. Chuỗi hợp nhất — tất cả nội dung văn bản, được chuẩn hóa, với khóa tài nguyên. Không nằm rải rác trên các nút riêng lẻ.
  5. Sự thật trực quan — một render tham chiếu mà agent có thể so sánh đầu ra của nó. Ảnh chụp màn hình thiết kế ở tỷ lệ 2×.
  6. Tên thành phần — các định danh chuẩn mà mã được tạo ra nên sử dụng, không phải tên được bịa ra.

Các công cụ bàn giao truyền thống không cung cấp bất kỳ điều nào trong số này dưới dạng mà agent có thể sử dụng. Ứng dụng figmascope tạo ra tất cả chúng trong một file zip — dán URL Figma của bạn, nhận gói. Không cần upload, không có backend. Định dạng token được đề cập chi tiết tại Xuất Token Thiết Kế cho Agent AI.

Tại sao ảnh chụp màn hình thất bại

Cách giải quyết nhanh nhất mà mọi người thử: xuất PNG từ Figma và chuyển nó cho agent với lệnh nhắc như "triển khai màn hình này." Agent tạo ra mã. Đôi khi trông có vẻ gần đúng. Nhưng:

Mỗi lỗi này nhỏ riêng lẻ. Tổng hợp lại chúng tạo thành một thành phần cần sửa chữa thủ công đáng kể — điều này đánh bại hầu hết thời gian tiết kiệm từ việc sử dụng agent.

Xem tại sao ảnh chụp màn hình thất bại cho AI codegen để xem phân tích chi tiết với ví dụ.

Ảnh chụp màn hình cho agent biết thiết kế trông như thế nào. Ngữ cảnh có cấu trúc cho nó biết thiết kế là gì.

Các công cụ bàn giao truyền thống, được đánh giá

Zeplin

Giao diện chính của Zeplin là một ứng dụng web nơi nhà phát triển kiểm tra thiết kế từng nút. Nó có tính năng "Styleguide" tổng hợp màu sắc và kiểu chữ từ tệp — thứ gần nhất với xuất token. Nó không xuất cây bố cục có thể đọc bởi máy. Tính năng "Connected Components" của nó liên kết các thành phần Storybook với frame Figma, hữu ích cho tài liệu nhưng không giúp agent tạo mã mới.

Figma Dev Mode

Câu trả lời gốc của Figma cho bàn giao. Bảng mã tạo CSS từ các nút được chọn và hiển thị tên Variable khi chúng được thiết lập. Được thiết kế tốt cho nhà phát triển con người. Không hỗ trợ xuất cấp tệp, không tạo cây bố cục, và các đoạn mã của nó chỉ là CSS (không phải token không phụ thuộc vào framework). Yêu cầu ghế Dev Mode.

Avocode

Avocode đã được mua lại bởi Abstract và sau đó ngừng hoạt động vào năm 2022. Được đề cập vì nó vẫn xuất hiện trong kết quả tìm kiếm cho "công cụ bàn giao thiết kế" và tạo ra một số lưu lượng so sánh. Nó không còn khả dụng nữa.

Locofy, Builder.io, Anima

Các công cụ này cố gắng tạo mã framework thực (React, Next.js, HTML) trực tiếp từ thiết kế Figma. Chúng gần hơn với không gian vấn đề — chúng hiểu rằng đầu ra cần là mã, không chỉ là một bảng thuộc tính. Nhưng chúng tạo ra mã bạn triển khai, không phải ngữ cảnh bạn cung cấp cho agent. Sự phân biệt quan trọng: bạn không thể hỏi "Triển khai màn hình Settings, tái sử dụng thành phần UserAvatar tôi đã xây dựng" khi công cụ đang tự tạo mã. Bạn có thể hỏi Claude Code hoặc Cursor khi bạn đã cung cấp cho chúng ngữ cảnh có cấu trúc.

Xem figmascope vs Locofy và figmascope vs Builder.io để so sánh chi tiết.

Bàn giao sẵn sàng cho agent trông như thế nào

Bàn giao sẵn sàng cho agent có ba thuộc tính phân biệt nó với bàn giao truyền thống:

1. Đó là một tạo phẩm tệp, không phải giao diện người dùng

Tạo phẩm bàn giao là một tệp có phiên bản (hoặc tập hợp các tệp) sống trong kho lưu trữ cùng với mã. Không phải là một liên kết chia sẻ yêu cầu đăng nhập. Không phải là một bảng trong ứng dụng web. Một thư mục design/ với các tệp JSON, PNG và Markdown.

Điều này có một số hệ quả:

2. Nó sử dụng dữ liệu có kiểu, không phải văn bản đã render

Token thiết kế trong tokens.json được đánh kiểu — $type: "color", $type: "dimension" — không chỉ là chuỗi trong bảng Markdown. IR bố cục trong screens/*.json có các loại nút rõ ràng (stack, overlay, absolute, leaf) và tham chiếu token sử dụng ký hiệu $ref. Chuỗi trong strings.json có khóa ký hiệu dấu chấm, không chỉ là nhãn có thể đọc được bởi con người.

Dữ liệu có kiểu có nghĩa là agent có thể lập luận về nó theo chương trình: "tất cả các nút có background.$ref == color.surface sử dụng cùng màu nền," không phải "tất cả các nút trông như chúng đang ở cùng nền."

3. Nó bao gồm tài liệu đặc tả mà agent đọc trước

CONTEXT.md là hợp đồng giữa nhà thiết kế và agent. Nó mô tả:

Bàn giao truyền thống không có tương đương. Dev Mode có trường "ghi chú nhà phát triển" cho mỗi frame, nhưng nó được viết tùy ý bởi nhà thiết kế không có cấu trúc. CONTEXT.md được tạo nhất quán từ nội dung thực tế của tệp.

Quy trình bàn giao từng bước

  1. Nhà thiết kế đánh dấu frame sẵn sàng — trong Figma, nhà thiết kế gắn cờ các frame đã sẵn sàng để triển khai (quy ước đặt tên, nhãn "sẵn sàng", bất cứ điều gì nhóm của bạn sử dụng).
  2. Nhà phát triển chạy figmascope — dán URL tệp và PAT tại figmascope.dev, nhấp xuất, tải xuống zip.
  3. Giải nén vào design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Commit design/ vào repo — gói là tạo phẩm bàn giao. PR bao gồm cả gói thiết kế và việc triển khai.
  5. Agent triển khai — trỏ Claude Code hoặc Cursor vào design/CONTEXT.md và JSON màn hình liên quan. Agent tạo mã sử dụng giá trị token, tên thành phần và chuỗi từ gói.
  6. Xem xét và lặp lại — nhà phát triển xem xét so với screens/*.png, ghi chú bất kỳ khoảng trống nào, tinh chỉnh lệnh nhắc.

Khi thiết kế thay đổi, lặp lại từ bước 2. Dấu thời gian _meta.json cho bạn biết khi nào gói được tạo lần cuối so với khi tệp Figma được sửa đổi lần cuối — một kiểm tra độ tươi đơn giản.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Những gì không thay đổi

Bàn giao sẵn sàng cho agent không thay thế việc xem xét thiết kế. Agent triển khai từ ngữ cảnh có cấu trúc; một người vẫn xác minh đầu ra. Trạng thái tương tác, hoạt ảnh, hành vi đáp ứng, khả năng tiếp cận — những điều này đòi hỏi phán đoán mà agent có thể xấp xỉ nhưng không thể đảm bảo từ dữ liệu thiết kế tĩnh một mình.

Ngữ cảnh có cấu trúc cũng không thay thế cuộc trò chuyện giữa nhà thiết kế và nhà phát triển. Nếu một token được đặt tên mơ hồ, hoặc một thành phần hoạt động khác nhau qua các điểm ngắt hơn là frame tĩnh gợi ý, điều đó cần một cuộc trò chuyện. CONTEXT.md nắm bắt những gì trong tệp; nó không suy luận những gì nhà thiết kế dự định cho các trường hợp tệp không đề cập.

Những gì thay đổi: việc triển khai bố cục màn hình tĩnh từ một thiết kế ổn định đi từ một quy trình thủ công kéo dài hàng giờ đến quy trình nhắc và xem xét. Agent xử lý bản dịch cơ học; nhà phát triển xử lý các phán đoán.

Danh sách kiểm tra: bàn giao thiết kế của bạn có sẵn sàng cho agent không?

Nếu hầu hết những điều này còn thiếu, agent sẽ tạo ra mã đòi hỏi nhiều sửa chữa hơn so với bắt đầu từ đầu với ngữ cảnh tốt. Gói mà figmascope tạo ra thỏa mãn tất cả chúng trong một lần xuất. Truy cập blog figmascope để xem các nghiên cứu trường hợp và các phân tích sâu hơn về từng mục trong danh sách kiểm tra, hoặc xem Thay Thế Figma Inspector để so sánh trực tiếp với Dev Mode và plugin.