Context đang trở thành nút thắt cổ chai trong phát triển có hỗ trợ AI. Không phải khả năng mô hình. Các mô hình đang cải thiện đủ nhanh để chúng thường xuyên không phải là ràng buộc. Điều giới hạn chất lượng code do AI tạo ra là chất lượng context mà những mô hình đó nhận được.

Đối với quy trình Figma sang code, context có hai dạng về cơ bản khác nhau: pixel context (screenshot, ảnh được render) và structured context (IR có kiểu, token, quan hệ ngữ nghĩa). Đây không chỉ là các định dạng khác nhau cho cùng thông tin. Chúng là các danh mục đầu vào khác nhau, với các thuộc tính khác nhau, các đặc tính mất mát khác nhau và các trần khác nhau về những gì agent có thể tạo ra từ chúng.

Ngành công nghiệp vẫn chủ yếu sử dụng pixel context. Đây là sai lầm. figmascope xuất structured context — đầu vào đúng ngay từ đầu.

Pixel context là gì

Pixel context là bất kỳ biểu diễn raster hóa nào của thiết kế: screenshot xuất từ Figma, PNG từ "Export frame", render từ công cụ thiết kế. Đó là những gì bạn nhận được khi nhấn Cmd+Shift+4 trên canvas Figma của bạn.

Các LLM có khả năng nhìn có thể xử lý pixel context một cách ấn tượng. Chúng nhận ra các pattern UI, xác định vùng bố cục, suy ra các loại component từ ngoại hình và tạo ra code hợp lý từ ảnh một mình. Nếu bạn đã sử dụng Claude hoặc GPT-4V để chuyển screenshot sang code, bạn đã thấy điều này. Các đầu ra trông đúng thường xuyên hơn bạn mong đợi.

Nhưng "trông đúng" và "là đúng" không giống nhau, và khoảng cách giữa chúng là nơi tuân thủ hệ thống thiết kế, độ trung thực token, danh tính component và khả năng tái tạo đều tồn tại.

Structured context là gì

Structured context là biểu diễn có kiểu, có thể đọc bởi máy giữ nguyên ngữ nghĩa của thiết kế: mỗi phần tử là gì, không chỉ trông như thế nào. Nó bao gồm:

IR của figmascope là điều này. Mỗi node trong JSON theo màn hình có kind, name, absoluteBoundingBox, children, fill được giải quyết thành tham chiếu token khi có, các thuộc tính auto-layout nếu áp dụng và componentId trên các instance. Đó là cây thiết kế được làm rõ ràng.

Pixel context cho agent biết thiết kế trông như thế nào. Structured context cho nó biết thiết kế có nghĩa gì. Coding agent cần ý nghĩa để viết code, không phải ngoại hình. Ngoại hình là thứ visual test dùng cho.

Những gì bị mất trong chiều từ pixel sang có cấu trúc

Chế độ thất bại cốt lõi của pixel context là mất thông tin không thể đảo ngược. Khi Figma render một frame sang PNG, nó loại bỏ chính xác thông tin quan trọng nhất cho tạo code:

Cây layer sụp đổ. Không còn "nhóm ba mục với khoảng cách 8px". Có một vùng pixel gợi ý một nhóm. Agent phải tái tạo cấu trúc cây từ bằng chứng thị giác, và việc tái tạo là xấp xỉ. Nó sẽ sai một tỷ lệ phần trăm thời gian. Tỷ lệ đó tăng khi thiết kế trở nên phức tạp hơn.

Token binding biến mất. Nền màu cam ánh xạ sang color/action/primary trở thành #FF6B00. Agent tạo ra hex hardcode. Nếu màu sắc của bạn thay đổi, hoặc nếu bạn hỗ trợ dark mode, hoặc nếu bạn cần kiểm tra việc sử dụng token, giá trị hardcode đó là trách nhiệm.

Danh tính component biến mất. Bốn instance của cùng một card component là bốn hình chữ nhật có vẻ tương tự. Agent có thể tạo ra một component có thể tái sử dụng hoặc bốn khối tương tự nhưng không giống nhau, tùy thuộc vào bao nhiêu sự tương đồng cấu trúc nó suy ra. Bạn muốn đầu ra có thể dự đoán; bạn nhận được đầu ra xác suất.

Mục đích bố cục mơ hồ. Đây là flex row hay grid? Khoảng cách giữa các mục là gap hay margin hay padding trên mỗi mục? Pixel không nói. Agent chọn. Các lựa chọn khác nhau giữa các lần chạy.

Pipeline Figma → React, có và không có cấu trúc

Xem xét con đường từ Figma sang React sản xuất.

Với pixel context: Xuất PNG. Dán vào Claude. Nhận JSX. Xem xét JSX để đúng đắn. Nhận thấy các giá trị hardcode. Nhận thấy cấu trúc component sai. Prompt để sửa. Lặp lại. Cuối cùng nhận được thứ gì đó hợp lý. Chỉnh sửa tay để khớp với hệ thống thiết kế. Giao hàng. Màn hình tiếp theo: lặp lại từ đầu vì đầu ra của lần chạy trước không kết hợp được.

Với structured context: Xuất bundle (một cú nhấp, chạy trong trình duyệt). Truyền CONTEXT.md + IR màn hình cho Claude với system prompt chỉ định framework và quy ước hệ thống thiết kế. Nhận JSX sử dụng tên token của bạn, tên component của bạn, cấu trúc bố cục đúng. Xem xét để đúng đắn. Giao hàng. Màn hình tiếp theo: cùng bundle, cùng agent, đầu ra có thể kết hợp vì đầu vào nhất quán.

Tiết kiệm công việc là thực nhưng thứ yếu. Lợi ích chính là khả năng kết hợp. Structured context cho phép các đầu ra kết hợp qua màn hình và agent. Pixel context không — đầu ra của mỗi màn hình là một hòn đảo được tạo ra từ lần suy luận mới.

Cấu trúc có nghĩa là: có kiểu

Mỗi node trong IR có một kind. Điều này quan trọng ngay lập tức. Node TEXT tạo ra phần tử văn bản. FRAME với auto-layout tạo ra container. INSTANCE của Button/Primary/Large tạo ra lệnh gọi component button với đúng props. VECTOR tạo ra tham chiếu icon.

Agent không đoán. Nó ánh xạ kind sang primitive code. Ánh xạ được chỉ định trong CONTEXT.md cho framework mục tiêu. "Đối với node INSTANCE, sử dụng tên component để xác định React component. Đối với FRAME với layoutMode HORIZONTAL, sử dụng flex row. Đối với TEXT với style typography/heading.lg, sử dụng component Heading." Đây là các quy tắc kiểu compiler, không phải các nhiệm vụ suy luận.

Cấu trúc có nghĩa là: không gian

absoluteBoundingBox trên mỗi node cho vị trí và kích thước trong hệ tọa độ Figma. Kết hợp với các thuộc tính auto-layout — layoutMode, itemSpacing, paddingLeft/Right/Top/Bottom, primaryAxisAlignItems, counterAxisAlignItems — agent có mọi thứ cần để tạo code bố cục đúng mà không cần đếm pixel.

Các bounding box tuyệt đối cũng cho phép agent xác minh đầu ra của nó: nếu component được tạo có kích thước khác với IR chỉ định, có gì đó đã sai. Đây là thuộc tính có thể kiểm tra của structured context không có tương đương trong pixel context.

Cấu trúc có nghĩa là: nhận biết danh tính

Khi bốn node trong IR chia sẻ một componentId, agent biết chúng là instance của cùng component. Nó tạo ra định nghĩa component một lần, suy ra props từ các biến thể trong các instance, và render bốn lệnh gọi. Đây là đầu ra đúng. Nó không thể đạt được từ pixel context mà không cần prompt engineering đáng kể về cơ bản yêu cầu agent tái suy ra cấu trúc mà file thiết kế đã có.

Tham chiếu chéo chuỗi hoạt động tương tự. Khi nhiều node văn bản tham chiếu stringRef.key: "action.continue", agent biết sử dụng một lần tra cứu i18n duy nhất, không phải ba chuỗi hardcode. Thông tin danh tính có trong IR; agent chỉ đọc nó.

Cấu trúc có nghĩa là: có thể kiểm soát phiên bản

File JSON phẳng diff gọn gàng. Giá trị padding đã thay đổi xuất hiện như thay đổi một dòng trong IR theo màn hình. Token được đổi tên xuất hiện như diff tìm-thay thế qua file token. Instance component mới xuất hiện như đối tượng được thêm trong mảng children.

Đây là lịch sử phiên bản thiết kế thực sự hữu ích cho các kỹ sư. Không phải "thiết kế được cập nhật vào thứ Ba" mà là "đây là ba thuộc tính đã thay đổi giữa xuất v2 và v3 của màn hình này." Bạn có thể đưa điều này vào mô tả PR. Bạn có thể chạy kiểm tra tự động trên nó. Bạn có thể sử dụng nó để kiểm tra xem thay đổi code có khớp với thay đổi thiết kế hay không.

Điều này dẫn đến đâu: hạ tầng design context

Danh mục công cụ đang hình thành ở đây không phải là "xuất Figma, nhưng tốt hơn." Đó là một lớp mới trong stack: hạ tầng design context. Công việc của lớp này là biến đổi nguồn thiết kế (file Figma, thư viện component, hệ thống token) thành các tạo tác có cấu trúc, có thể đọc bởi agent, có thể kiểm soát phiên bản cung cấp cho lớp tạo code.

Lớp này nằm giữa công cụ thiết kế và coding agent. Nó có các trách nhiệm mà cả hai phía hiện không sở hữu: quản lý snapshot, trích xuất ngữ nghĩa, giải quyết token, kiểm kê component, lập chỉ mục chuỗi đa màn hình, phiên bản bundle. Đây là các mối lo ngại về hạ tầng, không phải lo ngại về công cụ thiết kế và không phải lo ngại về LLM.

Xem nó như hạ tầng có nghĩa là: nó tự động, có phiên bản, chạy trong CI, có định dạng xác định, có thể kiểm tra. Tương tự cách hệ thống build là hạ tầng cho code — không phải code chính nó, không phải binary mục tiêu, mà là pipeline đáng tin cậy, có thể tái tạo chuyển đổi một thành cái kia.

Trung thực: pixel vẫn quan trọng

Bundle figmascope bao gồm PNG 2x của mỗi màn hình được xuất. Không phải vì PNG điều khiển tạo code, mà vì xác nhận thị giác quan trọng. Agent phải có thể tham chiếu chéo đầu ra được tạo của nó với PNG. Nhà phát triển phải có thể nhìn vào màn hình mà không cần mở Figma. PNG là kiểm tra sự tỉnh táo, không phải đặc tả.

Sự phân biệt này — pixel để xác nhận, cấu trúc để đặc tả — là mô hình tinh thần đúng. Bạn không loại bỏ pixel context; bạn giáng cấp nó xuống vai trò đúng của nó. Đó là tạo tác QA, không phải đầu vào build.

Tương tự cách bạn không cung cấp cho compiler screenshot mã nguồn của bạn: bạn cung cấp cho nó nguồn, và bạn sử dụng screenshot cho tài liệu. File thiết kế là nguồn. Bundle là tạo tác biên dịch. PNG là ảnh tài liệu.

Điều này dẫn đến đâu cho codegen đa mục tiêu

Structured context cho phép một quy trình mà pixel context không thể: một thiết kế, nhiều mục tiêu. Cùng IR có thể cung cấp cho trình tạo React/Tailwind, trình tạo Jetpack Compose và trình tạo SwiftUI. Thiết kế cơ bản là giống nhau; context dành riêng cho mục tiêu (primitive framework, quy ước đặt tên, layout API) nằm trong CONTEXT.md, được tạo theo từng mục tiêu.

Đây là codegen đa mục tiêu thực sự có thể mở rộng. Bạn xuất một bundle từ thiết kế. Bạn chạy ba agent với ba file CONTEXT.md khác nhau. Bạn nhận ba triển khai tương đương về mặt cấu trúc vì chúng được tạo từ cùng IR, không phải từ ba lần suy luận riêng biệt trên ba screenshot.

Nút thắt cổ chai cho quy trình này không phải là khả năng mô hình. Đó là chất lượng context. Structured context là thứ làm cho nó có thể.

Xuất context bundle có cấu trúc của bạn từ ứng dụng figmascope chính, sau đó sử dụng với Cursor, Claude Code, hoặc Aider cho tạo UI đa mục tiêu, có thể kết hợp.