Trae与Claude 3.7联手30分钟快速开发小程序全流程

在上一篇文章里，我们用Trae完成了设计稿。这次，来看看如何用Trae+Claude 3.7从零开发一个倒数日小程序。整个开发过程其实很有意思——不是一次就成功的，而是通过不断收到反馈、逐步调整才最终定型。从项目最初的页面生成，到UI细节、交互逻辑、页面布局以及按钮样式的迭代优化，最终做成了一款符合预期的应用。

设计稿

正式开始之前，先回顾一下设计稿：

提示词

你是一位资深前端工程师，拥有丰富的前端和微信小程序开发经验，请根据我的要求开发一个倒数日应用：
1. 使用微信小程序原生技术初始化项目
2. 主要功能包括我的倒数日、添加倒数日、倒数日详情
3. 根据我上传的设计稿截图开发，尽可能还原设计稿

第一次生成

输入提示词后，Trae开始工作。来看看Claude给出的回应：

效果怎么样？

当前首页的数据是调试时添加的，但第一轮生成的问题已经很明显了——

• 添加页面和详情页的返回按钮重复了
• 首页的“我的倒数日”标题多余，需要去掉；同时创建的➕按钮放在顶部不太美观，改成固定在底部
• 添加页面的“背景颜色”选择按钮不是圆形，与设计稿不符
• 事件详情页完全没有按照设计稿来实现

还有一些细节，比如按钮颜色不统一。没关系，一个问题一个问题来解决。

第一次修改：去掉返回按钮

Trae给出了修复方案，但第一次尝试报错了。把错误原因反馈给Trae：

Trae重新给出方案，选择移除该字段：

问题解决了，但还有一个警告，继续反馈给Trae：

修复完成，效果如下：

这次修改确实解决了返回按钮重复的问题，但也引入了新问题——首页的Tab被改错了。继续前进：

• ✅ 添加页面和详情页返回按钮重复
• ❌ 首页改错了Tab
• 热点追踪提示词 一键复制

  你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
  热点：Trae与Claude 3.7联手30分钟快速开发小程序全流程要求：
  1. 先用一句话解释这条热点在讲什么
  2. 再总结它为什么重要
  3. 说明会影响哪些 AI 产品或内容方向
  4. 最后给出 3 个适合资讯站使用的标题