「这次的新产品主页，你怎么看？」您正在与UI、前端、市场营销和运营部门开会。 "先把活动横幅放在最上面？" "然后给不同的列添加图标，两行就够了。" "你可以把专栏的位置放在下面。" “***接下来，别忘了添加用户菜单。” …… 一边听着同事的建议，一边在白板上画出原型：“大家商量一下吧，时间不等人，后面还需要UI设计和前端开发……” “差不多就是这样了吧？”前端开发小丁打断了你的发言。 小丁的电脑运行着你说的一个页面，每一个横幅，每一个按钮，每一个跳转都可以点击，所有的文字和图片都放在该出现的地方。HTML代码简洁明了，就好像产品已经做好了一样。 这么快，你是怎么做到的？ 这群开发者会不会是AI？ 好吧……可能是真的。 手绘框架图，同步自动生成 小丁使用下面视频中的方法。摄像头实时捕捉白板上的草稿，自动生成设计开发的网页。 在视频中，一位产品经理在白板上绘制了一个原型草图。 屏幕上，显示着识别过程，同时生成代码和UI界面预览。 的放大细节清楚地展示了识别过程。 随着画图的产品经理停止书写，识别完成，此时的代码就清晰了。 网页也生成了，和普通网页一样，可以随意调整大小和适配。 整个过程中，电脑借助摄像头捕捉到产品经理在白板上绘制的原型稿，立即“画”出UI，生成代码，展示完成的网页。 产品经理绘制横幅，屏幕出现横幅； 产品经理绘制字幕，屏幕出现字幕； 产品经理画了一个文字区域，屏幕区域出现了文字。 每一步，机器都会自动识别产品经理画的是什么，直接转成相应的网页样式，并附上HTML代码。任何增加或删除都可以实时跟进和更新。 以前，决定一个网页长什么样子，产品经理、UI、前端、营销人员聚在一起沟通、讨论、扯皮，出N个方案，开N个会，耗时数天甚至几周才能完成。结束。 从需求分析开始，产品经理出原型，大家开会修改×N； UI画设计图，大家开会修改×N；不仅如此，有些人的想象力太快了，看不到最终成品就找不到问题了。他们不得不一次又一次地返工产品、用户界面和前端。 结果工期越来越长，加班越来越晚，发际线越来越高…… 现在有了这个工具，大家只要马上就能看到当他们在白板上画画时，成品是什么样子的？方案一经敲定，便可一次性成型。也可以直接用来完善UI和代码，为设计师和前端开发省去不少的精力。可以将一两周的工作压缩到一两天，提高了效率。N次。 来自欧洲的teleportHQ 这个网页生成草稿的视频在领英和推特上火了，视频里那个神奇的工具是什么？ 这个工具来自一个名为teleportHQ的项目，该项目由两家欧洲公司EvoForge和Corebuild共同创立，并得到了欧洲区域发展基金的赞助。他们希望这个项目能让非技术人员轻松创建可视化应用程序和网页。 本项目通过支持向量机（SVM）、神经网络和XGBoost实现网页的语义分割。目前可以生成React、ReactNative、Vue、HTML/CSS和AngularJS代码。 在推特上引发“震惊” 虽然正式产品还未出炉，但已经让不少推特网友震惊了。他们看到这个视频后的反应是： 喜欢这样： 喜欢这样： 网友纷纷表示，这简直就是未来！ “有时候我觉得我看到了未来，嗯，就像我看到这个一样。” “虽然我觉得UI会很酷，但不妨碍这个很酷！” 但其他设计师认为这可以为他们节省很多时间。 有人畅想了这项技术未来的应用。 “到2025年，所有的演讲都由演讲者手绘，然后AI自动生成。” 不过，也有人认为实时同步虽然牛逼，但好像没什么用。 “毫无疑问，视频很棒，但视频中最强大的实时转换是最无用的，为什么我们需要将每个步骤实时转换成代码？” 还有其他选择 看到这个炫酷的效果，是不是也想用在自己的头脑风暴会议上呢？ 不过这个teleportHQ还没有开发出来。自2017年8月16日起，项目有24个月的时间完成任务。也就是说，如果这两家欧洲公司实力强大，明年夏天就能上市。 好在其他公司出过很多类似的产品，找个开源的试试看，隔壁的UI会被你吓哭的。 微软Sketch2Code 今年夏天，微软开源了一个名为Sketch2Code的项目，可以将用户上传的界面图转换成HTML页面。 大体步骤如下： 》·用户将自己绘制的手绘稿拍照上传。 ·视觉模型检测图像中出现的HTML组件并标记它们的位置。 ·识别所有部分的手写文本。 ·布局算法根据各部分的边界空间信息生成网格结构。 ·HTML生成引擎使用以上信息生成HTML代码。pix2code 丹麦公司UizardTechnologies曾发表论文介绍他们训练好的pix2code模型，可以识别UI组件并生成效果图。 这个模型的训练大约需要三个步骤： 首先，你需要使用电脑视觉技术来识别场景（截图）和UI组件（按钮，文本区域等）； 其次，你需要让这个模型学习前端代码，生成语法和语义上正确的代码示例； ***，重复前两步进行训练。 演示效果大致是这样的： pix2code已经商业化，产品名和他们的公司名一样，叫Uizard。目前看来效果还是蛮不错的。根据视频演示，不仅可以直接通过手机扫描生成UI效果图，还可以直接导入到UI设计软件中进行修改。 Airbnb Airbnb有一个内部项目，可以将手绘的网页部件直接转换成成品。 他们认为机器可以识别像汉字这样的数千个复杂的手写符号，因此识别WebUI的100多个常用组件会更容易。 于是，他们用十几个UI组件训练了一个原型，可以根据白板上的草图自动生成原型代码和设计文件。△左边是生成的效果 这项技术已经应用于Airbnb产品的开发设计中。 传送门 teleportHQ https://teleporthq.io/ （包含两个技术博客） 微软的Sketch2Code https://github.com/Microsoft/ailab/tree/master/Sketch2Code pix2code：从GUI屏幕截图生成代码 github.com/tonybeltramelli/pix2code 网址：https://uizard.io/research/#pix2code 另一个作者改进的开源项目：https://github.com/ashnkumar/sketch-code Airbnb的草图界面 https://airbnb.design/sketching-interfaces/
