AI trong MarkupGen: Từ tạo code đến chấm điểm chất lượng

AI trong MarkupGen không nằm ở một tính năng duy nhất, mà chạy xuyên suốt cả ba giai đoạn của quy trình: dựng code từ thiết kế, đánh giá chất lượng đầu ra, và gợi ý cách cải thiện nếu kết quả chưa khớp. Bài viết này đi qua từng lớp, và vì sao chúng được thiết kế để hỗ trợ phán đoán của developer thay vì thay thế nó.

Dựng code từ cấu trúc thiết kế

Ở bước đầu tiên, AI không "vẽ lại" thiết kế từ ảnh chụp màn hình — nó đọc cấu trúc thực tế mà plugin Figma đã gửi về: Auto Layout, khoảng cách, phân cấp layer, ràng buộc resize. Từ đó, AI dựng ra HTML/CSS bám theo đúng cấu trúc đó thay vì đoán mò từng pixel:

• Thuộc tính Auto Layout (hướng, gap, padding, canh lề) được ánh xạ thành CSS Flexbox tương ứng.
• Ràng buộc resize của layout được chuyển thành breakpoint responsive, thay vì một trang có bề rộng cố định.
• Đầu ra ưu tiên thẻ HTML có ý nghĩa thay vì <div> lồng sâu không nhãn.

Việc dựng dựa trên cấu trúc thay vì đoán từ hình ảnh là lý do kết quả giữ được đúng phân cấp và khoảng cách của bản thiết kế gốc, thay vì một bản "trông giống" nhưng CSS bên dưới hoàn toàn khác.

Chọn model AI phù hợp với dự án

MarkupGen cho phép chọn giữa các model AI ở những nơi việc lựa chọn có ý nghĩa, ví dụ khi tạo lại code sau khi đánh giá. Có hai mức: một model nhanh và tiết kiệm, phù hợp với thiết kế nhỏ hoặc vừa; và một model chất lượng cao hơn, phù hợp thiết kế lớn, nhiều thành phần phức tạp. Với tài khoản không tự chọn model, hệ thống tự động dùng model phù hợp theo gói cước đang sử dụng, để cân bằng giữa tốc độ và chi phí mà người dùng không phải tự cấu hình.

Chấm điểm chất lượng đầu ra tự động

Sau khi code được dựng, AI so sánh ảnh chụp bản preview với ảnh gốc của thiết kế và chấm điểm mức độ khớp trên thang 10. Đây không phải một con số trừu tượng — nó đi kèm phần đánh giá chi tiết (điểm nào khớp, điểm nào lệch) để bạn biết ngay bản xuất đã sẵn sàng đưa vào sản xuất hay còn cần chỉnh sửa. Khi điểm đạt ngưỡng gần như tuyệt đối, hệ thống hiểu rằng không còn gì đáng kể để AI sửa thêm, và ẩn bớt các gợi ý tạo lại không cần thiết.

Vòng lặp phản hồi: phân tích và tạo lại

Nếu bản xuất chưa đạt, MarkupGen không chỉ đưa ra một con số rồi dừng lại. Phần phân tích giao diện so sánh trực quan ảnh gốc và bản preview (kèm zoom để soi chi tiết), sinh ra gợi ý chỉnh sửa cụ thể, và cho phép bạn sửa lại gợi ý đó trước khi bấm "Tạo lại với thay đổi này" — để AI dựng lại code theo đúng phản hồi bạn muốn, thay vì tạo lại ngẫu nhiên từ đầu.

Vì sao điều này quan trọng

Cả ba lớp AI trên đều nhắm đến cùng một mục tiêu: loại bỏ phần dịch máy móc từ thiết kế sang code, để công sức của developer dồn vào những gì thực sự cần đến sự đánh giá của con người — chi tiết tương tác, trường hợp đặc biệt, và tích hợp vào một codebase lớn hơn. Nếu bạn muốn thấy cả ba lớp này hoạt động trên chính thiết kế của mình, bạn có thể dùng thử miễn phí.