前言
最近一直在琢磨一个事儿。Cursor在国内火了一年多，满屏都是“神器”、“降维打击”的夸赞。但问题在于，它不对国内开放，再牛也像远方的传说。尤其大火之后，连科学上网都不好使了，直接绑手机号，国内号码根本没法验证，挺折腾的。
但换个角度想，非它不可吗？国内就真没有能打的？于是想起了半年前试过的一个工具，Trae。当时它刚起步，说实话乏善可陈，就是个很初级的AI助手。但隔了这么久，总该脱胎换骨了吧？干脆用它来开发第一个完整的AI作品试试，目标是一本“答案之书”小程序（产品、设计、前端全甩掉，自己直接撸代码）。
开发过程中发现，Trae确实已经今非昔比。和Cursor的差距越来越小，该有的功能基本都跟上了，国外的大模型也能自由切换，相当香。
废话不多说，下面就把我使用Trae的一些经验和过程拆开聊一聊，希望能给你一点启发。
工具安装
同行都懂，做这行不容易，能省一点是一点。所以第一步，先用免费版就行，没必要一上来就买Pro。第一次注册就有免费额度，AI对话编程不限速，提问响应很快，体验和付费版几乎没差别。安装过程跟普通软件一样，没什么可多说的。
使用
一、设置规则
这是关键一步。项目规则设置后，每次提问AI都会读取这块信息，适合放整个项目通用的技术栈和常见易错点，避免每次对话都重复交代。简单配置如下（别写太多，会消耗token）：
**兼容性要求**：代码需兼容主流浏览器及多类设备（移动端、小程序、PC端），确保功能与样式在不同环境下表现一致。
**样式单位规范**：所有样式必须使用`rpx`，禁止使用`px`，以保证不同屏幕尺寸下的显示效果统一。
**端一致性**：需同时兼容小程序与App端，避免因平台差异导致界面或功能表现不一致。
**注释规范**：代码注释要详细清晰，重点说明关键逻辑、参数含义及注意事项，便于后续维护与协作。
**视觉与交互要求**：样式设计应注重美观与用户体验，可参考已有设计规范或技能库，避免界面风格单一或审美疲劳。
**开发范式**：Ja vaScript部分必须使用Vue 3组合式API，禁止使用Vue 2选项式API。
二、配置技能（Skills）
配置一些好用的技能能省不少事儿。比如`ui-ux-pro-max`，这是一款专为前端开发与设计场景优化的AI技能，能自动生成高质量、符合现代设计规范的UI/UX代码与设计方案。
推荐一个很实用的技能包地址——腾讯官方推出的，面向中国用户优化的AI Skills社区，里面有skills和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提问有什么需要优化的，AI会告诉你哪里怎么改更好，然后把结果再扔回Trae对话框，让它自己调优。
这样就能实现AI全流程参与——你只需要想法，产品、设计、前端，AI全包了。虽然调试不会一帆风顺，但慢慢调下去，成品不会太差。
五、可能遇到的一些小问题
- 1、用AI对话生成页面后，自己手动修改代码，再回到原来上下文让AI继续改，你会发现它改完可能会把你手动改的替换回原样。推测原因：AI读了上下文，发现不同，以为你改错了，就给改回来。解决办法：新开一个窗口修改bug，或者增加提示词“其他逻辑不要动”。
- 2、一些动画效果可以叫它实现，但建议用CSS实现，否则它会用JS去做。
- 3、如果想整个程序让AI生成，可以用它的solo模式；但我习惯一页一页琢磨，每次只创建一个页面。
- 4、每个页面至少新开一个窗口，避免上下文乱套。上下文过多时可以点压缩，既省token又提高准确度。
- 还有不少细节，暂时只记得这些，先记下来。
总结
其实AI工具本身不难，难的是提示词。好的提示词能让AI更贴合你的需求；越笼统，AI就越随机。
如果想玩得更深，可以创建自己的智能体：一个专写逻辑，一个对接后端接口，一个专门负责动画效果，缩小业务范围，让智能体更清楚自己该干什么，不用去全球知识库里乱翻。
更进一步的话，网上找些skills和MCP装上，能显著提升AI的能力和落地效果。
想想为什么AI编程工具比网页版AI更智能？推测原因是它内置了精心设计的提示词，所以我们用起来感觉更快、更好。
整体效果如图所示：
