Cách chuyển đổi bố cục trang web vẽ tay thành mã HTML bằng Sketch2Code của Microsoft

Đã bao giờ bạn tự hỏi sẽ tuyệt vời như thế nào nếu chỉ vẽ một thứ gì đó trên giấy và để nó trở nên sống động trong thế giới thực? Chà, đó chỉ là điều mà Microsoft đã đạt được với ứng dụng web Skletch2Code được hỗ trợ bởi AI có thể chuyển đổi các bản vẽ viết tay từ bảng trắng sang các trang web HTML chỉ bằng một cú nhấp chuột.

Sketch2Code có thể chuyển đổi bất kỳ bố cục vẽ tay nào của trang web thành HTML chỉ trong vài giây. Công cụ này sử dụng dịch vụ AI của Microsoft’s Computer Vision để phát hiện các đối tượng HTML trong bản vẽ, sau đó sử dụng tính năng nhận dạng văn bản để trích xuất văn bản viết tay trong bản vẽ để kết hợp và xây dựng các đoạn mã HTML của tất cả các yếu tố thiết kế trong hình ảnh.

Điều này làm cho các nhà thiết kế và phát triển web có thể xây dựng các nguyên mẫu HTML của một trang web theo nhiều phong cách khác nhau trong vài giây cực kỳ nhanh chóng. Nếu bạn muốn biết cách này hoạt động trong phần phụ trợ, hãy nhớ đọc chi tiết kỹ thuật về Sketch2Code trên trang web của Microsoft.

Dưới đây là hướng dẫn nhanh cho bạn cách sử dụng Sketch2Code đơn giản để chuyển đổi các bản vẽ bố cục trang web thành các trang HTML thực.

Trước hết, hãy vẽ bố cục trang web của bạn trên bảng trắng hoặc tờ giấy trắng. Sau đó, chụp ảnh và lưu vào máy tính của bạn. Sau đó, nhấp vào nút bên dưới để mở ứng dụng web Sketch2Code trong trình duyệt của bạn.

Khởi chạy ứng dụng web Sketch2Code

Khi bạn đã mở trang web, hãy nhấp vào Tải lên thiết kế và chọn hình ảnh của bố cục trang web mà bạn đã vẽ trên bảng trắng hoặc tờ giấy trắng.

Sau khi tải lên thiết kế trang web vẽ tay, hãy ngồi lại và xem Sketch2Code sử dụng AI tự động tạo trang HTML dựa trên bố cục trong hình ảnh bạn đã tải lên.

Sau khi quá trình kết thúc, bạn sẽ được hiển thị bản xem trước trên trang HTML mới được tạo cùng với tùy chọn tải xuống mã đầy đủ. Bấm vào Tải xuống mã HTML của bạn để lấy tệp .html của bố cục trang web vẽ tay của bạn để bạn có thể kiểm tra và xem trước nó cục bộ trong trình duyệt web của mình.

Đó là nó. Chúng tôi hy vọng Sketch2Code giúp bạn tiết kiệm thời gian trong việc tạo mẫu bố cục trang web.

Thể LoạI: Web