Hướng dẫn dùng Sketch2Code để chuyển bản vẽ tay thành file HTML

Sketch2Code sử dụng AI để chuyển đổi các bản vẽ tay thành file HTML. Bạn chỉ cần lên ý tưởng cho một form thiết kế. Sau đó Upload lên Sketch2Code, mẫu thiết kế vẽ tay của bạn sẽ được trí tuệ nhân tạo phân tích thành code HTML hoàn chỉnh cho bạn. Bạn không cần phải gõ từng dòng Code để tạo thành file HTML nửa. 

 Thông thường, trước khi ra một sản phẩm bạn phải thiết kế mẫu lên giấy hoặc bảng. Chẳng hạn như giao diện Website, Form điền thông tin… Sau khi có mẫu thiết kế, bạn sẽ biên dịch nó thành mã HTML để hoạt động trên nền Web. Việc này làm mất thời gian trong quá trình hoàn thiện sản phẩm của bạn.

 Computer Vision là gì? 

Microsoft đã sử dụng Computer Vision để xây dựng một hệ thống hiểu những gì một nhà thiết kế đã vẽ, sau đó chuyển sự hiểu biết đó sang mã HTML. Bằng cách này, bạn có thể tạo mã HTML trực tiếp từ hình ảnh vẽ tay. Trí tuệ nhân tạo có thể tự học các mô hình để phát hiện các đối tượng HTML, sau đó sử dụng nhận dạng văn bản để trích xuất văn bản viết tay trong thiết kế. Bằng cách kết hợp đối tượng và văn bản, Sketch2Code có thể tạo các đoạn HTML của các giao diện thiết kế khác nhau Computer Vision là một môn học thuộc về trí tuệ nhân tạo. Phương pháp này cung cấp cho ứng dụng khả năng nhìn và hiểu những gì nó đang nhìn thấy. Sử dụng Cognitive Services của Microsoft, bạn có thể dạy cho máy tính các hiểu và phân tích hàng triệu hình ảnh để phân tích, nhận dạng các đối tượng khác nhau Đối với Sketch2Code, Microsoft đã tạo ra một con AI có khả năng nhận ra các yếu tố thiết kế web là textbox hay button. Microsoft đã sử dụng chức năng nhận dạng chữ viết tay có trong Computer Vision để trích xuất văn bản thành chữ trên máy tính. Bằng cách kết hợp yếu tố thiết kế và nội dung được trích xuất, Sketch2Code có thể tạo các đoạn mã HTML. Sau đó AI có thể suy ra bố cục của thiết kế từ vị trí của các phần tử được xác định và tạo mã HTML hoàn chỉnh.

Có lẽ đây là sản phẩm của Microsoft cạnh tranh với trí tuệ nhân tạo Quick, Draw của Google.

 Cách dùng Sketch2Code để chuyển bản vẽ tay thành file HTML 

Để sử dụng Sketch2Code chuyển bản vẽ thiết kế thành mã HTML, bạn có thể truy cập vào trang Sketch2Code của Microsoft. Đây là Demo về AI thuộc lĩnh vực Computer Vision.

 Bước 1: Hãy vẽ ra giấy bản phát thảo về giao diện bạn sẽ chuẩn bị Code

 Bước 2: Bạn có thể dùng điện thoại chụp lại bản phát thảo, hoặc scan thành file hình ảnh

 Bước 3: Truy cập vào trang Sketch2Code của Microsoft.

 Bước 4: Click vào nút UPLOAD DESIGN hoặc nếu bạn dùng điện thoại thì chọn TAKE A PICTURE để tải bản phát thảo của bạn lên.

Bước 5: Bạn chờ một chút, Sketch2Code sẽ tự chuyển thành code HTML cho bạn. Bạn có thể click vào nút DOWNLOAD YOUR CODE để tải file HTML và chỉnh sửa lại theo ý muốn.


Có thể nói trí tuệ nhân tạo ngày càng thông minh, cuộc sống con người càng dễ dàng hơn. Bạn không cần phải gõ từng dòng code để tạo ra giao diện Website nửa. Sketch2Code sẽ giúp bạn chuyển từ bản thiết kế vẽ tay thành file HTML hoàn chỉnh. Bạn có thể tiết kiệm hàng giờ đồng hồ trong việc thiết kế Website của mình.

Không có nhận xét nào

Trụ sở chính

Yên Bái

Địa chỉ: SN 03 Đồng Đình, Âu Lâu, TP.Yên Bái

Điện thoại: 038 39 39 123

Fax: 02166 511 686 

Website: https://www.heliosvietnam.com

Email: nhacdoanhnghiep@gmail.com 

Chi nhánh

Yên Bái

Địa chỉ:Tổ 9, Phường Nguyễn Phúc TP.Yên Bái

Điện thoại: 09 3456 8023

Fax: 02166 511 686 

Website: https://www.heliosvietnam.com

Email: nhacdoanhnghiep@gmail.com