Ảnh giao diện thành code

Tải ảnh chụp màn hình hoặc ảnh xuất từ Figma, chọn HTML + CSS hoặc Tailwind, bấm tạo. AI viết một file HTML hoàn chỉnh, xem trước ngay cạnh ảnh gốc.

Có. Chọn Tailwind để mã dùng class Tailwind qua CDN; chọn HTML + CSS để có một khối style riêng với flexbox, grid và biến CSS.

Mã là bản dựng nhanh để tham khảo, bạn nên chỉnh lại chi tiết, ảnh thật và tương tác trước khi dùng thật.

Được theo cách gián tiếp: xuất khung Figma thành ảnh PNG rồi tải lên. AI dựng lại bố cục, màu và chữ gần giống, nhưng không đọc trực tiếp file Figma.

AI được yêu cầu làm giao diện co giãn theo màn hình, nhưng bạn nên kiểm tra lại trên điện thoại và chỉnh các điểm ngắt cho phù hợp.

Kết quả là một file HTML tĩnh với CSS, chưa có React hay logic tương tác. Bạn có thể chuyển các khối HTML thành component khi đưa vào dự án.

Ảnh thật không được trích xuất, AI dùng khung giữ chỗ hoặc ảnh mẫu. Bạn thay bằng ảnh của mình trong mã.

Bấm "Sao chép mã" để dán vào trình soạn thảo, hoặc "Tải .html" để lưu file và mở trực tiếp bằng trình duyệt.

Rất hợp. So sánh ảnh gốc với mã được tạo giúp bạn hiểu cách dựng bố cục bằng flexbox, grid và cách đặt khoảng cách, cỡ chữ.

Chụp rõ nét, đủ lớn, một màn hình mỗi lần. Giao diện quá dài hoặc nhiều chữ nhỏ nên được chia thành nhiều ảnh.

Không. Ảnh được gửi tới dịch vụ AI của ColorME trên Cloudflare để xử lý và gắn với tài khoản của bạn, không hiển thị công khai.

Công cụ AI này dành cho thành viên ColorME Premium (học viên ColorME hoặc người được học viên mời), bạn cần đăng nhập để chạy.

Mỗi tài khoản có 60 lượt AI viết và phân tích mỗi ngày, dùng chung cho các công cụ viết của ColorME. Số lượt còn lại hiện ngay dưới nút tạo, lượt bị lỗi được hoàn lại.