AI 编程实战：用 TRAE 开发一个写作助手（前端篇）

作者介绍：飞哥数智谈，TRAE 开发者用户

项目介绍

我经常会写一些文章，最初使用的语雀，后来直接使用的 VS Code，但都不是很满意，特别是在定制 AI 快捷指令方面存在局限性。

因此，我决定自主开发一个写作助手，核心功能包括：

• 基础写作管理

• 多平台样式输出

• 自定义 AI 快捷操作

本文将分享前端部分的完整开发过程，全程使用 TRAE 实现。

实战记录

分析设计

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

指令

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

过程

TRAE 直接根据我们简单的目标生成了 4 个文档。

1. 产品说明书 - 完善了具体功能和实现细节；

2. 技术实现文档 - 提供了技术选型和工程结构方案；

3. 开发计划 - 可以参考顺序，但是时间应该是人工开发的，与 AI 协同开发相差较大；

4. API 接口文档 - 由于我的开发偏好是先前端，确认效果可以后，再对接后端，所以，需要定义好 API 接口文档，方便后续对接。

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

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

结果

产品说明书

开发计划

环境初始化

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

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

指令

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

过程

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

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

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

结果

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

初版生成

项目初始化完成后，AI 主动按照文档要求开始代码生成，无需额外指令。

过程

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

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

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

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

结果

文章管理

写作编辑

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

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

文章管理、编辑页面合并

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

指令

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

过程

结果

保存失败修复

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

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

指令

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

过程

结果

界面风格优化

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

指令

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

过程

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

结果

看下现在的效果。

结语

本次通过 TRAE 实现写作助手前端开发的实践证明，AI 协同开发已经成为一种高效可行的开发模式，表现令人满意。

后续将继续使用 AI 完成后端部分的开发，敬请期待后续分享。

• 奖品激励+官方认证！TRAE 最佳实践征文大赛来了：https://mp.weixin.qq.com/s/mdsfX8XZrg-xTQkYl4mm0g?scene=25#wechat_redirect