- 概述
我作为一名后台程序员也时常想着能不能开发出一款属于自己的牛逼的产品，让很多人用，同时看看能不能为自己赚点儿外快啥的。但是人靠衣装，马靠鞍，理想很丰满，技术也不能问题，但是到了UI设计这里对于我一个纯理工科的人来说就很够呛，自己设计的UI总是惨不忍睹，像Figma之类的专业设计软件也很难上手。而且就我的欣赏水平而言，我想我自己设计出来的UI开发出来的产品，不出意外一定没有人想用。那么有没有那么一款AI软件能够帮我无脑生成好设计稿呢？
说干就干，在寻找了大量的工具之后，我发现了一款特别适合我这种门外汉的AI设计软件——Visily。这是一款国外的AI设计软件，需要科学上网才能使用，具体参考科学上网的教程。
它的主页大概长上面这样儿，目前可以支持通过截屏生成UI设计稿、通过手绘的设计草图生成UI、通过截屏生成主题等等。这里所谓的主题的意思就是一些配色、字体、线条之类的东西，可以方便真正的设计师来设计UI，但是显然对于程序员来说没啥用。未来Visily还会支持根据提示词来生成UI的功能，但是目前我们只能够期待一下了。
对我而言，这个工具有用的地方在于2点：
- 帮助我根据截屏直接生成好UI设计稿，包括css代码，像下面就是我用todo的截屏生成的设计稿
- 提供了大量免费且有用的模版，可以方便我在模板的基础上来修改出自己的设计稿
有了上面这两点功能，对于个人开发者来说我想也够用了，一方面可以帮你copy别人的网站设计，自己做一些修改，另一方面也有免费且看起来还不错的UI模板供你使用，来开发出属于自己的UI。至少对于我这样一个完全不懂UI设计的门外汉来说，能够帮助我设计出一些能看的UI就已经很幸福了，并且还能直接copy需要的css代码，对于一个后台程序员来说不要太友好。
- Visily使用 2.1 截屏生成设计稿使用
- 1. 先新建一个画布
可以选择新建一个空的画布、通过模板新建、将截屏转换成设计稿以及通过草图转换
- 2. 选择convert from screenshot 即从截屏生成，就可以得到你的截屏的设计稿了
- 3. 例如这里我们截取了一个todo的UI，生成的设计稿如下，选择inspect可以直接获取你选择地方的css代码，非常方便。
在完成UI设计稿的生成之后，可以根据左边的工具栏来设计和调整你的UI设计稿子。 2.2 通过草稿生成UI设计稿
- 1. 手绘UI设计稿，咱们可以尽情展示自己灵魂画手的魅力来绘制UI，如下：
- 2. 选择Convert from sketch功能，上传UI手稿
visily就帮我们生成了一个UI，虽然吧UI整体看起来乱糟糟的，但是咋们手动调整一下就可以了，也不是不能用。
2.3 生成UI设计稿模板
Visily有模版生成的功能也是作为个人开发者非常喜欢的，这个软件自带了一些常规和常用的UI设计稿模板，包括Web网页和App的。
- 1.择你喜欢或者需要的模板，这里选择了一个电商网站的首页模板
-
- 这样一个完整且优秀的电商网站模板就导出好了，可以在上面做出喜欢的修改
3. 总结
当然visily本身还有很多功能可以使用，其中最期待是根据提示词来生成UI设计稿，这样就可以彻底解放程序员的开发能力，做出自己想要且美观的产品。不得不说随着AI技术的发展，未来更大的可能行一个人可以完成一个团队的任务，这也利好了个人开发者或者创业者。但是，我始终觉得目前还不用担心AI会抢走我们的饭碗，因为就生成的UI来说，虽然看起来像那么回事儿，但是离真正的商业设计稿还是有所差距，需要专业的UI设计师来进行调整。
