还有其他家可供选择
看了这个炫酷的效果,你是不是也想在自家的脑暴大会上用上它?
不过,目前这个teleportHQ还没开发完。从2017年8月16日开始,这个项目有24个月的时间来完成作业。也就是说,如果那两家欧洲公司给力的话,大概明年夏天就可以用了。
好在别家也出过不少类似的产品,找个开源的试一试,隔壁家的UI都被你吓哭了。
微软Sketch2Code
今年夏天,微软就开源了一个名为Sketch2Code的项目,可以把用户上传的界面手绘图转化为HTML页面。
![](https://n.sinaimg.cn/tech/gif_image/106/w580h326/20181015/ggAU-hmhhnqs5219964.gif)
大致的步骤是这样的:
“·用户把自己画的手绘草稿拍照上传。
视觉模型检测在图像中出现的HTML部件,标记出他们的位置。
识别所有部件中的手写文本。
布局算法根据各部件的边框空间信息生成网格结构。
HTML生成引擎使用上述信息来生成HTML代码。”
整个过程运用了微软自定义视觉模型、微软计算机视觉服务以及Azure的一系列服务,将他们串联在了一起。
![](https://n.sinaimg.cn/tech/crawl/103/w550h353/20181015/2ibg-hmhhnqs5219985.jpg)
Uizard家的pix2code
丹麦的Uizard Technologies公司曾经发过一篇论文,介绍了他们训练的pix2code模型,能够识别UI部件,并生成效果图。
![](https://n.sinaimg.cn/tech/crawl/716/w550h966/20181015/DpC5-hmhafir7436240.jpg)
![](https://n.sinaimg.cn/tech/crawl/254/w550h504/20181015/XNOb-hmhhnqs5220071.jpg)
这个模型的训练大概需要三步:
首先,需要通过计算机视觉技术来识别场景(屏幕截图)和UI组件(按钮,文本区域等);
其次,需要让这个模型学会前端代码,生成语法和语义正确的代码样本;
最后,重复前两个步骤进行训练。
演示效果大概是这样:
pix2code已经产品化,产品名字和他们公司名字一样,叫做Uizard。目前看来效果也相当不错了,根据视频的演示,不仅可以通过手机扫描直接生成UI效果图,还可以直接导入UI设计软件中进行修改。
Airbnb
Airbnb内部就有一个项目可以实现将手绘的网页部件直接转化为成品。
他们认为,像汉字这种几千个复杂的手写符号都可以通过机器识别,那么一百多种网页UI常用部件拿来识别会是更容易的。
于是,他们用十几个UI部件训练了一个原型,可以将白板上的草图自动生成原型代码和设计文件。
![](https://n.sinaimg.cn/tech/crawl/51/w550h301/20181015/BRwq-hmhafir7436355.jpg)
▲左边是生成的效果
这项技术已经用在了Airbnb产品的开发设计中。