用户界面设计过程涉及多次创意迭代，过程通常从一张白纸开始，设计师和工程师互相交流想法，尽最大努力设计场景或jobtheclientwants这个过程，一旦有了初始设计作品，通常会通过照片捕捉，然后手动翻译成可在网络浏览器中运行的HTML页面。这种翻译需要花费大量的时间和精力，并且常常会减慢设计过程。如果设计图中的显示效果可以直接在浏览器中体现出来，是不是就省事了？如果我们能做到这一点，那么当设计原型制作完成后，我们就可以拥有一个经过设计师、开发人员甚至客户验证的现成原型。今天，微软也做到了。最近，微软开发了一种人工智能驱动的网页设计工具，能够将网站草图转换为功能性HTML代码。不过，Sketch2Code在GitHub上的名气依旧不大，仅收获了1100个“star”和174个“fork”。微软AI高级产品经理TaraShankarJana将其命名为Sketch2Code，由微软与Kabel和SpikeTechniques合作开发。该工具旨在让所有开发人员和组织能够利用AI做更多事情。关于Sketch2CodeSketch2Code是一种基于Web的解决方案，它使用AI将手绘用户界面的图片转换为可用的HTML代码。让我们仔细看看使用Sketch2Code将手绘图像转换为HTML的过程：●用户首先将图像上传到网站。●自定义视觉模型预测图像中是否存在HTML元素并确定它们的位置。●手写文本识别服务读取预测元素内的文本。●布局算法通过预测元素边界的空间信息生成可以容纳所有这些组件的网格结构。●HTML生成引擎，利用上述信息生成最终结果的HTML代码。应用工作流程如下：Sketch2Code使用以下元素：●微软自定义视觉模型：该模型使用不同手写设计的图片进行训练，标记常见的HTML相关元素信息，包括文本框、按钮、图像等。●Microsoft计算机视觉服务：用于识别设计元素中的文本。●AzureBlobStorage：存储与HTML生成过程的每个步骤相关的信息，包括原始图像、预测结果、布局和分组信息等。●AzureFunction：它作为后端入口点，通过与服务交互来协调构建过程。●Azure网站：用户界面前端，您可以在其中上传新设计并查看生成的HTML结果。以上元素通过以下结构组合起来：你现在是不是对这个项目很好奇，那就去GitHub看看所有与Sketch2Code相关的代码。类似项目还有类似的项目：TonyBeltramelli发起的pix2code论文。本项目可通过深度神经网络直接将截图生成UI代码，兼容Android、iOS和Web界面三个平台。（项目地址：https://github.com/tonybeltramelli/pix2code）今年，Airbnb推出了sketch2code。（项目地址：https://github.com/emilwallner/Screenshot-to-code-in-Keras）1.向训练好的神经网络输入一张设计图2.神经网络将图片转换成HTML标记语言3.渲染输出
