😎cursor 真强啊，甄1�7 AI 把我的卡盒小程序扄1�7朄1�7 UI 交互优化亄1�7

前言

自从我的卡盒小程序功能稳定后，我就开始把整体的1�7 UI 和交互继续打磨�1�7�之前因为时间原因想要先上线给大家看看反馈，扄1�7以有的地方妥协用了一些原生的 API，自己感觉还是差点意思，这几天下班后就开始继续优化，但是改�1�7�1�7 UI ，重复和琐碎的事情太多了，于是我就想到这种事情交组1�7 AI 做应该很不错，所以也弄1�7始用上了 cursor，不得不感叹 cursor 真强啊�1�7�实话说，就在这两三天，我干了之前自己做丄1�7周左右的活儿〄1�7/p>

这两天小程序更新了特别多小功能点，以及样式的优化，我先给大家介绍丄1�7下，后面讲讲我是怎么甄1�7 cursor 优化的�1�7�1�7/p>

新特怄1�7/h2>

设置顄1�7/h3>

设置页用来放丄1�7些自定义配置，因为�1�7�虑到使用小程序的群体很多，每个人的喜好点不同，设备的�1�7�能差别也会很大，所以提供了卡片动画效果＄1�7strong>震动反馈的关闭�1�7�1�7/p>

除此以外，还增加了一个新的卡盒风格，现在有拟态风格和现代风格，拟态的话会又层次感丄1�7点，比较像真实卡片，现代风格就是比较扁平化，圆角也更大一点，大家可以看看区别＄1�7/p>

拟�1�7�风栄1�7/th>	现代风格

目录功能

现在除了卡盒和卡片，新增了一个目录维度，可以把卡盒放在不同的目录进行分类＄1�7/p>

卡片列表切换（未发布＄1�7/h3>

这是我自己在使用过程中，发现卡盒也可以用佄1�7 todo 清单，因此想睄1�7做个列表模式，可以在卡盒内自由切换，切换的过程尽量让它丝滑，无论是卡片内是短文本还是长文本，不过文本太长卡片太多还宽高的变化还是没有位置的变化那么丝滑，这里我在手机试了丄1�7下，会比弄1�7发环境中更流畅一些，也可能是手机的配置比较好〄1�7/p>

短文朄1�7/th>	长文朄1�7/th>

快�1�7�新增卡片（未发布）

在大卡片模式拖动到最后一个轮播图可以直接长按添加新卡片了〄1�7/p>

交互优化

双指捏合收起卡盒

这个是我的第丄1�7篇文竄1�7 🗃️�1�7�时丄1�7周，肝了丄1�7个超丝滑的卡盒小程序 中一个评论提到的〄1�7/p>

虽然这个同学现在都有还没回复我，也不知道发现了没，但是我还是做了这个功能🥲 图片比较糊，因为是实机录完转 gif ，但是可以大概看出效果�1�7�双指在卡盒中捏丄1�7下，会有丄1�7个缩放效果，然后就收起卡盒了〄1�7/p>

样式优化和统丄1�7

样式优化和统丄1�7 cursor 可是帮大忙了，我把我各个位置的弹窗都统一成同丄1�7种风格了。左侧一个大的标题，右侧丄1�7个取消按钮�1�7�1�7/p>

设置	搜索	目录	编辑	添加

卡片文字的可读�1�7�1�7/h3>

这是丄1�7个小细节，旧版的字体颜色很深，�1�7�且密度比较大，扄1�7以文字多的时候会觉得看的密密麻麻的，而且文字丄1�7坨一坨的。现在我把文字颜色微调浅丄1�7点，然后字间距调大，看起来就不会那么累了，UI 上也清爽丄1�7些�1�7�1�7/p>

旧版	新版

我如何使甄1�7 cursor 进行优化

我用的是 cursor 的1�7 claude-3.5 sonnect 模型，主要用的就昄1�7 composer 功能，composer 可以让我们�1�7�中几个项目中的文件，然后向 cursor 说出霄1�7求，他会基于这几个文件去分析你的当前代码设计，然后根据需求进行代码修改或生成新的文件。打弄1�7 cursor 后，快捷锄1�7 CTRL + I 就可以打弄1�7 composer 功能〄1�7/p>

我的第一次使用就是�1�7�中我已有的丄1�7个弹窗设计，然后让它先优化一下样式，让它更清爽一点，然后基于这个弹窗，�1�7�中其他的几个弹窗，讄1�7 cursor 统一丄1�7下样式，参�1�7�某个弹窗，几乎两次对话就改完了，以径1�7这种杂活儿我可能得整丄1�7两个小时，让 cursor 来做就五分钟＄1�7/p>

还有丄1�7个可读�1�7�优化的例子，我选择了一丄1�7 vue 文件，里面是我的卡片的组件代码，讄1�7 cursor 帮我优化，并且说丄1�7些注意点＄1�7/p>

cursor 生成代码后，就会告诉你调整的范围，最好自己再 review 丄1�7下，丄1�7些变量写错的问题 cursor 也会犯的〄1�7/p>

我的用法像和人一样聊天，你自己的项目你最清楚，使甄1�7 cursor 的时候就像带丄1�7个新人参与你的项目，实现霄1�7求时。你帄1�7 cursor 找引用的资料，让它参考着做，做完了你帮他验证丄1�7下功能的可行性，同时还要帮他 review 丄1�7下代码，如果自己能够发现的问题，能够准确指出让它帮你修改。不论是霄1�7求还是问题，你说的越精确效果就越好，

我目前还是将丄1�7些繁琐工作交组1�7 cursor 去完成，没有让它参与创意方面的工作，不过我看人家小白都可以用 cursor 从零到一做一丄1�7 app，可胄1�7 cursor 的潜力我还没有完全挖掘�1�7�1�7/p>

注意炄1�7/strong>

1. 因为 cursor 的代码改动太方便了，丄1�7下子改很多个文件，�1�7�且不像自己改那么可控，因此丄1�7旦你确定没问题了，就甄1�7 git 提交丄1�7下代码保存一下当前的记录，避免调整太多了，代码不受你的控制了，引入意外的问题〄1�7/li>
2. 代码改动后，记得点一丄1�7 accept 接受改动，不然你切换不同 composer 时，会把当前 composer 的改动移除，再基于新的1�7 composer 改动后，两边的代码就有点冲突了�1�7�1�7/li>