近日，中國(guó)首個(gè)AI原生集成開(kāi)發(fā)環(huán)境（AI IDE）Trae 國(guó)內(nèi)版正式上線(xiàn),作為一個(gè)愛(ài)湊熱鬧的程序員肯定是要去嘗嘗咸淡的(主要是它不收我錢(qián))。于是我就有一個(gè)想法,看它能不能讓我不寫(xiě)一行代碼快速幫我開(kāi)發(fā)一個(gè)網(wǎng)頁(yè)。既然你是AIIDE,那你就幫我做一個(gè)AI對(duì)話(huà)頁(yè)面吧。話(huà)不多說(shuō),我們直接開(kāi)始!

首先直接到官網(wǎng)下載Trae^[1],然后新建一個(gè)文件夾打開(kāi),選擇Builder 模式,然后把它當(dāng)成你的小弟給他提需求,據(jù)說(shuō)它可以幫助你從 0 到 1 開(kāi)發(fā)一個(gè)完整的項(xiàng)目。

我們向他提出需求:

使用html+css+js生成一個(gè)AI對(duì)話(huà)頁(yè)面

然后等待一會(huì),它就會(huì)在我們文件夾中生成代碼文件,點(diǎn)擊全部接收。

根據(jù)它的提示啟動(dòng)一個(gè)本地服務(wù),這里使用了python啟動(dòng),當(dāng)然你也可以選擇其它方式。

啟動(dòng)完成之后就會(huì)看到它生成的第一版頁(yè)面。

接下來(lái)我們可以繼續(xù)給它提需求,比如加入提問(wèn)歷史列表側(cè)邊欄目:

增加歷史對(duì)話(huà)列表功能 pc端直接放左側(cè),默認(rèn)顯示,移動(dòng)端默認(rèn)隱藏,點(diǎn)擊左上角圖標(biāo)滑出的同時(shí)出現(xiàn)蒙版。

然后它就會(huì)修改我們的文件,我們可以先預(yù)覽一下決定是否接收這個(gè)調(diào)整。

此時(shí)我發(fā)現(xiàn)移動(dòng)端效果不太行,展開(kāi)列表會(huì)擠壓內(nèi)容,并且樣式不美觀。沒(méi)關(guān)系,我們?cè)诮o它提需求,反正它又沒(méi)脾氣：

移動(dòng)端歷史對(duì)話(huà)列表出現(xiàn)會(huì)擠壓整體元素,要求對(duì)話(huà)列表出現(xiàn)時(shí)且浮在內(nèi)容上方。展示圖標(biāo)在列表出現(xiàn)時(shí)隱藏 歷史對(duì)話(huà)列表樣式優(yōu)化 添加點(diǎn)擊效果 展開(kāi)列表的時(shí)候讓菜單圖標(biāo)消失。

優(yōu)化過(guò)后你別說(shuō)效果還可以。

最后看一下整體效果。

移動(dòng)端

PC端 

整個(gè)過(guò)程不到十分鐘,并且我們沒(méi)有寫(xiě)一行代碼就完成了前端頁(yè)面(當(dāng)然后續(xù)和后端調(diào)試接口的時(shí)候肯定要寫(xiě)的)。不得不說(shuō)現(xiàn)在AI真的太強(qiáng)大了,作為前端的你現(xiàn)在慌不慌!

參考資料

[1] https://docs.trae.com.cn/