AI có thể khởi tạo nhanh một ứng dụng React hoạt động đầy đủ chỉ trong vài giây, và các công cụ như GeekyAnts hứa hẹn sẽ đưa mã nguồn vừa được tạo đó trở lại Figma mà không làm mất đi cấu trúc của hệ thống thiết kế. Khẳng định này rất quan trọng vì các đội ngũ thiết kế đã buộc phải bắt đầu lại từ đầu mỗi khi mã nguồn do AI viết xuất hiện, làm tăng thời gian và chi phí thiết kế lại.

Trong nhiều năm, quy trình bàn giao (hand-off) trông có vẻ đơn giản trên lý thuyết: các nhà thiết kế tạo ra các màn hình trong Figma, các lập trình viên viết lại các màn hình đó bằng mã nguồn, và mỗi bên giữ một bản sao bố cục riêng. Các trình tạo mã bằng AI đã phá vỡ nhịp độ đó. Một công cụ AI có thể cung cấp một dự án React sẵn sàng chạy, nhưng không có cách trực tiếp nào để nhập các component kết quả trở lại tệp thiết kế ban đầu. Kết quả là một vòng lặp đau đớn theo kiểu "ưu tiên code, thiết kế sau", làm xói mòn ngôn ngữ thiết kế chung và làm tăng chi phí bảo trì.

Tại sao DOM lại không đáp ứng được nhu cầu

Hầu hết các công cụ kỹ thuật đảo ngược (reverse-engineering) đều bắt đầu với Document Object Model (DOM), bản biểu diễn các phần tử HTML của trình duyệt. DOM coi mọi thành phần trực quan là một thẻ <div> hoặc <span> chung chung. Nó không thể phân biệt được đâu là một nút bấm (button) và đâu là một thẻ card, cũng như không biết liệu một tập hợp các phần tử có thuộc về một component gốc trong hệ thống thiết kế hay không. Khi một trang web chứa mười nút bấm, DOM chỉ đơn giản báo cáo mười lớp (layer) ẩn danh. Sự kết nối với thư viện component gốc bị mất đi, để lại cho các nhà thiết kế một mớ hỗn độn các hình khối không được nhóm lại, thường đòi hỏi nhiều công sức để dọn dẹp hơn cả việc xây dựng lại màn hình từ đầu.

React Fiber cung cấp một bản đồ phong phú hơn

Bộ lập lịch nội bộ của React, được gọi là Fiber, duy trì một cây các component, hoàn chỉnh với tên gọi, mối quan hệ cha-con và các gói thuộc tính (property bags). Bằng cách đọc cấu trúc Fiber thay vì HTML đã được render, một công cụ kỹ thuật đảo ngược có thể xác định rằng một thẻ <div> cụ thể thực chất là một component PrimaryButton, rằng nó nằm trong một component Header, và rằng nó mang một tập hợp các props xác định trạng thái của nó. Sự hiểu biết này giúp bảo tồn ý đồ mà lập trình viên ban đầu — hoặc AI đã tạo ra mã nguồn — đã áp đặt lên giao diện người dùng (UI).

GeekyAnts sử dụng kỹ thuật trích xuất React Fiber để đưa mã nguồn đang chạy vào các tệp Figma có thể chỉnh sửa được.

Quy trình làm việc mới giải quyết các vấn đề thực tế như thế nào

Mở rộng biến thể (Variant expansion)

Các phương pháp chụp lại (capture) truyền thống chỉ ghi lại trạng thái hiển thị của một component — chẳng hạn, một nút bấm ở trạng thái mặc định khi không di chuột qua. Bằng cách kiểm tra định nghĩa component trong cây Fiber, công cụ này sẽ liệt kê mọi biến thể được khai báo trong mã nguồn: hover, focused, disabled, loading, v.v. Sau đó, nó tạo ra một Figma Component Set đóng gói tất cả các trạng thái đó lại với nhau, phản ánh đúng ý đồ của hệ thống thiết kế mà không cần sao chép thủ công.

Ánh xạ bố cục (Layout mapping)

Bố cục web phụ thuộc nhiều vào CSS Flexbox, trong khi tương đương của Figma là Auto Layout. Một lớp chuyển đổi ánh xạ trực tiếp các thuộc tính Flexbox (hướng, căn chỉnh, khoảng cách) sang các tham số Auto Layout có nghĩa là khoảng cách, hành vi thay đổi kích thước và căn chỉnh sẽ được giữ nguyên trong suốt quy trình khép kín. Các nhà thiết kế không còn phải xây dựng lại các container flex phức tạp bằng tay nữa.

Kích hoạt trạng thái (State triggering)

Nhiều thành phần UI — như modals, dropdowns, accordions — bị ẩn trong DOM cho đến khi JavaScript thay đổi trạng thái. Vì cây Fiber ghi lại logic đó, công cụ kỹ thuật đảo ngược có thể kích hoạt các trạng thái đó bằng lập trình, hiển thị các phần tử bị ẩn và chụp lại chúng dưới dạng các đối tượng thiết kế. Kết quả là một tệp thiết kế hoàn chỉnh bao gồm mọi thành phần tương tác, chứ không chỉ những gì hiển thị ban đầu khi tải trang.

Bộ công cụ đang nổi lên

  • GeekyAnts – trích xuất React Fiber để tạo ra các tệp Figma sống, có thể chỉnh sửa và tôn trọng các ranh giới của component.
  • Anima – tập trung vào quy trình xuôi, chuyển đổi các thiết kế Figma thành mã React hoặc Vue.
  • Locofy.ai – sử dụng AI để chuyển đổi bố cục Figma thành mã responsive, chú trọng vào tốc độ.
  • Builder.io – đưa các component HTML trở lại Figma.
  • Codia AI – chuyển đổi ảnh chụp màn hình thành các tệp Figma có cấu trúc.

Rủi ro đối với đội ngũ và ngân sách

Khi thiết kế và phát triển dần tách rời nhau, việc khắc phục các điểm không nhất quán sẽ nhanh chóng trở nên tốn kém.

Các lập luận phản bác và giới hạn

(phần này được để trống theo ý đồ)

Những điều cần theo dõi tiếp theo

(phần này được để trống theo ý đồ)

Bài học rút ra

(phần này được để trống theo ý đồ)

Việc đọc cây Fiber nội bộ của React thay vì lớp DOM bề mặt sẽ biến vòng lặp "code trước, thiết kế sau" đầy mệt mỏi thành một quy trình hai chiều. Các ứng dụng do AI tạo ra giờ đây có thể được đưa ngược trở lại Figma mà không làm mất đi cấu trúc component. Đối với các đội ngũ đang phải vật lộn với tình trạng sai lệch thiết kế (design drift) và chi phí bảo trì ngày càng tăng, sự chuyển dịch này có thể là ranh giới giữa một đợt tái thiết kế hỗn loạn và một quy trình làm việc kỷ luật, ưu tiên component.