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

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

我們向他提出需求:

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

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

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

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

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

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

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

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

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

優化過后你別說效果還可以。

最后看一下整體效果。

移動端

PC端 

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

參考資料

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