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%左右的交付件了。

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

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