在 上一篇文章里，我们用 Trae 已经完成了设计稿，本文将展示用Trae+Claude 3.7 从零开发一个倒数日小程序的完整过程。从项目最初的页面生成开始，到不断收到反馈后针对UI细节、交互逻辑、页面布局以及按钮样式等方面进行逐步调整，最终成功开发出一款符合预期的应用。
设计稿 #
正式开始之前，先回顾一下设计稿：
提示词 #
你是一位资深前端工程师，拥有丰富的前端和微信小程序开发经验，请根据我的要求开发一个倒数日应用：
1. 使用微信小程序原生技术初始化项目
2. 主要功能包括我的倒数日、添加倒数日、倒数日详情
3. 根据我上传的设计稿截图开发，尽可能还原设计稿
第一次生成 #
Trae 回复：
效果如下：
注意：当前首页的数据是我调试添加的
问题
- 添加页面和详情页返回按钮重复
- 首页的“我的倒数日”需要去掉，同时创建的➕按钮放上面不太好看，改成固定在底部
- 添加页面的“背景颜色”选择按钮不是圆形
- 事件详情页没有按照我们的设计实现
还有一些其他的细节比如按钮颜色不统一，我们依次解决这些问题。
第一次修改：去掉返回按钮 #
Trae 回复：
报错，把错误原因发送给Trae。
Trae 回复：
选择移除该字段
Trae 回复：
问题解决，但还有一个警告，继续把问题发给 Trae。
Trae 回复：
效果如下：
已修改
- 添加页面和详情页返回按钮重复
改错
- 首页改错了Tab
待修改
- 页面标题不正确
- 首页不用Tab
- 首页的“我的倒数日”去掉，同时创建的➕按钮放上面不太好看，改成固定在底部
- 添加页面的“背景颜色”选择按钮不是圆形
- 事件详情页没有按照我们的设计实现
第二次修改：页面标题 #
首页标题不用修改，添加页面标题改为添加，详情页面标题改为详情
Trae 回复：
效果如下：
一次改对。
已修改
- 添加页面和详情页返回按钮重复
- 页面标题显示正确
待修改
- 首页不用Tab
- 首页的“我的倒数日”去掉，同时创建的➕按钮放上面不太好看，改成固定在底部
- 添加页面的“背景颜色”选择按钮不是圆形
- 事件详情页没有按照我们的设计实现
第三次修改：去掉Tab，添加按钮固定底部 #
不要使用TabBar，在首页底部固定一个添加按钮（不跟随页面滚动），点击之后跳转添加页面
Trae 回复：
效果如下：
一次改对。
已修改
- 添加页面和详情页返回按钮重复
- 页面标题显示正确
- 首页不用Tab
- 创建的➕按钮放上面不太好看，改成固定在底部
待修改
- 首页的“我的倒数日”去掉
- 添加页面的“背景颜色”选择按钮不是圆形
- 事件详情页没有按照我们的设计实现
第四次修改：首页顶部“我的倒数日”去掉 #
首页顶部“我的倒数日”去掉
Trae 回复：
一次改对，比较简单，不截图了。
已修改
- 添加页面和详情页返回按钮重复
- 页面标题显示正确
- 首页不用Tab
- 创建的➕按钮放上面不太好看，改成固定在底部
- 首页的“我的倒数日”去掉
待修改
- 添加页面的“背景颜色”选择按钮不是圆形
- 事件详情页没有按照我们的设计实现
第五次修改：添加页面的背景色改成圆形 #
添加页面“背景颜色”选项改成圆形。
Trae 回复：
一次改对，比较简单，不截图了。
已修改
- 添加页面和详情页返回按钮重复
- 页面标题显示正确
- 首页不用Tab
- 创建的➕按钮放上面不太好看，改成固定在底部
- 首页的“我的倒数日”去掉
- 添加页面的“背景颜色”选择按钮不是圆形
待修改
- 事件详情页没有按照我们的设计实现
第六次修改：详情页UI调整 #
Trae 回复：
效果如下：
修改失败，继续修改。
Trae 回复：
效果如下：
我新添加了一条数据看备注的效果，但日期还是和设计稿有出入，但我觉得这样也行，毕竟 Claude 审美在线。
已修改
- 添加页面和详情页返回按钮重复
- 页面标题显示正确
- 首页不用Tab
- 创建的➕按钮放上面不太好看，改成固定在底部
- 首页的“我的倒数日”去掉
- 添加页面的“背景颜色”选择按钮不是圆形
- 事件详情页没有按照我们的设计实现
第七次修改：添加编辑页面 #
以上问题都修改完了，但好像差了编辑页面，我们添加上。
增加一个编辑页面，页面标题为编辑，在详情中跳转进入。
Trae 回复：
一次成功，不再贴图。
第八次修改：添加编辑页面输入框边距 #
右侧边距有问题，继续修复。
Trae 回复：
一次成功。
总结 #
一边写文章一边让 Trae 优化，实际调整时间半小时左右，最终效果如下。
注意，需要安装微信开发者工具才能预览！！
- 先解决大的错误，小错误再慢慢优化，如果先改小问题，后面改大问题时可能会影响小问题，导致需要再次修改。
- 最好一次提问解决一个问题。
- 指定好技术栈，拿小程序举例，不指定原生可能会使用uniapp。
- 有时需要重启微信开发者工具。
- 有时候会出现一只思考中，停掉就好了。
经过多轮的调试和改进，最终的倒数日应用实现了预期的目标：界面简洁、操作直观、交互顺畅。开发过程中，通过不断迭代，整个项目的开发历时约半小时。最后只能说一句 AI 的发展真的太快了！