前言
最近在思索，cursor在国内火一年多了吧，都在吹怎么牛怎么厉害，但是它不对国内开放在牛也就是一个传说，很多人其实都没使用过它，毕竟火了之后科学上网也没办法使用了，因为做了手机号码认证，国内号码无法校验，挺麻烦的。
- 我就思索非用它不可吗？国内就没有其它可以替代的？于是想起来半年前使用过的一个工具trae，之前刚起步这工具确实没有太多值得表扬的方面就是一个初级的AI工具，想着这么久了，应该脱胎换骨了吧？试试他能不能替代cursor，我就用它来开发第一个完整的AI作品吧，开发一款答案之书相关的小程序（把UI、产品经理、前端都省去，直接撸）。
- 在开发过程中我发现trae确实已经变得脱胎换骨了，其实跟cursor比已经差距越来越小了，该有的功能基本都跟上了，大模型也可以随意选择，国外的大模型也能选择很香。
- 废话不多说，下面我就分享下我使用trae的一些经验和过程吧，希望对你有一点点收获。
我将要开发的是一款答案之书和慢跑截拍相关的小程序，使用uniapp框架
工具安装
- 作为同行其实我们都懂，做这行不容易，能省点费用就省一点吧(省他十年八年房子应该也能省出来)，我们最开始先使用他们的免费版就行，不用一上来就买个pro版，我们要做个理性的人，先体验体验如果好用在买，第一次注册其实有免费额度的，就是你使用AI对话编程不会限速跟付费差不多，一提问很快就能回答跟付费一样快。trae下载官网
- 安装跟普通程序一样简单，没什么可讲的了
使用
一、设置规则
这里设置项目规则，每次提问AI都会进行读取该规则信息，这里适合放一些整个项目使用到的技术栈和一些经常会出问题的规则，这样可以减少每次跟AI对话都需要提示一遍规则。如下我简单的配置（不要写太多因为会消耗token）：
**兼容性要求**：代码需兼容主流浏览器及多类设备（包括移动端、小程序、PC端），确保功能与样式在不同环境下表现一致。
**样式单位规范**：所有样式必须使用 `rpx` 单位，禁止使用 `px`，以保证不同屏幕尺寸下的显示效果统一。
**端一致性**：需同时兼容小程序与 App 端，避免因平台差异导致界面或功能表现不一致。
**注释规范**：代码注释需详细、清晰，重点说明关键逻辑、参数含义及注意事项，便于后续维护与协作。
**视觉与交互要求**：样式设计应注重美观与用户体验，可参考已有设计规范或技能库，避免界面风格单一或审美疲劳。
**开发范式**：JavaScript 部分必须使用 Vue 3 组合式 API（Composition API），禁止使用 Vue 2 选项式 API。
二、配置技能（Skills）
配置一些有用的技能可以让你省下很多事情，例如：
ui-ux-pro-max 是一款专为前端开发与设计场景优化的 AI 技能，旨在自动生成高质量、符合现代设计规范的 UI/UX 代码与设计方案。
- 这里推荐一个不错的技能包地址，是腾讯官方推出，用的放心专为中国用户优化的 AI Skills 社区，里面有skills和MCP包，还能看见star和下载量，非常使用和推荐。
三、配置MCP
需要MCP的可以在这里配置，并且能够直接搜索需要的MCP。例如：
@dcloudio/uni-app-x-mcp：让 AI 知道项目现有组件。
- 配置完上面这些步骤，AI助手其实
- 已经完成了，接下来将要开始进行开发了。
四、开始AI对话
- 文件名、页面名称，这些建议自己创建好（叫AI也能创建，看自己需要），然后可以打开当前的页面代码，在输入框里面写相关的提示词，让AI根据你的提示词进行开发了。例如我小程序的首页如下：
- 我大概的提示词描述为（有个很好的办法，就是自己简单写一个需求描述，然后发给AI帮你优化一下，自己在修改下，这种提示词可能会更完美，下面这个就是我美化过的）：
#### 1. 页面背景
- 使用线性渐变：`linear-gradient(180deg, #2c3e50 0%, #000000 100%)`
#### 2. 标题区域
- **第一行文字**：`“请在心中默念你的问题”`
- 字体大小：`46rpx`，加粗
- 颜色：`rgba(212, 175, 55, 1)`（金色）
- 添加发光效果（建议使用 `text-shadow`，参数自由发挥，保持美观）
- **第二行文字**：`“闭上眼睛深呼吸 5 秒，再轻触封面”`
- 字体大小：`32rpx`
- 颜色：`rgba(212, 175, 55, 1)`
- **第三行文字**：`“答案将为你浮现✨”`
- 字体大小：`32rpx`
- 颜色：`rgba(212, 175, 55, 1)`
- 标题区域整体居中，上下间距合理，与背景形成良好对比。
#### 3. 底部封面图片
- 图片地址：`static/image/book.png`
- 尺寸：建议宽度 `400rpx`，高度自适应（保持原图比例）
- 位置：底部居中，与屏幕底部保持适当距离（如 `120rpx`）
- 交互：点击封面时触发后续逻辑（预留事件处理，暂不需要具体功能）
#### 4. 整体布局
- 使用 Flex 布局，垂直排列，主轴上居中对齐
- 内容区应避开安全区（底部安全区需额外处理）
- 所有尺寸单位统一使用 `rpx`，保证跨端适配
#### 6. 补充效果
- 封面可增加微妙的呼吸缩放效果
- 标题文字发光可使用 `text-shadow: 0 0 10px rgba(212, 175, 55, 0.8)` 等
- 等他写完后你会发现并不是非常完美，可能需要你手动改一下，然后差不多了，可以截图给AI提问有什么需要优化的。
- 等AI告诉你哪里怎么优化会更好，然后把结果在拿去trae对话框，让他自己调优。
- 这样就能做到AI参与全流程了，你只需要想法就行，产品经理、UI设计师、前端等AI都帮你干完了，然后坐等成果了，虽然调试并不会很顺利，但是慢慢调你就会发现也不会太差。
五、可能遇到的一些小问题
- 1、当你用AI对话生成页面后，你自己手动修改代码，然后在回到原来上下文继续叫AI修改，你会发现等AI修改完会把你自己手动修改的给替换成原来它生成的了。我理解这应该是AI读了自己的上下文，发现有不同给你改回之前它生成的了，就好比如你修改了代码，你认为自己修改很正确，别人改了你代码，然后你就认为他写错了，重新改回来，一样的道理。我的解决办法 新开一个窗口进行修改bug或者增加提示词“其他逻辑不要动”
- 2、一些动画效果也可以叫他实现，但是建议它使用css实现不然它会用js去实现动画
- 3、如果想整个程序让AI去生成的话，可以使用它的solo模式去构建，但是我喜欢一个页面一个页面琢磨，所以每次创建一个页面即可
- 4、每个页面至少要新开一个窗口，不然容易出现上下文乱套，上下文过多可以点下压缩，这样也可以省掉一些token消耗和准确度
- 还有很多？我只记得这些了，先记录这些吧
总结
- 其实AI工具使用不难，难的是你的提示词，好的提示词能让AI生成更符合你的效果，提示词越笼统，AI就会越随机去生成
- 如果想玩的更好一点，可以创建自己的智能体，例如一个智能体用作写逻辑，一个智能体使用对接后端接口、一个智能体用做动画效果，这样去缩小范围，能让智能体更清楚自己需要做什么，智能体可以缩小业务范围，不用去全世界的知识库搜索，而是专一的往一个方向搜索
- 想要更进一步，可以网上找一些skills和MCP进行安装使用，能提升AI的能力和现实效果
- 想想AI编程工具为什么会比网页的AI更智能？我理解是因为它内置了一些自己写好的提示词，所以我们使用起来会感觉比网页的AI更快更好一点
- 如果想看我开发好的小程序，可以去微信小程序搜索下：心问有答
- 整体效果如图所示：
创作不易，看完就帮忙三连击吧，谢谢啦
