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