上个月我们试用了 cursor，但是由于免费额度的限制，并没有做太复杂的功能开发，只是简单的测试了一下。那会就发现，字节也发布了类似的产品，两者底层调用的大模型一样，都是 Claude-3.5。
字节产品叫做 Trae，先发布的 mac 版本，今年二月份，终于发布了 windows 版本。大厂的东西就是好，能免费白嫖，不用掏钱，无限量使用 Claude-3.5，这个模型的效果还是很不错的。
最终卡在了K线图的开发上，由于本人基本不懂 react，所以只能放弃了。想要继续开发，需要笔者补充一些前端的基础知识，将任务拆分的更细，而不是直接给一个大任务：开发K线图。
发现的问题
- 由于使用国外的 AI 模型，Vue3 + Element-Plus 的训练数据不足，因此选择了 React 作为前端框架
- 可能存在偶发的语法错误，需要人工修复
- 部分复杂问题的解决方案需要人工指引
- 代码结构优化需要人工指导
其中耗时最多的地方，打包前端代码到容器中，由于笔者零基础 .env.production tsconfig.json，完全是没有概念的，这些还是中途求助豆包，才捋顺对应的逻辑。前端开发 dev 模式和 build 模式，对于代码的检查，差异很大。后端数据库和服务的容器脚本，合计五分钟就搞定了。
AI 目前更多的提高开发的效率，你有基础是最好的，并不是 AI 会帮你解决所有的问题。
仓库地址
正如标题说的，我们这次是能不写就不动手，和AI硬聊，设计开发自选股模块。看最终能做出来什么效果。
仓库地址：https://github.com/ttf248/trae-demo
详细的使用方法，可以看仓库的 README.md 文件。
仓库包含很多递交记录，大部分都是我和 Trae 的对话记录，以及我对 Trae 的一些功能的测试，备注了是否人工干预来实现对应的功能。
Prompt
项目是从零开始创建，下面是项目的 Prompt：
基于项目原型图，开发功能：自选股，需要支持合约的新增、删除、修改、查询。自选股界面需要展示基础的行情数据。支持多个不同的市场切换。
前端：react
后端：golang gin gorm
数据库：PostgreSQL
服务端需要支持跨域请求，同时需要考虑数据的校验和错误处理，如果后端服务不可用，前端需要告警提示。
后端需要展示请求和应答的日志；前端也打印通讯的日志，方便排查问题。
UI和交互优化
前端界面的设计完全依赖的 Grok，我们首先在 Trae 里面做出来产物的雏形，但是没有审美，由于使用的模型，代码能力很强，但是其他能力比较弱，所以我们需要使用 Grok 来优化前端的 UI。
通过将当前的界面截图，上传到 Grok 里面，然后让它帮我们优化 UI，可能一次性拿到很多的优化建议，我们人工评估，然后拷贝到 Trae 中执行，观察优化的效果。
技术栈
- 前端：React + TypeScript
- 后端：Golang + Gin + GORM
- 数据库：PostgreSQL 17
系统架构
后端架构
后端采用 Golang 的 Gin 框架实现 RESTful API，主要模块包括：
-
数据库模块
- 使用 GORM 作为 ORM 框架
- 支持环境变量配置数据库连接
- 自动进行数据库表迁移
-
路由模块
- RESTful API 设计
- 统一的错误处理机制
- 内置请求日志记录
-
跨域处理
- 支持本地开发环境跨域
- 可配置的 CORS 策略
- 支持 Cookie 跨域
前端架构
前端使用 React + TypeScript 构建，实现了：
- 股票列表展示
- 自选股管理
- 行情数据展示
- 错误提示机制