cursor 真强啊,用 AI 把我的卡盒小程序所有 UI 交互优化了
自从我的卡盒小程序功能稳定后,我就开始把整体的 UI 和交互继续打磨。之前因为时间原因想要先上线给大家看看反馈,所以有的地方妥协用了一些原生的 API,自己感觉还是差点意思,这几天下班后就开始继续优化,但是改造 UI ,重复和琐碎的事情太多了,于是我就想到这种事情交给 AI 做应该很不错,所以也开始用上了 cursor,不得不感叹 cursor 真强啊。实话说,就在这两三天,我干了之前自己做一周左
前言
自从我的卡盒小程序功能稳定后,我就开始把整体的 UI 和交互继续打磨。之前因为时间原因想要先上线给大家看看反馈,所以有的地方妥协用了一些原生的 API,自己感觉还是差点意思,这几天下班后就开始继续优化,但是改造 UI ,重复和琐碎的事情太多了,于是我就想到这种事情交给 AI 做应该很不错,所以也开始用上了 cursor,不得不感叹 cursor 真强啊。实话说,就在这两三天,我干了之前自己做一周左右的活儿。
这两天小程序更新了特别多小功能点,以及样式的优化,我先给大家介绍一下,后面讲讲我是怎么用 cursor 优化的。
新特性
设置页
设置页用来放一些自定义配置,因为考虑到使用小程序的群体很多,每个人的喜好点不同,设备的性能差别也会很大,所以提供了卡片动画效果,震动反馈的关闭。
除此以外,还增加了一个新的卡盒风格,现在有拟态风格和现代风格,拟态的话会又层次感一点,比较像真实卡片,现代风格就是比较扁平化,圆角也更大一点,大家可以看看区别:
| 拟态风格 | 现代风格 |
|---|---|
![]() |
![]() |
目录功能
现在除了卡盒和卡片,新增了一个目录维度,可以把卡盒放在不同的目录进行分类:
卡片列表切换
这是我自己在使用过程中,发现卡盒也可以用作 todo 清单,因此想着做个列表模式,可以在卡盒内自由切换,切换的过程尽量让它丝滑,无论是卡片内是短文本还是长文本,不过文本太长卡片太多还宽高的变化还是没有位置的变化那么丝滑,这里我在手机试了一下,会比开发环境中更流畅一些,也可能是手机的配置比较好。
快速新增卡片(未发布)
在大卡片模式拖动到最后一个轮播图可以直接长按添加新卡片了。
交互优化
双指捏合收起卡盒
这个是我的第一篇文章 🗃️耗时一周,肝了一个超丝滑的卡盒小程序 中一个评论提到的。

虽然这个同学现在都有还没回复我,也不知道发现了没,但是我还是做了这个功能🥲 图片比较糊。双指在卡盒中捏一下,会有一个缩放效果,然后就收起卡盒了。
样式优化和统一
样式优化和统一 cursor 可是帮大忙了,我把我各个位置的弹窗都统一成同一种风格了。左侧一个大的标题,右侧一个取消按钮。
卡片文字的可读性
这是一个小细节,旧版的字体颜色很深,而且密度比较大,所以文字多的时候会觉得看的密密麻麻的,而且文字一坨一坨的。现在我把文字颜色微调浅一点,然后字间距调大,看起来就不会那么累了,UI 上也清爽一些。
| 旧版 | 新版 |
|---|---|
![]() |
![]() |
我如何使用 cursor 进行优化
我用的是 cursor 的 claude-3.5 sonnect 模型,主要用的就是 composer 功能,composer 可以让我们选中几个项目中的文件,然后向 cursor 说出需求,他会基于这几个文件去分析你的当前代码设计,然后根据需求进行代码修改或生成新的文件。打开 cursor 后,快捷键 CTRL + I 就可以打开 composer 功能。
我的第一次使用就是选中我已有的一个弹窗设计,然后让它先优化一下样式,让它更清爽一点,然后基于这个弹窗,选中其他的几个弹窗,让 cursor 统一一下样式,参考某个弹窗,几乎两次对话就改完了,以往这种杂活儿我可能得整一两个小时,让 cursor 来做就五分钟!

还有一个可读性优化的例子,我选择了一个 vue 文件,里面是我的卡片的组件代码,让 cursor 帮我优化,并且说一些注意点:

cursor 生成代码后,就会告诉你调整的范围,最好自己再 review 一下,一些变量写错的问题 cursor 也会犯的。
我的用法像和人一样聊天,你自己的项目你最清楚,使用 cursor 的时候就像带一个新人参与你的项目,实现需求时。你帮 cursor 找引用的资料,让它参考着做,做完了你帮他验证一下功能的可行性,同时还要帮他 review 一下代码,如果自己能够发现的问题,能够准确指出让它帮你修改。不论是需求还是问题,你说的越精确效果就越好,
我目前还是将一些繁琐工作交给 cursor 去完成,没有让它参与创意方面的工作,不过我看人家小白都可以用 cursor 从零到一做一个 app,可能 cursor 的潜力我还没有完全挖掘。
注意点
- 因为 cursor 的代码改动太方便了,一下子改很多个文件,而且不像自己改那么可控,因此一旦你确定没问题了,就用 git 提交一下代码保存一下当前的记录,避免调整太多了,代码不受你的控制了,引入意外的问题。
- 代码改动后,记得点一下 accept 接受改动,不然你切换不同 composer 时,会把当前 composer 的改动移除,再基于新的 composer 改动后,两边的代码就有点冲突了。
总结
后续我会更高强度的使用 cursor,它的可用性真的太超出我的意料,我也算是高频使用 AI 工具的人了,上手之后还是觉得太方便了。后续如果有新的心得也会与大家分享。学习卡盒小程序我会一直持续迭代的,我会不断打磨这个小场景下的易用性,欢迎大家上手体验,评论区好的建议我也都会积极采纳的,如果有感兴趣的朋友可以让我拉你进体验版,很多新特性可以提前体验到。
更多推荐






所有评论(0)