大家好，我是灵歌的日常，上次用 Trae 国内版生成了一个科技风网站，效果不太理想，详情可以参见我之前写的篇文章。
《一文带你对比 Trae 国内版与国际版》 juejin.cn/post/747777…
这次决定静下心来用 Trae 好好改造一下。这一改造就是 2 个多小时，好在最终效果还不错，现在来和大家分享一下。
在文章的开始，先来看一下网站改造前后的对比：
改造前：
改造后：
怎么样，几乎完全不需要写代码，通过对话的方式就可以拥有一个科技感满满的网站，动不动心？
下面就请跟我一起来看看如何将原来的旧页面改造成炫酷的船新版本！
完整的项目我放在了 Github，感兴趣的朋友可以下载下来看看完整的项目。
一、准备与目标
本次优化的目标：
- 在保持科技风核心内容不变。
- 将原来不堪入目的页面修改成符合要求的精致页面。
- 加长页面，并且给页面加入一些页面滚动的动画。
二、优化
本次优化过程使用了不同的方法尝试效果，旨在完成优化目标的同时也尝试下哪种效果最好用，下面一一来介绍：
（一）UI 样式优化
- 尝试使用网站 URL 作为样式参考
将一个网站模板的地址 URL 扔给 Trae ，并让它根据该页面风格对项目当前页面进行改造。
- 尝试使用图片作为样式参考
截图网站模板（或者设计稿）里面某个模块的样式发送给 Trae，并让它根据图片风格进行样式设计。
整体体验下来，Trae 基本上并没有按照图片来，只是在一个极其模糊的方向上修改了一些页面的样式，但最终整体效果是好的。
（二）背景动画修改
提示它修改背景的 3D 粒子效果，修改形状，加入了一些颜色动画和渐变，这部分的任务 Trae 完成的还是相当不错的，完美生成了我想要的效果。
（三）页面滚动动画
提示它使用 GSAP 来给页面增加滚动动画，Trae 也成功 get 了这句话的含义，自动安装依赖，并给页面的元素增加了相应动画，不过生成的动画有 bug，还是手动微调了一下，不过还是比自己写要省事儿很多。
（四）风格修改
当页面的整体风格确定后，这时再通过语言描述某个模块的风格修改就会准确很多，比如之前的顶部 navbar 是灰白风格，提示 Trae 来将风格配色统一，它就能根据整体配色等情况很好的实现目标。
统一风格前：
统一风格后：
明显顺眼了很多。
三、总结与展望
总结来说一下这几种交互方式，当在和 Trae 交互的过程中：
- 图片或网址参考效果有限：根据图片或网址来生成 UI 的效果并不是非常理想，Trae 在一个特别模糊的方向上会优化一下当前的 UI。
- 细节调整繁琐：虽然 Trae 能够生成一些基本的样式和动画，但是要达到理想的效果，还需要进行一些细节调整。比如，动画的时机、持续时间、效果等都需要手动去调整。
- 尽可能的明确命令：再和 Trae 交流的时候尽可能的去明确你的语意，要使用的库等内容，千万不要模糊不清，否则很容易导致达不到理想的修改效果。
- 提供清晰的技术栈和框架：除非特意去指定，否则 Trae 基本不会主动去使用组件库或框架来完成任务，容易导致生成的代码样式内容堆积成山。
如果你还没有尝试过使用 Trae，就请按照上面的方法生成一个属于自己的页面吧！当然，如果你有更好的使用心得，也欢迎随时沟通交流！
