Trae Code模式开发个人网站实战

为什么选Trae做开发？

之前用Cursor写代码，后来试了Trae的Code模式，发现中文理解能力确实强，而且Agent模式能自己规划任务、多步执行，做个人项目非常顺手。

这次用Trae从零开发了我的个人网站——刘科元 AI Lab, 整个过程记录下来，分享给大家。

项目技术栈

• 框架：Next.js 15 + TypeScript
• 样式：Tailwind CSS v4
• 动画：Framer Motion
• 部署：Vercel

开发过程记录

第一步：初始化项目

用Create Next App一键初始化，Trae帮我自动安装依赖、配置ESLint。遇到Next.js版本问题（默认装了16，我要15），Agent直接帮我降级解决了。

第二步：搭建基础框架

让Trae帮我规划目录结构，然后一步步实现：

• 全局样式配置（主题色、字体）
• Navbar导航栏组件
• Hero首屏组件
• 响应式布局

第三步：核心页面开发

首页Hero区： 最考验设计感的部分。我给Trae描述了想要的效果——"AI科技感、深色背景、发光效果、网格线"，它直接生成了带Framer Motion动画的组件，效果超出预期。

数据展示区： 数字滚动动画，用useInView + useEffect实现了滚动到视口时数字从0跳到目标值的效果。

项目卡片： 毛玻璃效果、悬停光晕、渐变边框，一个组件搞定。

AI工具库： 6个工具卡片，每个工具不同配色，悬停显示对应颜色的光晕。

第四步：Markdown博客系统

用gray-matter解析Markdown文件的frontmatter，remark + remark-html渲染正文。以后写博客只要往content/posts目录丢.md文件就行，自动生成页面。

Trae使用心得

好用的地方

1. 中文理解好：用中文描述需求，基本不用翻译成英文Prompt
2. Agent模式强：能自己规划多步任务，不用一步步指挥
3. 错误自动修复：编译报错了直接扔给它，它会自己分析修复
4. 免费额度良心：日常开发够用

要注意的坑

1. 大改动之前最好手动备份一下关键文件
2. 它生成的代码要检查一下，有时候理解会有偏差
3. 样式细节需要多轮调整，别指望一次到位

给非技术背景朋友的建议

如果你不会写代码但想做网站：

1. 先学一点HTML/CSS基础，知道大概怎么回事
2. 用自然语言描述你要的效果，越具体越好
3. 出了报错直接截图发给AI，让它帮你修
4. 善用预览功能，边做边调

你现在看到的这个网站，就是全程用Trae Code模式开发的。AI时代，不会写代码不再是做网站的障碍。