Sketch2Code是微软推出的一款在线AI生成html代码工具，可以直接将上传的手绘设计草图自动转换为HTML代码。只需访问官网并上传你的设计图片，然后Sketch2Code会在几秒内将草图转换为html代码，你可以直接下载html代码以进行后续使用。

Sketch2Code的简介

Sketch2Code由微软AI Lab于2018年推出，旨在帮助开发人员轻松地将手绘草图转化成HTML代码的开源项目。使用Sketch2Code，开发人员可以绘制线框草图并将其导出为源代码。Sketch2Code使用人工智能和自动化从线框草图中开发代码，支持基本的网页视觉元素，包括标签、文本字段、文本段落、图像和按钮等。

2018年发布时，该项服务背后的模型已经用数百万张图像进行了训练，可以对各种类型的物体进行物体检测。有了这些信息，该工具可以生成设计中不同元素的HTML代码片段，然后可以根据识别的元素的位置推断设计的布局，并相应地生成最终的HTML代码。

Sketch2Code是一个前端智能AI-识别草图生成代码且基于Web的解决方案，使用AI将手绘的用户界面草图转换为可用的HTML代码。Sketch2Code由微软和Kabel、Spike Techniques合作开发。

Sketch2Code：核心是有一套微软自定义视觉模型（Custom Vision），这个模型是基于不同的手绘稿的图象训练得出的，并标记了与常见 HTML 元素（如文本框、按钮、图像等）相关的信息。

Sketch2Code的使用

1、需求

创意设计过程始于在白板上的合作，设计师在白板上分享想法。一旦绘制了设计，通常会手动将其转换为可工作的HTML线框。这需要时间并延迟设计过程。

2、想法

我们可以使用计算机视觉来构建一个系统，了解设计师在白板上画的东西，然后将这种理解转化为HTML代码。通过这种方式，我们可以直接从手绘图像中生成HTML代码。

3、解决方案

自定义视觉服务训练模型来检测HTML对象，然后在设计中使用文本识别来提取手写文本。通过组合对象和文本，我们可以生成不同设计元素的HTML片段。