Tạo Mã & Khung Dây
Tổng Quan
Sau khi bạn đã chú thích hình ảnh bằng hộp giới hạn và gán hành vi, bạn có thể tạo mã thành phần hoạt động hoặc bố cục khung dây. AI sử dụng vị trí hộp giới hạn, loại phần tử và hướng dẫn hành vi để tạo đầu ra chính xác.
Thanh Bên Trợ Lý AI
Bảng Trợ Lý AI là thanh bên phải được sử dụng để cấu hình và kích hoạt tạo mã hoặc khung dây. Nó chứa các điều khiển sau:
Bộ Chọn Mô Hình Thị Giác
Chọn mô hình thị giác AI nào để sử dụng phân tích hình ảnh và tạo đầu ra. Các mô hình khác nhau có thể tạo mức độ chi tiết và chính xác khác nhau.
Bộ Chọn Framework
Chọn framework mục tiêu cho tạo mã (ví dụ: React, Vue, Svelte). Mã được tạo sẽ sử dụng cú pháp và mẫu của framework đã chọn.
Tab Thành Phần / Khung Dây
Chuyển đổi giữa tạo mã thành phần (tab Thành Phần) hoặc bố cục khung dây (tab Khung Dây) từ hình ảnh đã chú thích.
Nhóm Hình Ảnh
Liệt kê tất cả nhóm hình ảnh cho dự án đảo ngược hiện tại. Chọn nhóm để xem trước hình ảnh và cấu hình tạo. Mỗi nhóm hiển thị số lượng hình ảnh.
Tạo Block
Nhấp để bắt đầu quá trình tạo AI. AI phân tích hình ảnh của nhóm đã chọn cùng bất kỳ chú thích hộp giới hạn và hành vi nào để tạo đầu ra.
Chế Độ Đầu Ra
Tạo Mã
Chuyển đổi hình ảnh đã chú thích thành mã thành phần hoạt động cho framework mục tiêu (React, Vue, Svelte, v.v.). Mã được tạo bao gồm bố cục, kiểu dáng và bất kỳ hành vi nào bạn đã xác định trên hộp giới hạn.
Tạo Khung Dây
Xuất hình ảnh đã chú thích dưới dạng bố cục khung dây mở trong công cụ Khung Dây. Mỗi hộp giới hạn trở thành phần tử khung dây bạn có thể tinh chỉnh, sắp xếp lại và kết nối với màn hình khác.
Tính Năng Tạo Mã
Chọn Framework
Chọn framework mục tiêu trước khi tạo. Các framework được hỗ trợ bao gồm React, Vue, Svelte, SolidJS, Angular và nhiều hơn nữa.
Ánh Xạ Hành Vi
Hành vi được gán cho hộp giới hạn được chuyển đổi thành trình xử lý sự kiện, logic điều hướng, modal và mã tương tác khác trong đầu ra.
Độ Chính Xác Bố Cục
AI sử dụng vị trí và kích thước hộp giới hạn từ hình ảnh để tạo bố cục phù hợp chặt chẽ với thiết kế trực quan gốc.
Lưu Vào Block
Thành phần đã tạo có thể được lưu trực tiếp vào thư viện Block để tái sử dụng giữa các dự án.
Thêm Vào Dự Án
Chèn mã đã tạo trực tiếp vào dự án hiện tại dưới dạng tệp thành phần mới.
Mẹo
Để có kết quả tốt nhất, sử dụng hình ảnh độ phân giải cao với phần tử UI rõ ràng. Vẽ chặt hộp giới hạn xung quanh mỗi phần tử để tạo mã chính xác hơn. Gán hành vi cụ thể thay vì mô tả mơ hồ — "mở modal đăng ký" hiệu quả hơn "làm gì đó." AI hoạt động tốt nhất với bố cục web chuẩn và mẫu UI phổ biến.