掘金 人工智能 07月21日 20:04
AI编程实战:Cursor突然收费封禁?用Trae开发一个写作助手(前端篇)
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文作者分享了在使用 Cursor 因模型限制和收费模式变化后,转而探索并实践 Trae 作为替代方案的体验。Trae 是字节跳动推出的 AI IDE,具备国际版和国内版,支持主流模型。作者通过实战案例,展示了如何使用 Trae 辅助完成一个前端写作助手项目,包括产品设计、技术实现、环境初始化、代码生成、功能优化及错误修复等流程。作者认为 Trae 在处理多项优化需求时表现出色,能有效提升开发效率,是 Cursor 的一个可行替代选项。

💡 Trae 作为 Cursor 的替代方案,提供了国际版和国内版,国际版支持 GPT、Claude、Gemini 等主流模型,国内版则使用豆包和 DeepSeek 系列,满足不同用户的模型偏好。其原生中文支持、对 Windows 命令的优化以及更高的 MCP 市场集成度,都使其成为一个值得关注的 AI IDE。

🚀 在实战项目“写作助手”的前端开发中,Trae 展现了强大的辅助能力。作者通过与 Claude 4 的协同,利用 Trae 快速生成了产品说明书、技术实现文档、开发计划和 API 接口文档,大大简化了项目规划阶段。

🛠️ Trae 在项目初始化和代码生成过程中表现高效,能自动执行命令并根据开发计划生成代码。即使在遇到 Vue 版本不匹配等问题时,Trae 也能自动发现并修复,且在执行终端命令前会进行人工确认,保证了对项目工程的掌控。

✨ Trae 在代码审阅和功能迭代方面也表现出色。作者通过简单的指令,就让 Trae 实现了文章管理与写作编辑页面的合并、修复了保存失败的 bug,并对界面进行了多项优化,如顶部导航对齐、搜索框与下拉菜单合并、简化文章列表等,提升了用户体验。

前言

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

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

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

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

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

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

先来了解下今天的工具。

Trae

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

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

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

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

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

项目介绍

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

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

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

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

实战记录

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

分析设计

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

指令

你是一个专业的产品经理,我是一个自媒体博主,日常写文章比较多,现在想要实现一个写作编辑器。主要功能包括:1. 管理文章。2. markdown写作,实时预览。3. 支持上传图片到免费图床。4. 预览结果可以直接带样式复制,方便粘贴到不同网站发布。请帮我设计一份产品说明书,方便后续交给ai进行代码实现。前端采用vue2+javascript,文章存储暂时使用localstorage,并封装api,方便后续对接真实后端接口。请帮我规划工作,并完成相关文档。

过程

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

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

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

结果

产品说明书

开发计划

环境初始化

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

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

指令

按照“开发计划.md”中2.1进行项目初始化

过程

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

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

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

结果

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

初版生成

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

这员工太主动了~

过程

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

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

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

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

结果

文章管理

写作编辑

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

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

文章管理、编辑页面合并

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

指令

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

过程

结果

保存失败修复

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

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

指令

文章编写内容后出现“保存失败”错误,请修复

过程

结果

界面风格优化

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

指令

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

过程

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

结果

看下现在的效果。

结语

今天,先到这里。

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

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

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Trae AI IDE AI 辅助编码 Cursor 替代方案 前端开发
相关文章