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

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

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

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

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

這個(gè)工具就是UXBot ：

https://www.uxbot.cn

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

01

從自然語(yǔ)言到界面原型

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

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

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

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

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

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

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

下面這個(gè)界面是配置一個(gè)讀書活動(dòng)：

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

這是一個(gè)讀書活動(dòng)的最終匯總情況：

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

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

02

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

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

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

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

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

但是，都AI時(shí)代了，還是用自然語(yǔ)言驅(qū)動(dòng)AI來(lái)修改吧！

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

UXBot很快就幫你改好了：

03

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

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

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

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

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

04

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

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

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

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

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

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

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

05

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

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

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

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

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

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

06

展望未來(lái)

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

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

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

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

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

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