广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

真的好用!输入简单的提示词5秒就能变成精美的网站UI设计图,这下UI设计师是该高兴还是该头疼...
发布日期:2024-10-25 15:21:30 浏览次数: 856 来源:薄荷一味

【导读】目前Figma中非常流行的AI创意插件Musho,输入几行简单的提示词就能转变成精美的网站UI设计图。这下UI设计师是该高兴还是该头疼...

UI设计师、产品经理、自由开发者们,做网站设计UI图头疼吗?

我之前做过多年程序员和项目技术负责人,每次产品经理/UI设计师同事做网站系统UI设计图都是抓耳挠腮,看上去挺痛苦的。

一套UI改来改去,甲方总是不满意。要么就是丑,要么就是不符合他们的喜好调性...同事欲哭无泪,就差点让把鼠标甩甲方头上让其自己来画了。

在整个网站开发流程中,UI设计应该是排非常靠前的。和业务过完需求之后,产品经理会出原型设计图,接下来就是UI设计师依照原型画出可执行落地的UI图。

再是IT(前后端)介入,将网站页面交互及功能进行落地实现。可以说,UI设计的好不好看、交互是否合理,很大程度决定了这个系统的口碑。

近期冲浪的时候看到一款AI类创意工具产品--Musho(地址是musho.ai,需要魔法才能使用)。

这是一款主要给UI设计师及自由开发者使用的网站UI创意插件(也能设计PPT海报等),在2024年4月份ProductHunt月榜排名第5。

Musho是这么介绍的:“您的新AI设计助手”。

网站主页中显示,这款工具能够创建网站页面,品牌设计图、文生图、图片创作、PPT等等。

制作这个插件的作者是将其定义为侧重于UI设计方向的辅助工具,本质上和其他生成式文生图AI类似,只不过这个工具调教成用于UI设计方向的。

目前插件需要配合Figma来使用,该插件内置了ChatGPT来提供文本理解和创意回答,Lummi来动态提供图片。

所以看到这,基本上就知道了这款工具的定位及实现思路了:

插件定位为文生图工具;内置调用ChatGPT的API理解文义并设计图片,Lummi提供图片支撑,二者共同完成UI设计。

下面展示下我设计网站首页的试用过程。

点击获取插件,会跳转提示你需要在Figma中打开。Musho提供谷歌账号和邮箱登录,我这里使用谷歌账号注册登录。

此时就已经使用该账号进入了Figma的工作台页面。

工作台画布任意地方右键,点击plugins就能唤出我们Musho插件。

(这里有个小细节挺有趣的,在Musho提示词输入界面,中间的logo小人的眼睛会跟着你的图标走)

可以看到,插件的页面非常简单,只有一个模式选择下拉框和Prompts文本输入框。

下拉框分别指定4种模式,分别是网页模式、社交媒体模式(可以近似理解为小Red书上的这种图片)、实验模式(万能模式,很慢,但是结果会准确一些)、幻灯片模式。

这里我们选择网页模式,因为主要是想试用设计网站首页。

这里我输入了一段提示词(最好是使用英文,因为ChatGPT对英文理解更加准确):

Create a landing page IdealCrafters is design studio of innovative and user-center product design for chinese.Our tone is professional yet creative,speaking to forwad-thinking companies and startips.We specialize in intuitive UX/UI.

中文意思:给IdealCrafters创建一个登陆页,这是一个为中国人提供创意和以用户为中心的产品设计工作室。我们的语气专业而富有创意,与有远见的公司和初创企业交谈。我们专注于直观的UX/UI。

我们将刚刚这段提示词放到Musho中,看看会生成什么样的效果。

大约过了几秒钟,就生成好了。起初我是想设计中文网站,所以特意在提示词中注明是给中国人提供的。ChatGPT没有理解到,下次得注明使用中文估计才能生效。

(我本想再用中文生成一次,但一个账号只有一次免费生成额度,有点抠,权当是抛砖引玉吧。)

网页整体分为了6屏,导航页、公司简介介绍、风格调性、历史产品样例、公司的联系方式等基本上都覆盖到了,与目前主流的网站首页风格一致。

并且值得一提的是,生成的网页还是响应式的,你拖动变大或变小,页面内容也会随着尺寸比例而变化,这就很酷了。

下面是细节图,一起欣赏下:

可以看出,生成的质量还是非常不错的。只要有一份好的、准确的提示词,就能生成一份完成度80%左右的交付件了。

然后在此基础之上进行文本图片细节调整修改,效率还是能提升不少的。

好用归好用,免费额度很少,如果想使用更多,售价目前看下来也是不便宜,毕竟一分钱一分货吧,感兴趣的可以去试用下。


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询