Bạn vừa mở một tệp Figma được gắn thẻ final_FINAL_v3 chỉ để thấy ba mươi frame không tên, một lớp nền bị khóa, và một nút bấm nằm lọt thỏm trong một nhóm cũng chứa một hình tròn trang trí ngẫu nhiên. Điều này phổ biến hơn bất kỳ ai muốn thừa nhận. Khi bạn đưa sự hỗn loạn đó vào một công cụ lập trình AI như Codex, kết quả đầu ra sẽ phản chiếu chính xác đầu vào. Nguyên lý "dữ liệu rác vào, kết quả rác ra" vẫn luôn đúng, ngay cả với các mô hình ngôn ngữ lớn.

Cấu trúc của một quy trình bàn giao lộn xộn

Các nhà thiết kế làm việc rất nhanh. Họ nhân bản các frame, để lộ các bản phác thảo cũ, và dựa vào việc căn chỉnh bằng mắt thay vì sử dụng auto-layout có cấu trúc. Kết quả là bạn sẽ thấy những tên lớp như "Frame 3827" nằm ngay cạnh các nút chức năng. Các mảng màu gradient trang trí nằm chung một nhóm với nút kêu gọi hành động (call-to-action) chính của bạn. Các mockup thiết bị bao bọc giao diện thực tế trong các lớp vỏ trang trí trông giống như nội dung. Các lớp ẩn vẫn hiển thị trong tệp, chờ đợi để làm rối bất kỳ trình phân tích tự động nào.

Đối với một lập trình viên sử dụng Codex, vấn đề không nằm ở sự lười biếng của bất kỳ bên nào. AI thiếu khả năng nhận diện khuôn mẫu của con người. Nó đọc cây phân lớp (layer tree) một cách máy móc. Khi một nhà thiết kế đặt một nút bấm, một tiêu đề và một lớp làm mờ nền vào trong một nhóm đã bị làm phẳng (flattened group), Codex sẽ coi chúng là các thành phần ngang hàng với trọng số cấu trúc như nhau. Kết quả là một frontend trông như bị lỗi cấu trúc ngay cả trước khi bạn kịp xem xét các màu sắc.

Một quy trình làm việc giúp bạn đạt kết quả gần nhất

Bạn vẫn có thể tạo ra mã nguồn sạch từ một nguồn dữ liệu lộn xộn nếu bạn đóng vai trò như một biên tập viên thay vì chỉ là một bộ chuyển đổi đơn thuần. Mục tiêu là cung cấp cho Codex đủ ngữ cảnh để nó đưa ra các dự đoán có cơ sở, sau đó giới hạn các dự đoán đó để chúng nằm trong kiến trúc frontend hợp lý.

Trích xuất mọi thứ trước khi AI nhìn thấy nó. Hãy bật Dev Mode nếu bạn có quyền truy cập. Sao chép các thuộc tính CSS thô từ bảng inspect. Xuất các biến màu sắc và kiểu chữ (text styles). Đưa dữ liệu có cấu trúc này vào Codex cùng với câu lệnh (prompt) của bạn. Ảnh chụp màn hình cho thấy sự thật về bố cục; siêu dữ liệu (metadata) cung cấp cho bạn mã hex chính xác, font stack và chiều cao dòng (line height). Thiếu một trong hai sẽ khiến mô hình phải đoán mò một nửa bài toán.

Hãy cực kỳ khắt khe về hệ thống bố cục trong các câu lệnh của bạn. Đừng bao giờ yêu cầu Codex chỉ đơn giản là "hãy code trang này". Hãy nói chính xác cho nó những gì cần dùng: "Xây dựng thanh điều hướng bằng CSS Flexbox và lưới dashboard bằng CSS Grid. Không sử dụng định vị tuyệt đối (absolute positioning) trừ khi bạn đang đặt huy hiệu thông báo tương đối so với biểu tượng." Các công cụ AI thường mặc định sử dụng định vị tuyệt đối vì chúng phân tích trực tiếp các tọa độ x-y cố định từ tệp thiết kế. Các hướng dẫn rõ ràng sẽ ghi đè lên xu hướng đó.

Sử dụng ảnh chụp màn hình làm rào chắn kiểm soát. Xuất các frame ở độ phân giải 2x. Tải chúng lên cùng với ngữ cảnh văn bản của bạn. Khi Codex tạo ra bản nháp đầu tiên, hãy mở kết quả trong trình duyệt bên cạnh ảnh chụp màn hình. Hãy tìm kiếm sự sai lệch về khoảng cách, các đường viền bị thiếu và sự không khớp về độ dày phông chữ. AI thường sẽ nắm bắt được bố cục tổng thể một cách chính xác nhưng lại làm sai các thông số padding cụ thể.

Lên kế hoạch để chỉnh sửa. So sánh kết quả hiển thị với tham chiếu hình ảnh của bạn và sửa lỗi bằng tay. AI có thể biến một nhãn văn bản thành một thẻ hình ảnh hoặc bao bọc một thẻ card trong một thẻ div chung chung thay vì dùng <article> hoặc <section>. Bước kiểm tra này là bắt buộc. Đó là giai đoạn bạn biến mã nguồn được tạo ra thành mã nguồn thực tế để đưa vào sản phẩm (production code).

Nơi AI bị lạc lối

Ngay cả với một quy trình làm việc cẩn thận, một số kiểu lộn xộn nhất định vẫn liên tục làm khó Codex.

Nhiễu trang trí là cái bẫy lớn nhất. Các tệp Figma thường bao gồm các hiệu ứng phát sáng nền, các mẫu thanh trạng thái và các biểu tượng minh họa không thuộc về giao diện chức năng. Nếu không có nhãn rõ ràng, AI sẽ lập trình chúng như các phần tử DOM vĩnh viễn. Bạn sẽ kết thúc với các thẻ div dành riêng cho các hình tròn làm mờ, trong khi lẽ ra chúng nên là một background hoặc box-shadow trong CSS.

Phân cấp bị làm phẳng làm hỏng khả năng nhận diện thành phần. Trong một tệp sạch sẽ, một thẻ card là một frame auto-layout chứa một hình ảnh, một tiêu đề và một hành động. Trong một tệp lộn xộn, ba yếu tố đó có thể nằm ở cấp gốc (root level), được căn chỉnh về mặt thị giác nhưng lại bị mồ côi về mặt cấu trúc. Codex sẽ bỏ lỡ hoàn toàn ranh giới của thẻ card và xuất ra một chuỗi các phần tử phẳng mà không có phần tử cha chung nào.

Phân tách tín hiệu khỏi nhiễu

Bản thảo đặt ra những câu hỏi cụ thể mà mọi lập trình viên đều phải đối mặt khi kết nối giữa thiết kế và mã nguồn do AI tạo ra.

Bạn tin tưởng siêu dữ liệu (metadata) của Figma hay ảnh chụp màn hình hơn?

Hãy tin tưởng cả hai, nhưng cho những nhiệm vụ khác nhau. Sử dụng metadata của Figma để lấy các giá trị chính xác: màu sắc, kích thước phông chữ, spacing tokens và các assets đã xuất. Ảnh chụp màn hình chiếm ưu thế về cấu trúc và phân cấp thị giác. Nếu metadata cho biết một layer nằm ở x: 120, y: 300, nhưng ảnh chụp màn hình lại cho thấy nó được căn giữa bên trong một card, hãy tin vào ảnh chụp màn hình về bố cục (layout) và tin vào metadata về kiểu dáng (styling). Hãy để ảnh chụp màn hình đóng vai trò là nguồn dữ liệu chuẩn (ground truth). Hãy để bảng inspect hoàn thiện các giá trị chính xác.

Làm thế nào để tách biệt UI khỏi khung thiết bị?

Trước khi xuất bất cứ thứ gì, hãy ẩn mọi layer không phải là UI. Chọn phone mockup hoặc desktop chrome và tắt hiển thị. Nếu file quá lộn xộn để phân biệt đâu là template và đâu là nội dung, hãy tìm các thành phần lặp lại trên nhiều màn hình. Thanh trạng thái (status bar), thanh chỉ báo về nhà (home indicator) và khung điều hướng (navigation shell) thường nằm ở các vị trí giống hệt nhau. Các nút, biểu mẫu và nội dung thực tế nằm ở phần giữa có thể thay đổi. Hãy ẩn tất cả những gì có vẻ cố định trên mọi màn hình. Những gì còn lại chính là giao diện thực sự của bạn.

Làm thế nào để tìm ranh giới của component trong một file kém chất lượng?

Hãy tìm sự phân cụm về mặt thị giác, sau đó xác minh bằng khoảng cách (spacing). Nếu bốn thành phần nằm cùng nhau với khoảng cách 16px nhất quán và dùng chung một màu nền, chúng có thể thuộc về cùng một container ngay cả khi nhà thiết kế chưa bao giờ nhóm chúng lại. Kiểm tra danh sách layer trong Figma để xem các lớp xếp chồng liên tiếp.