前言
今天尝试用Cursor复刻一个网红应用 小猫补光灯 记录一下Cursor在个人项目中的实现过程、表现及问题。感兴趣的小伙伴也可以看往期案例：
第一步：构建页面结构和风格
第一步先构思应用的基本功能，搭建应用的整体页面结构
在聊天窗口写提示词经常会因为排版问题导致意外触发提交，建议先在其他文档中编写好提示词再粘贴到对话窗口或者写在 .cursorrules 和 NotePads 中，这里我写在NotePads中，也可以将应用草稿图发给Cursor作为参考。
使用快捷键【Cmd+I】唤起 Composer，引入NotePads笔记作为上下文，直接回车等待Cursor为我们生成代码。
用到的提示词如下：
markdown
# 角色
你是一个工作10年的资深前端工程师，请根据我的要求完成任务
## 背景
我想使用HTML、CSS、JavaScript做一个简易版的小猫补光灯应用，实现原理是根据屏幕的反光给人物脸部进行补光。
## 要求
1. 页面顶部以可爱的风格展示 "美颜补光灯" 标题
2. 页面中间区域调用摄像头展示人脸
3. 提供背景设置，可以选择背景色
4. 提供滤镜设置，可以选择滤镜风格，调节亮度、饱和度和色相等
## 风格
1. 参考如iphone、google等大厂的审美和设计风格进行设计
2. 配色以少女感为主很快Cursor完成了基本页面结构的编写，点击【Save all】保存
双击【index.html】文件在浏览器中打开，预览效果如下：
这里我没有开摄像头，实际效果头像框是可以看到人像的，对效果满意可以点击【Accept all】接受代码，如果对效果不太满意，可以让Cursor进行调整
第二步：优化交互
Cursor第一步生成的效果并不是很完美，Cursor提供了白色白色背景和设置模块的背景色重合导致看不见了，其次进度条看不到具体的色值：
- 白色背景默认是看不到的，我们需要为其加一个边框，以便可以知道有白色背景
- 滤镜进度条，看不到具体的数值
下面我们将这两个问题反馈给Cursor，让Cursor帮我们调整效果
用到的提示词如下：
diff
做的很好，我需要你帮我优化两个问题：
- 白色背景默认是看不到的，我们需要为每个背景颜色都默认加一个与之颜色有对比度的边框，以便可以让用户看到所有背景色
- 调整滤镜进度条交互效果，在滑块右侧添加输入框，滑动滑块时可以在右侧输入框实时展示参数值，用户也可以在输入框输入参数进行设置
等待Cursor修改完成后，点击【Save all】进行保存
经过上面的调整，设置部分基本上满足了我们的需求
第三步：产品优化
产品完成后，如果我们不知道产品是否受人欢迎或者不知道如何改进产品，我们可以让Cursor帮我们进行产品优化，这里将需求描述写到了NotePads中，也可以直接在对话框中输入。
用到的提示词如下：
完成的很好，下面我想让你担任一位优秀大厂产品经理，请从年轻女性喜欢的角度思考和分析该产品，并帮我对产品进行优化，让更多女性喜欢这个应用。
Cursor优化完成后，我们看下最终效果：
添加了 美颜、贴纸 、 拍照保存 和 分享 相关设置，不过 肤质光滑程度、瘦脸程度、贴纸 等部分需要更复杂的处理，这里Cursor并没有真正帮我们实现，只是预留了Todo，这也算是过度优化了，我们可以选择去掉该内容也可以选择让Cursor辅助我们实现，这里就不再继续延伸了。
第四步：补充项目描述
项目完成后补充项目说明文档是有必要的，不仅可以帮我们快速回忆项目内容，而且有迭代更新时可以让AI对项目进行快速了解。
用到的提示词：
分析当前项目的功能、项目结构，输出到 README.md 文件完整效果
总结
今天这个案例Cursor完成的还是很顺利的，过程中没有遇到卡壳，抛开Cursor最后带来的过度优化，Cursor在完成项目的整体过程是令人惊叹的，配合Claude 3.7在实现前端UI工作上可以很大程度为我们助力。
项目地址
项目放到Github了，感兴趣的小伙伴可以自行玩耍
Github地址：github.com/MisterZhouZ...
友情提示
本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。