目前实习中使用cursor的心得

我目前实习中使用Cursor的心得

分配给我的任务，基本上都是业务ToC的任务，比如：

• 社区主页feeds流，需要加一种跨列的大卡
• 新建落地页

这种任务特点是：基于以前的项目进行功能的拓展。这时候如果要让AI发挥良好的效果：

1. 上下文要给他足够的引用，让他理解已有的仓库
2. 之前的代码需要有良好的可拓展性

虚拟列表场景

如果一开始用的是react-virtualized这种外部框架：

• 可能初步的需求是可以满足
• 但是可拓展性很差：
  • 不能加上下的骨架屏
  • 不能适配跨列的大卡

幸运的是，之前的代码是自己实现的集瀑布流、按需加载、实时渲染于一体的列表结构，主要逻辑是：

• 保存每一列存的卡片的高度、位置
• 具体加上一张卡片，只要他能渲染，那我们就：
  1. 先渲染每一张卡的高度
  2. 把他加入到当前最短的列

所以，面对新需求：

• 基本逻辑不变
• 只是要判断的单列，改成了跨列数量的列组：
  1. 找到目前高低差最短的列组
  2. 加入这n列
  3. 每一列的数据增加一个gap字段，用来记录产生的空隙
  4. 后续可以决定是否填补缝隙，还是就不管他

UI部分

虽然Figma转换成code目前已经有一些实验性的工具，但实际体验下来不是很理想。我自己试过：

• 一个Browser Tools的MCP
  • 可以直接在Chrome Console里选中某一个元素
  • 让Cursor结合UI图去改每一个组件具体的CSS
  • 亲测比较有效率的能开发出一个符合UI的CSS样式

但是问题：

• AI每次生成的代码都是有随机性的
• 每一次生成的CSS可能都不一样

这时候就需要：

1. 程序员有经验，判断哪一种生成结果是最优解
2. 甚至是提前告知AI最优解，然后让AI去执行
3. 这样用AI写出的代码也会减少幻觉，更可维护

AI不能胜任的任务：需求评审

我们有一个需求是给AI Model建模工具：

• 建模工具每天会生成很多份户型图
• 这些AI生成的户型图人工审核很花时间
• 所以我们去找外包的打标人员给每一张图打标

这时候涉及很多种页面：

1. 外包打标人员的打标页面：
   • 要求：传统的筛选（日期、户型等）列表
   • 有一个”开始打标”按钮，领到200个打标的户型图
   • 问题：要不要设置成打标完成之后再进行下一个200个户型图的领取？
2. 管理员页面：
   • 要从每个打标人员已打标的户型图中随机抽取一定比例做人工审核
   • 问题：抽取比例是多少？
   • 页面设计如何与其他页面有组件复用逻辑？
   • 数据流程的流向
   • 每张打标图上数据字段的添加要跟后端一起制定
   • 页面之间不能有太多功能上/数据上的耦合
   • 最好单个页面功能相对单一

程序员代码的两种类型

1. 纯业务代码
   • 产品经理和运营每天会塞给我们成千上万的需求
   • 用AI做其实很快
   • 做细节有时会很费时，有时AI可以一次性做好（基于随机性）
2. 技术代码（前端角度）：
   • 性能优化
   • 架构升级
   • 打包过程的前端工程化

我的思考：程序员的出路

• 尽快快速地利用AI把产品需求快准狠地做好
• 多挤出来时间做：
  • 技术上的升级/优化
  • 了解System Design
  • 学习后端相关知识

因为前端是连接后端和产品的桥梁，可以：

• 最大范围地获取各方信息
• 协调各方联调