最近掘金一直在推他们的 Trae 这个 AI IDE，刚好最近也有关注 AI 开发相关的东西。就那它试试水。
这次我就试着一句代码不写，用嘴炮的方式能不能实现一个个人博客项目。本次使用的 AI IDE 选手除了 Trae 之外，还有 Cursor。因为很多网友都在说 Trae 不如 Cursor，让我们实际尝试下。
写需求文档
一开始我玩 AI IDE，就直接会和它说
给我实现一个坦克大战游戏。
结果 AI 生成的完全不是我想要的。
后来看了一些 AI IDE 的使用视频才发现想要让 AI IDE 根据你的意思来写，就需要叙事完整的把需求写清楚才行。于是我改成了下面的写法。
给我实现一个坦克大战游戏，有玩家和电脑两类坦克，场上会有 10 辆电脑坦克、1 辆玩家坦克。坦克可以发射子弹，电脑坦克会随机移动和发射子弹，玩家坦克通过键盘上下左右移动，空格键发射子弹。坦克之间有碰撞算法无法重叠，也无法将坦克开出游戏界面外。界面中在随机八个位置会出现障碍物，坦克和子弹无法通过。子弹命中任何坦克三次后爆炸。如果玩家坦克爆炸则判定失败，如果电脑坦克全部被消灭则玩家获胜。失败和获胜会有提示信息，下方有再来一局重新开始游戏。
如此一来坦克大战游戏就创建成功了。
以上是 Cursor 和 Trae （Deepseek V3 0324）创建的小游戏，有些 BUG 但是能玩。估计多唠唠能把 BUG 修复掉。
那么简单小项目不在话下，复杂项目呢。于是我们就试着搞一个基于 vue3 的 BLOG 项目吧，下面是需求文档：
shell
# 个人博客项目
此项目为本地化个人博客项目，项目分为顶部栏和三个页面。项目基于 vue3、vue-router 和 element-plus 来实现。
## 数据
需要模拟 10 篇 Markdown 形式的博客写在一个 JSON 中。
## 布局
整个项目布局为撑满整个网页，色系为暗黑色。分为顶部栏和内容栏两部分。顶部栏固定不变，内容栏根据路由变化而变化。
## 顶部栏
顶部栏和内容栏，顶部栏左侧展示 Blog 的 logo 和名称，右侧是一个 menu、一个搜索按钮和一个用户按钮。
- menu 菜单可以再 首页 和 关于我 之间切换，首页可以跳转到【博客首页】，关于我 可以跳转到 【自我介绍页】
- 搜索按钮可以弹窗一个搜索框，用于搜索博客内容，并且点击跳转到【博客内容页】展示具体博客。
- 用户按钮可以弹出登录、登出弹窗，管理用户信息。
## 博客首页
首页分为左右两部分，比例为 3:1。
左侧为博客列表，列表项展示博客标题、博客创作时间、标签、分组、博客内容展示两行，多余的省略号表示。
右侧展示博客分组、博客标签归档、RSS 订阅、分享功能
点击博客列表会跳转到目标 【博客内容页】展示具体博客。
## 博客内容页
博客内容页会根据路由跳转的博客 ID 信息找到相应博客展示。
页面需要展示博客标题、分组、创作时间、标签和内容。
其中内容需要将 Markdown 文本转化为富文本形式展示出来。
博客内容页尾部增加分享、赞助和点赞功能
## 个人介绍页
贴上一张个人照片、写一些个人信息情况、工作履历、自我优势、作品展示链接。鉴于个人语言表达能力有限，有些细节描述不清楚。不过反正是公平竞争，看看表现如何吧。
Trae
模型就选最新的 DeepSeek V3 0324 的模型吧，输入需求自动帮我生成了一堆文件。
但有两个问题：一个是它完全没有创建 package.json 并且安装相关的 npm 包，并且写东西还偷懒。
让它改改：
项目需要安装相关 npm 包并且用 vite 启动本地调试服务，另外补全 blogs.json 的博客，字数不低于 300 字。
结果它还是只给我两篇博客，后面的用注释替代。
然后所有 npm 操作都需要用户手动点运行（这或许是为了让用户掌控步骤控制权可以理解）。在安装前端工程化环境的时候还没有 npm init 就直接开始安装依赖库 npm install element-plus 了。好在他自己发现了问题开始修复。最终给我创建了一个 vue 环境。
好嘛，只创建环境，不管上下文是吧。再说一遍需求：
根据 REQUIRE.md 文档实现项目需求。
Trae 的思考和写文件的速度特别慢......感觉性能有待改进啊。在重复一遍后发现还是在 Vue 模板页。看了下上下文：
我让他写需求，它只给我改了一个 JSON......没辙，再捞一捞细节吧。
首先，需要根据需求文档 REQUIRE.md 中安装相关 npm 依赖包。然后把 main.js 入口文件改下。最后重写 App.vue 文件作为 vue-router 容器。
依旧失败，因为它并没有引入 element-plus 库。
javascript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')element-plus 库需要在入口文件 main.js 中 use
插件装上了但却只给我展示这个
至此已经谈崩...... 很好奇它写了什么为什么一篇黑。
html
<template>
<div class="blog-home">
<div class="left-content">
<!-- 博客列表实现 -->
</div>
<div class="right-content">
<!-- 分组、标签归档等功能 -->
</div>
</div>
</template>
<script>
export default {
name: 'BlogHome'
}
</script>
<style scoped>
.blog-home {
display: flex;
height: 100%;
}
.left-content {
flex: 3;
}
.right-content {
flex: 1;
}
</style>很好，全是注释！我觉得到这一步其实非开发人员已经玩不下去了。我再挣扎一下......
将 #app 的容器撑满整个网页
App.vue 它的样式 #app 写在 scoped 里面啦！需要全局的！全局！
BlogHome.vue 根据 REQUIRE.md 实现具体需求报了语法错误，丢回去让它改
PersonalIntro.vue 根据 REQUIRE.md 实现需求 语法有错误，修复下 界面整体美化下
TopBar.vue 改成浅灰色背景，
BlogHome.vue 博客列表纵向排列。
TopBar.vue 8-11 宽度加宽，菜单折叠了
在写某个页面的时候写成了这样
html
<template>
<script setup>
import avatarImage from '@/assets/vue.svg'
</script>
<div class="personal-intro">
<el-row :gutter="20">
<el-col :span="8">
<el-card shadow="hover">
<div class="avatar-container">
<el-avatar :size="200" :src="avatarImage" />
</div>
...和这样
html
<script setup>
import avatarImage from '@/assets/vue.svg'
export default {
name: 'PersonalIntro',
data() {
...最终效果如下，很多细节已经不想细究了。还要一步步教它去改，然后它改的也不尽如人意。
吐槽
- 效率很低。 首先是思考速度慢，这一点可能和网络、排队等有关。但是写入文件的速度慢有点无法忍受，写个文件要等好久。另外 Trae 特别占内存，完全没有了 VSCode 轻量级的表现。
- 犯低级错误 就比如 vue 的语法错误、JS 语法错误、安装 npm 包的时候瞎写版本号、使用第三方库的时候自创一些不存在的函数。
- 没有对项目的整体认知。 感觉它对项目的理解没有整体性，很多明细不合理的地方感知不到。如前端项目都不进行 npm 安装、安装了也不知道去入口位置配置、整个项目级别的改动只改一小部分。另外实现需求也不能一次性写出来，而是一个个文件进去反复给它看需求让它写。
- 效果不达预期 也不知道是不是我描述有问题，总感觉 AI 生成的和我预期的差别好大。
- 界面优化效果一般 和我玩豆包图片生成一个感觉，总是达不到预期。
哎，不过毕竟是咱国内的产品嘛，还是要支持的。希望后面改进，后面继续关注吧。
Cursor
来看下网上好评如潮的 Cursor 表现如何，同样的输入需求文档。
根据文档实现完整项目需求
然后 Cursor 就开始一系列的代码生成工作，除了一些 cmd 命令需要人工点击操作外，一直在自己生成代码。
仔细看它生成代码的过程，和程序员的思维很像。他并不会一次性直接生成一个完整的前端项目代码，而是拆分成不同的功能，一个一个功能的去实现。就比如编程过程中容器组件 App.vue 就因为不同需求的迭代更改了多次。和我们程序员写代码的思路很像。
在写完当前功能后，它会问我后面要实现哪些功能？我直接无脑回答"全部实现"它就会不停地写下去。最终让我们看看效果。
哦吼，一样翻车，不过它的确写了一大堆代码。让我们调试调试~
项目图标报 404 错误，博客列表 node 接口返回 500
它开始自言自语，我们只需要点执行命令
不要暗黑色系，改成亮色，并且美化下界面。
然后就是 Cursor 漫长的自言自语，和自我修复。
最终结果如下：
可以看出 Cursor 的审美还是很在线的。
最后 Cursor 还在跃跃欲试的问我要不要实现其他更多功能......还是非常积极努力的。
吐槽
- 审美好评，感觉它就像是看过很多的博客模板，直接能给出一个令人舒适的设计方案。
- BUG 方面：虽然说 Cursor 很强了，但不可避免的还是有一些问题。比如开了多个 node 服务冲突、一些问题的描述准确性，不过整体来说已经好很多了。
- 性能上要比 Trae 高很多，就比如写文件的操作，Trae 一般都需要 2-5 秒，而 Cursor 就明显快很多。
- 对项目整体感知好了很多，它可以一口气自言自语的在整个项目中写很多代码来实现需求和处理异常。
- 自主性很强，我只是想写个本地博客，它还给我起了个 node 服务后端，并且还要帮我们扩展项目功能。蛮离谱的。
不知道是不是数据模型的问题，感觉两个 IDE 的差别很大。感觉 Cursor 针对编程喂了很多有效数据。后面再换种方式考考他。
总结
给我的感觉是：
针对单个文件的实现上，两者差不太多。都很适合写一些 Demo 演示的功能。 针对大型项目 Cursor 是一个经验丰富、思维清晰、还很有想法的程序员，而 Trae 还是一个基础知识丰富，但缺少经验的实习生。战战兢兢不敢写太多代码，需要前辈一步步的去带。
不过么，Trae 未来可期，毕竟免费给我们用，还要什么自行车啊（希望到时候能高抬贵手(ૢ˃ꌂ˂ૢ)）。