如何使用 Microsoft 的 Sketch2Code 将手绘网站布局转换为 HTML 代码

有没有想过在纸上画一些东西并让它在现实世界中栩栩如生是多么酷?嗯,这正是微软通过人工智能驱动的 Skletch2Code 网络应用程序实现的目标,该应用程序可以通过单击按钮将手写绘图从白板转换为 HTML 网站。

Sketch2Code 可以在几秒钟内将网站的任何手绘布局转换为 HTML。该工具使用微软的计算机视觉 AI 服务来检测绘图中的 HTML 对象,然后使用文本识别来提取绘图中的手写文本,以组合和构建图像中所有设计元素的 HTML 片段。

这使得网页设计师和开发人员可以在几秒钟内以多种不同风格构建网站的 HTML 原型。如果您有兴趣了解后端的工作原理,请务必阅读 Microsoft 网站上有关 Sketch2Code 的技术细节。

下面是一个快速教程,向您展示使用 Sketch2Code 将网站布局图转换为真正的 HTML 页面是多么简单。

首先,在白板或白纸上绘制您网站的布局。然后,拍一张照片并将其保存到您的计算机。之后,单击下面的按钮在浏览器中打开 Sketch2Code 网络应用程序。

启动 Sketch2Code 网络应用程序

打开网站后,点击 上传设计 按钮,然后选择您在白板或白纸上绘制的网站布局图片。

上传手绘的网站设计后,坐下来看看 Sketch2Code 使用 AI 根据您上传的图像中的布局自动生成 HTML 页面。

该过程完成后,您将看到新生成的 HTML 页面的预览以及下载完整代码的选项。点击 下载您的 HTML 代码 按钮获取手绘网站布局的 .html 文件,以便您可以在 Web 浏览器中本地测试和预览它。

而已。我们希望 Sketch2Code 可以节省您制作网页布局原型的时间。