从样机创建网站的10个有用工具

一组设计师可能会进行头脑风暴,并勾勒出许多设计想法。然后,设计师花费数小时来完成布局设计。然后他们可以使用工具将设计转换为原型,或者让工程师从布局模型中进行编码。从创建布局到 制作原型 对于手机,可能需要数小时甚至数天的时间。但是,使用这些工具可以使整个过程自动化。因此,这里有一些工具可让用户创建 HTML网站 从样机中创建解决方案,该过程通常需要数周的时间。

pix2code

它需要从设计人员那里手绘UI原型,然后将其提供给深层网络以生成具有UI设计的XCode项目。 pix2code还可以使用不同的HTML / 的CSS / JS框架为Android或Web应用程序生成代码。

pix2code

屏幕截图转码

将设计模型转换为静态网站的神经网络。

屏幕截图转码

草图代码

Keras模型可从手绘网站模型生成HTML代码。为绘制的源图像实现图像字幕体系结构。这是一个深度学习模型,它采用手绘的Web样机并将其转换为有效的HTML代码。它使用图像字幕体系结构从手绘网站线框生成HTML标记。

草图代码

草图2代码

Sketch2Code是一种使用AI将手写用户界面设计从图片转换为有效HTML标记代码的解决方案。

草图2代码

Sketch2React

这是一个Sketch插件,一个框架和一个React Web应用程序,可将Sketch设计文件转换为原型React代码。那会吐出真正的HTML。

Sketch2React

反应Sketchapp

这是一个开放源代码库,可让您编写可渲染到Sketch文档的React组件。

反应Sketchapp

设计编码

这是从PSD和Sketch设计中提取信息的最简单方法。只需将设计上传到Avocode,然后从设计中选择所需的内容即可。

设计编码

页面绘制

页面绘制是React Web应用程序的UI构建器。它的工作方式类似于Sketch或Figma样式设计工具,但发出高质量的JSX代码

页面绘制

用户界面Constructor

用户界面 Constructor无需任何编码专业知识即可为设计人员提供完整的代码功能。设计立即转换为HTML和CSS干净的语义代码。您还可以选择编辑和添加自己的代码。

用户界面Constructor

餐巾

对于使用Balsamiq样机的人来说,这是一个有用的工具。 餐巾允许您几乎立即从原始Balsamiq文件中创建可点击的原型。使用Napkee,您可以将使用Balsamiq创建的模型导出到HTML,CSS或JavaScript或Adobe Flex。

餐巾

1 Comments

  1. 弗朗西斯说:

    很棒的清单!

    我还要将Anima App添加到列表中。他们拥有直接从Sketch构建网站和高保真原型的出色工具,可以将其导出为代码。它甚至在Sketch中具有一个交互/动画编辑器。

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.