郭一璞 发自 凹非寺 量子位 报道 | 民众号 QbitAI“这次的新产物首页，大家有什么想法？”你正在和UI、前端、市场、运营部门开会。“先把运动banner放到最上面？”“然后给差别栏目加icon，放两排就够了。”“下面可以放专栏的位置。”“最底下别忘了加用户菜单。

”……你一边听着同事们七嘴八舌的建议，一边就把原型图在白板上画了出来：“我们按这个来讨论一下吧，时间不等人，后面还要UI设计、前端开发……”“差不多长这样是吧？”前端开发小丁打断了你的讲话。小丁的电脑上，正根据你说的样子，运行着一个页面，每一处banner、按钮、跳转都可以点击，所有文字、图片都放在了它应该泛起的地方，一旁的HTML代码简练清晰，就像产物已经做出来了一样。这么快，怎么做到的？岂非，这群开发人员都是AI吗？嗯……可能真的是。

手绘框图，同步自动生成小丁用的方法，是摄像头实时拍摄白板上的草稿，就可以自动生成设计、开发好了的网页。视频中，产物司理在白板上勾勒原型草图。

而屏幕上，显示着识此外历程，同时正在生成代码和UI界面预览。放大的细节清晰地展示出了识此外历程。随着绘图的那位产物司理停笔，识别也就完成了，此时的代码清晰可鉴。

网页也生成了，和正常的网页一样，可以随意调整巨细并适配。整个历程中，电脑借助摄像头拍摄到产物司理正在白板上绘制的原型草稿，一边就即时“画”出了UI，生成了代码，展示着制品网页。

产物司理画一个banner，屏幕上就泛起一个banner；产物司理标一个小标题，屏幕上就泛起一个小标题；产物司理画一个文字区域，屏幕上就泛起一个文字区域。每一步都是机械自动识别产物司理画出来的工具，直接酿成相应的网页样式，还附带了HTML代码。举行任何增删，都可以实时跟进、更新。

此前，确定一个网页长什么样子，要产物司理、UI、前端、市场运营们聚在一起，相同、讨论、扯皮，出N个方案，开N场集会，花费数天以致数周才气完成。从分析需求开始，产物司理出原型图，大家开会修改×N；UI绘制设计图，大家开会修改×N；前端写好代码，大家检查相同×N……不仅如此，有些人想象力捉急，看不到最终的制品，就发现不了问题，还要让产物、UI、前端重新来一次，一再返工。

于是，工期越推越长，加班越来越晚，发际线越来越高……现在，有了这个工具，大家只要在白板上勾勾画画，就可以立马看到制品长什么样，敲定方案，一次成型，还可以直接拿去革新UI和代码，给设计师和前端开发省了不少功夫，能把一两个星期的事情，压缩到一两天，效率提升N倍。来自欧洲的teleportHQ这个草稿生成网页的视频在LinkedIn和Twitter上疯传，视频中的谁人神奇的工具到底是什么呢？这个工具出自一个名为teleportHQ的项目，由Evo Forge和Corebuild两家欧洲公司互助建立，欧洲区域生长基金（European Fund for Regional Development）出资赞助，他们希望这个项目能让非技术人员也能利便的建立可视化的应用法式和web页面。

该项目通过支持向量机（SVM）、神经网络和XGBoost三种方式，实现对web页面的语义支解，现在已经可以生成React，React Native，Vue，HTML/CSS和AngularJS代码。引发Twitter“震惊体”虽然正式的产物还没有面世，不外一众Twitter网友都惊呆了，他们看到这个视频的反映是这样：这样：另有这样：网友们纷纷表现，这简直是未来原来了！有时候我会以为看到了未来，嗯，好比看到这个的时候。虽然感受UI们会凉凉，可是并不故障这个很cool啊！但另一些设计师以为，这能给自己省下大把大把的时间。

另有人畅想了这种技术的未来应用。等到了2025年，所有的演讲预计都市是演讲者手绘，然后AI来自动生成的啦。不外也有人以为，实时同步虽然很牛逼，可是，好像无卵用。毫无疑问，视频很棒，可是视频里最厉害实时转换的恰恰是最没用的，我们为什么需要每一步都实时转化成代码？另有其他家可供选择看了这个炫酷的效果，你是不是也想在自家的脑暴大会上用上它？不外，现在这个teleportHQ还没开发完。

从2017年8月16日开始，这个项目有24个月的时间来完成作业。也就是说，如果那两家欧洲公司给力的话，或许明年夏天就可以用了。幸亏别家也出过不少类似的产物，找个开源的试一试，隔邻家的UI都被你吓哭了。

微软Sketch2Code今年夏天，微软就开源了一个名为Sketch2Code的项目，可以把用户上传的界面手绘图转化为HTML页面。大致的步骤是这样的：· 用户把自己画的手绘草稿照相上传。· 视觉模型检测在图像中泛起的HTML部件，标志出他们的位置。

· 识别所有部件中的手写文本。· 结构算法凭据各部件的边框空间信息生成网格结构。· HTML 生成引擎使用上述信息来生成 HTML 代码。整个历程运用了微软自界说视觉模型、微软盘算机视觉服务以及Azure的一系列服务，将他们串联在了一起。

Uizard家的pix2code丹麦的Uizard Technologies公司曾经发过一篇论文，先容了他们训练的pix2code模型，能够识别UI部件，并生成效果图。这个模型的训练或许需要三步：首先，需要通过盘算机视觉技术来识别场景（屏幕截图）和UI组件（按钮，文本区域等）；其次，需要让这个模型学会前端代码，生成语法和语义正确的代码样本；最后，重复前两个步骤举行训练。演示效果或许是这样：pix2code已经产物化，产物名字和他们公司。

本文来源：koko体育app下载-www.heimaka.com