链载Ai

标题: 30分钟开发完成!Trae Claude 3.7 打造小程序全流程揭秘! [打印本页]

作者: 链载Ai    时间: 昨天 17:54
标题: 30分钟开发完成!Trae Claude 3.7 打造小程序全流程揭秘!

在上一篇文章里,我们用 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 优化,实际调整时间半小时左右,最终效果如下。

注意,需要安装微信开发者工具才能预览!!

经过多轮的调试和改进,最终的倒数日应用实现了预期的目标:界面简洁、操作直观、交互顺畅。开发过程中,通过不断迭代,整个项目的开发历时约半小时。最后只能说一句 AI 的发展真的太快了!







欢迎光临 链载Ai (https://www.lianzai.com/) Powered by Discuz! X3.5