十年前,雙創(大眾創業,萬眾創新)正火的時候,我也按捺不住,和一幫同學和朋友一頭沖了進去,要做一個教育相關的項目,結果虧了近百萬以后,灰溜溜地退了出來。
這么多年過去了,我對整個開發的過程依然記憶猶新,當時是用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.