AI编程实战:Cursor突然收费封禁?用Trae开发一个写作助手(前端篇)

前言

自从开始 AI 辅助编码后,Cursor 一直是我的首选工具。但最近,Cursor 收费模式巨变,封禁国内多个模型使用的动作真的很让人无语。

在生产力环境中,这些突发变动带来的全是项目风险,因此,前两天帮大家探索了临时的解决方案,也整理了一些替代方案。

Cursor Claude 模型无法使用的解决方法 - 掘金

Cursor替代方案整理,附模型不可用进阶解决方案 - 掘金

今天,就使用替代方案中的 Trae 来实战一把,看看能替代到什么程度。

如果你也正在寻找 Cursor 的替代方案,不放关注一下,以作参考。

先来了解下今天的工具。

Trae

字节跳动 2025 年推出的 AI IDE,与 Cursor、Windsurf 等主流 AI 编程工具能力相当。

分为"国际版"和"国内版"两个版本,主要体现在模型和生态的不同。

  • 国际版:Trae,模型支持 GPT、Claude、Gemini 主流模型的最新版本。
  • 国内版:Trae-CN,模型主要使用豆包和 DeepSeek 系列。

因为个人更喜欢 Claude 在编程上面的体验,因此选择了"国际版",国际版登录时需要科学上网,后续就不再需要了。

简单谈谈使用几天来的直观感受,因为时间不长,如有错误,欢迎大家指正。

  • 原生支持中文,这点对国内的朋友应该比较友好。
  • Window下的命令支持更佳,Cursor 经常出现命令语法不符合的情况,虽然它自己会发现并修改。
  • MCP 市场集成度更高一点。
  • 内置预览,这个目前用的还不多,但如果能集成 Stagewise 类似的功能,个人感觉会非常棒。
  • 代码审阅体验稍有不同,但是 checkpoint、对比审查等功能也是相当完善。
  • Tab 延迟稍微高一点,写代码和 Tab 之间存在明显停顿。

好了,总结性的就这么多吧,下面我们直接通过实战案例体验下 Trae 的效果吧。

项目介绍

按照惯例,介绍下项目情况。

我经常会写一些文章,最初使用的语雀,后来直接使用的 VS Code,但都不是很满意,尤其是自己想定制一些 AI 快捷指令时,都不能很方便的满足我的需要。

因此,就想着自己搭建一个写作助手,首先实现基本的写作管理,然后就是方便输出为各平台样式,并支持定义各种 AI 快捷操作。

内容较多,会分为多次分享,今天,主要是前端部分。

实战记录

下面就是实战过程,全程采用 Claude 4 实现。

分析设计

已经有了明确的目标,但是比较简单,直接让 AI 帮忙分析完善。

指令

markdown 复制代码
你是一个专业的产品经理,我是一个自媒体博主,日常写文章比较多,现在想要实现一个写作编辑器。

主要功能包括:
1. 管理文章。
2. markdown写作,实时预览。
3. 支持上传图片到免费图床。
4. 预览结果可以直接带样式复制,方便粘贴到不同网站发布。

请帮我设计一份产品说明书,方便后续交给ai进行代码实现。
前端采用vue2+javascript,文章存储暂时使用localstorage,并封装api,方便后续对接真实后端接口。
请帮我规划工作,并完成相关文档。

过程

可以看到 Trae 直接根据我们简单的目标生成了 4 个文档。

  • 产品说明书:帮我们完善了具体的功能和细节。
  • 技术实现文档:给出技术选型和工程结构安排。
  • 开发计划:可以参考顺序,但是时间应该是人工开发的,与 AI 协同开发相差较大。
  • API 接口文档:由于我的开发偏好是先前端,确认效果可以后,再对接后端,所以,需要定义好 API 接口文档,方便后续对接。

我们可以根据需要审核并修改,然后后续让 Trae 根据文档进行实现,避免开发时间长了之后偏离。

手动更改了如下命令:默认会创建新的文件夹,但实质上,我们一般都是打开项目工程文件夹之后进行的 AI 对话。

结果

产品说明书

开发计划

环境初始化

分析设计完成后,我们开始项目初始化。

有了 AI 之后,完全不需要再去搜索或者查看文档,直接由 Trae 帮你完成即可。

指令

复制代码
按照"开发计划.md"中2.1进行项目初始化

过程

Trae 会按照顺序自动执行各类初始化命令或者操作,为了保证大家对项目工程的掌控,Trae 会在每次执行终端命令前进行人工确认。

其中发生了一点问题:默认创建的 Vue3 工程,但是由于质量中指定了 Vue2,Trae 自动发现并修复了。

另外,这一步没有 npm 的过程,是因为我本地已经有了 node 开发环境。

结果

文档是我手动移动到 doc,起始最初指令中如果设置上,也是可以自动整理的。

初版生成

这一步没有"指令",因为 Trae 在上一步的初始化指令后,直接按照文档里的内容,开始生成了。

这员工太主动了~

过程

初始化后自动执行的生成。

中间过程过长,会触发思考上限,需要人工"继续"。

Trae 会自动 run 系统,需要自动编译,Trae 会根据编译错误进行自动修复。

这一点我感觉在实际工作中,会非常提效。

结果

文章管理

写作编辑

再给大家看下 Trae 帮我实现了哪些功能。

甚至完善了"文章状态管理"、"编辑模式切换"、"自动保存功能"功能。

文章管理、编辑页面合并

文章管理和编辑没必要切换不同 Tab 进行,用户体验不太好,我们直接合并。

指令

复制代码
实现效果不错,但是我想要文章管理和写作编辑在一个页面,避免写作时频繁切换页面

过程

结果

保存失败修复

简单测试了下,发现自动保存出错。

不要着急,直接描述现象即可。

指令

复制代码
文章编写内容后出现"保存失败"错误,请修复

过程

结果

界面风格优化

界面有些小问题,我们优化一下。

指令

markdown 复制代码
进行一些页面优化。

1. 顶部导航两端对齐。
2. 文章管理搜索框与文章状态下拉合并到一行。
3. 文章列表尽量简化。
4. 整体风格更加精致。
5. 导航栏中间的菜单高度优化,现在已经覆盖了下层的边框。

过程

多个小问题的同时处理还不错,以前给出优化建议多了,总会发生相互干扰的情况。

结果

看下现在的效果。

结语

今天,先到这里。

本次分享主要通过 Trae 实现了写作助手的前端部分,整体体验还不错,作为 Cursor 的一个替代方案,个人感觉还是可以的。

之后将通过 Trae 针对后端部分进行实现,欢迎大家关注讨论。

相关推荐
F_D_Z36 分钟前
【PyTorch】图像二分类项目
人工智能·pytorch·深度学习·分类·数据挖掘
倔强青铜三2 小时前
苦练Python第27天:嵌套数据结构
人工智能·python·面试
倔强青铜三2 小时前
苦练Python第26天:精通字典8大必杀技
人工智能·python·面试
martian6652 小时前
深入详解随机森林在眼科影像分析中的应用及实现细节
人工智能·算法·随机森林·机器学习·医学影像
望百川归海3 小时前
基于自定义数据集微调SigLIP2-分类任务
人工智能·分类·数据挖掘
xw53 小时前
Trae开发uni-app+Vue3+TS项目飘红踩坑
前端·trae
!win !3 小时前
Trae开发uni-app+Vue3+TS项目飘红踩坑
前端工具·trae
五月君4 小时前
这次领先Cursor!体验了Trae 2.0 SOLO 模式,超酷!
ai编程·trae
Java与Android技术栈4 小时前
OpenCV 图像调色优化实录:从 forEach 到并行 + LUT 提速之路
人工智能·opencv·计算机视觉
ghie90905 小时前
相位中心偏置天线的SAR动目标检测
人工智能·目标检测·目标跟踪