十年前,双创(大众创业,万众创新)正火的时候,我也按捺不住,和一帮同学和朋友一头冲了进去,要做一个教育相关的项目,结果亏了近百万以后,灰溜溜地退了出来。
这么多年过去了,我对整个开发的过程依然记忆犹新,当时是用Visio画出粗糙的原型图,然后交给美工用Photoshop“加工”成漂亮的界面,切图后交给程序员去开发。
由于系统功能庞杂,既有Web端又有手机端,既有用户界面又有后台管理界面,光是原型图就画了好几百张,每个原型图上又有大量的UI元素,画原型图都快吐了。
那个时候我就想:如果有一个工具,能让我用口述的方式描述下界面,然后自动给我生成就好了。
没想到,如今在AI的加持下,竟然真的有工具把这个想法给实现了。
这个工具就是UXBot :
https://www.uxbot.cn
![]()
从界面就可以看出,现在只要用自然语言输入自己的创意和需求,UXbot就可以一次性生成完整的交互式原型。
01
从自然语言到界面原型
我本来想用一个博客系统来尝试一下,但是转念一想,这太简单了,还是找个实际的需求吧。
我之前曾经手工管理过一个组队读书的活动,基本的规则是这样的:发布一本书的读书活动,设定多少周读完,参与者需要缴纳押金加入,每周需要提交一篇读书笔记,活动结束退还押金,当然,连续2周都没提交的笔记人,押金被用来给大家发红包。
我把需求稍微整理了一下发给了UXBot:
![]()
让我吃惊的是,它很快就给我生成了完整而漂亮的流程图,这流程把页面都串了起来。
![]()
然后我选择一种界面风格:时尚简约
![]()
UxBot很快把这些产品原型界面给生成了,无论是布局还是细节都非常完善。
这是它生成的系统首页,的确是简约风,配图也很好,尤其是它主动总结了一句话:让阅读成为持久的习惯,这正是读书活动的目的!我自己都没想到,它帮我我想到了。
![]()
下面这个界面是配置一个读书活动:

这是查看正在进行的读书活动,并且编辑读书笔记:

这是一个读书活动的最终汇总情况:

UXBot给我的最大感受就是:只要输入一个需求,就能一口气生成完整的、可交互的产品原型。
而市面上其他的工具,还得靠一大段提示词去“哄”,而且只能一页页地慢慢生成,根本做不到把所有页面串起来,形成一个真正连贯的设计。生成的效果一看就是套用模版来的,想改点东西也改不了,自主性太差。
02
修改界面:AI驱动的原型更新
如果你想增加一个新业务或者功能,还可以手工来增加新流程和新页面,操作非常简单,这里不再详述。
设计好流程和页面以后,让UXbot给你自动生成就行。

当然,也可以通过拖拽的方式来修改交互产品交互逻辑:

如果对自动生成的界面不满意,可以使用UXBot内置的专业界面设计工具进行修改:
![]()
但是,都AI时代了,还是用自然语言驱动AI来修改吧!
例如:增加一种新的支付方式:银行卡
![]()
UXBot很快就帮你改好了:
![]()
03
协作与导出
在设计原型的过程中,可以需要和产品经理、前端、后端等人进行讨论和协作,UXBot提供了三个功能:预览、分享和导出。
![]()
预览的效果我很喜欢,是直接通过网页查看,感觉就是一个完整的Web应用了:

分享的功能也比较直观,可以让别人查看你的项目,也可以让别人导入你的项目。
![]()
项目导出的时候,支持导出成HTML、Sketch文件、Web。
![]()
![]()
04
炸裂功能:导出成前端代码
细心的同学可能从上面的“导出”截图中看到Vue.js了,没错,UXBot实现了“所见即所得”,你看到的界面原型,立刻变成了前端代码:
![]()
赶紧用VS Code打开看一下,可以看到,各种数据类型user,book,activity一应俱全,各种mock数据也自动生成。
![]()
各种Vue组件,以及相关代码也都写好了:
![]()
![]()
这绝对是个炸裂的功能啊,想想看,以后产品经理把交互式的原型用UXBot设计好,前端开发立刻就拿到导出的代码,和后端进行集成,这开发速度实在太快了。
现在市面上的很多AI Coding工具,都是直接从自然语言生成前端界面,省去了设计原型的过程,看起来更快,但是界面改起来非常麻烦,用过的同学应该深有体会。
UXBot则是先创建原型,讨论定稿后再生成前端代码,这个开发过程更符合现在的开发流程,更加顺畅,返工更少。
05
更进一步:直接运行
既然前端代码已经准备好,为啥不直接在服务器上运行起来呢?
UXBot早已想到这一点:
![]()
当你点击运行以后,一个真正的、可以交互的网站就运行了起来:

界面上的元素都可以点击,动态效果也已经实现,页面之间也可以跳转,就是一个成品网站的样子。
只要完成“临门一脚”,和后端接口进行集成,这个网站就可以交付用户使用了!
06
展望未来
在AI的加持下,UXBot能自动地帮我们梳理需求,形成工作流,创建产品页面,自动生成交互式的产品原型,甚至前端代码。
由于不需要机械地画图,极大地提升了工作效率,可以把节省的时间用来更多地思考产品逻辑和商业价值。
用AI帮助人类摆脱繁琐重复的劳动,专注更有价值的工作,我觉得这就是UXBot的最大价值。
未来的开发,也许就是这样:说一句话,AI帮你画出原型;再说一句话,AI帮你生成前端;最后和后端集成,点击“上线”。
想到这里,我又有点想重新创业了。
最后,欢迎大家尝试使用UXBot,感受下AI给生产力带来的巨大提升!
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.