十年前，雙創(chuàng)（大眾創(chuàng)業(yè)，萬眾創(chuàng)新）正火的時候，我也按捺不住，和一幫同學(xué)和朋友一頭沖了進(jìn)去，要做一個教育相關(guān)的項(xiàng)目，結(jié)果虧了近百萬以后，灰溜溜地退了出來。

這么多年過去了，我對整個開發(fā)的過程依然記憶猶新，當(dāng)時是用Visio畫出粗糙的原型圖，然后交給美工用Photoshop“加工”成漂亮的界面，切圖后交給程序員去開發(fā)。

由于系統(tǒng)功能龐雜，既有Web端又有手機(jī)端，既有用戶界面又有后臺管理界面，光是原型圖就畫了好幾百張，每個原型圖上又有大量的UI元素，畫原型圖都快吐了。

那個時候我就想：如果有一個工具，能讓我用口述的方式描述下界面，然后自動給我生成就好了。

沒想到，如今在AI的加持下，竟然真的有工具把這個想法給實(shí)現(xiàn)了。

這個工具就是UXBot ：

https://www.uxbot.cn

從界面就可以看出，現(xiàn)在只要用自然語言輸入自己的創(chuàng)意和需求，UXbot就可以一次性生成完整的交互式原型。

01

從自然語言到界面原型

我本來想用一個博客系統(tǒng)來嘗試一下，但是轉(zhuǎn)念一想，這太簡單了，還是找個實(shí)際的需求吧。

我之前曾經(jīng)手工管理過一個組隊(duì)讀書的活動，基本的規(guī)則是這樣的：發(fā)布一本書的讀書活動，設(shè)定多少周讀完，參與者需要繳納押金加入，每周需要提交一篇讀書筆記，活動結(jié)束退還押金，當(dāng)然，連續(xù)2周都沒提交的筆記人，押金被用來給大家發(fā)紅包。

我把需求稍微整理了一下發(fā)給了UXBot：

讓我吃驚的是，它很快就給我生成了完整而漂亮的流程圖，這流程把頁面都串了起來。

然后我選擇一種界面風(fēng)格：時尚簡約

UxBot很快把這些產(chǎn)品原型界面給生成了，無論是布局還是細(xì)節(jié)都非常完善。

這是它生成的系統(tǒng)首頁，的確是簡約風(fēng)，配圖也很好，尤其是它主動總結(jié)了一句話：讓閱讀成為持久的習(xí)慣，這正是讀書活動的目的！我自己都沒想到，它幫我我想到了。

下面這個界面是配置一個讀書活動：

這是查看正在進(jìn)行的讀書活動，并且編輯讀書筆記：

這是一個讀書活動的最終匯總情況：

UXBot給我的最大感受就是：只要輸入一個需求，就能一口氣生成完整的、可交互的產(chǎn)品原型。

而市面上其他的工具，還得靠一大段提示詞去“哄”，而且只能一頁頁地慢慢生成，根本做不到把所有頁面串起來，形成一個真正連貫的設(shè)計。生成的效果一看就是套用模版來的，想改點(diǎn)東西也改不了，自主性太差。

02

修改界面：AI驅(qū)動的原型更新

如果你想增加一個新業(yè)務(wù)或者功能，還可以手工來增加新流程和新頁面，操作非常簡單，這里不再詳述。

設(shè)計好流程和頁面以后，讓UXbot給你自動生成就行。

當(dāng)然，也可以通過拖拽的方式來修改交互產(chǎn)品交互邏輯：

如果對自動生成的界面不滿意，可以使用UXBot內(nèi)置的專業(yè)界面設(shè)計工具進(jìn)行修改：

但是，都AI時代了，還是用自然語言驅(qū)動AI來修改吧！

例如：增加一種新的支付方式：銀行卡

UXBot很快就幫你改好了：

03

協(xié)作與導(dǎo)出

在設(shè)計原型的過程中，可以需要和產(chǎn)品經(jīng)理、前端、后端等人進(jìn)行討論和協(xié)作，UXBot提供了三個功能：預(yù)覽、分享和導(dǎo)出。

預(yù)覽的效果我很喜歡，是直接通過網(wǎng)頁查看，感覺就是一個完整的Web應(yīng)用了：

分享的功能也比較直觀，可以讓別人查看你的項(xiàng)目，也可以讓別人導(dǎo)入你的項(xiàng)目。

項(xiàng)目導(dǎo)出的時候，支持導(dǎo)出成HTML、Sketch文件、Web。

04

炸裂功能：導(dǎo)出成前端代碼

細(xì)心的同學(xué)可能從上面的“導(dǎo)出”截圖中看到Vue.js了，沒錯，UXBot實(shí)現(xiàn)了“所見即所得”，你看到的界面原型，立刻變成了前端代碼：

趕緊用VS Code打開看一下，可以看到，各種數(shù)據(jù)類型user，book，activity一應(yīng)俱全，各種mock數(shù)據(jù)也自動生成。

各種Vue組件，以及相關(guān)代碼也都寫好了：

這絕對是個炸裂的功能啊，想想看，以后產(chǎn)品經(jīng)理把交互式的原型用UXBot設(shè)計好，前端開發(fā)立刻就拿到導(dǎo)出的代碼，和后端進(jìn)行集成，這開發(fā)速度實(shí)在太快了。

現(xiàn)在市面上的很多AI Coding工具，都是直接從自然語言生成前端界面，省去了設(shè)計原型的過程，看起來更快，但是界面改起來非常麻煩，用過的同學(xué)應(yīng)該深有體會。

UXBot則是先創(chuàng)建原型，討論定稿后再生成前端代碼，這個開發(fā)過程更符合現(xiàn)在的開發(fā)流程，更加順暢，返工更少。

05

更進(jìn)一步：直接運(yùn)行

既然前端代碼已經(jīng)準(zhǔn)備好，為啥不直接在服務(wù)器上運(yùn)行起來呢？

UXBot早已想到這一點(diǎn)：

當(dāng)你點(diǎn)擊運(yùn)行以后，一個真正的、可以交互的網(wǎng)站就運(yùn)行了起來：

界面上的元素都可以點(diǎn)擊，動態(tài)效果也已經(jīng)實(shí)現(xiàn)，頁面之間也可以跳轉(zhuǎn)，就是一個成品網(wǎng)站的樣子。

只要完成“臨門一腳”，和后端接口進(jìn)行集成，這個網(wǎng)站就可以交付用戶使用了！

06

展望未來

在AI的加持下，UXBot能自動地幫我們梳理需求，形成工作流，創(chuàng)建產(chǎn)品頁面，自動生成交互式的產(chǎn)品原型，甚至前端代碼。

由于不需要機(jī)械地畫圖，極大地提升了工作效率，可以把節(jié)省的時間用來更多地思考產(chǎn)品邏輯和商業(yè)價值。

用AI幫助人類擺脫繁瑣重復(fù)的勞動，專注更有價值的工作，我覺得這就是UXBot的最大價值。

未來的開發(fā)，也許就是這樣：說一句話，AI幫你畫出原型；再說一句話，AI幫你生成前端；最后和后端集成，點(diǎn)擊“上線”。

想到這里，我又有點(diǎn)想重新創(chuàng)業(yè)了。

最后，歡迎大家嘗試使用UXBot，感受下AI給生產(chǎn)力帶來的巨大提升！