近日，中国首个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/
