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

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

我們向他提出需求:

使用html+css+js生成一個AI對話頁面

然后等待一會,它就會在我們文件夾中生成代碼文件,點擊全部接收。

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

啟動完成之后就會看到它生成的第一版頁面。

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

增加歷史對話列表功能 pc端直接放左側(cè),默認顯示,移動端默認隱藏,點擊左上角圖標滑出的同時出現(xiàn)蒙版。

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

此時我發(fā)現(xiàn)移動端效果不太行,展開列表會擠壓內(nèi)容,并且樣式不美觀。沒關系,我們在給它提需求,反正它又沒脾氣：

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

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

最后看一下整體效果。

移動端

PC端 

整個過程不到十分鐘,并且我們沒有寫一行代碼就完成了前端頁面(當然后續(xù)和后端調(diào)試接口的時候肯定要寫的)。不得不說現(xiàn)在AI真的太強大了,作為前端的你現(xiàn)在慌不慌!

參考資料

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