【Cursor实战】实现一个网页版小猫补光灯效果

最新推荐文章于 2025-04-17 11:46:24 发布

小溪彼岸

最新推荐文章于 2025-04-17 11:46:24 发布

阅读量24

点赞数

原文链接：https://mp.weixin.qq.com/s/VMKgFJL1DREVDz3dBuvfVg

版权

AIGC 同时被 2 个专栏收录

60 篇文章

订阅专栏

AI编辑器

24 篇文章

订阅专栏

前言

今天尝试用Cursor复刻一个网红应用小猫补光灯记录一下Cursor在个人项目中的实现过程、表现及问题。感兴趣的小伙伴也可以看往期案例：

第一步：构建页面结构和风格

第一步先构思应用的基本功能，搭建应用的整体页面结构

在这里插入图片描述

在聊天窗口写提示词经常会因为排版问题导致意外触发提交，建议先在其他文档中编写好提示词再粘贴到对话窗口或者写在 .cursorrules 和 NotePads 中，这里我写在NotePads中，也可以将应用草稿图发给Cursor作为参考。

使用快捷键【Cmd+I】唤起 Composer，引入NotePads笔记作为上下文，直接回车等待Cursor为我们生成代码。

在这里插入图片描述

用到的提示词如下：

# 角色
你是一个工作10年的资深前端工程师，请根据我的要求完成任务
## 背景
我想使用HTML、CSS、JavaScript做一个简易版的小猫补光灯应用，实现原理是根据屏幕的反光给人物脸部进行补光。
## 要求
1. 页面顶部以可爱的风格展示 "美颜补光灯" 标题
2. 页面中间区域调用摄像头展示人脸
3. 提供背景设置，可以选择背景色
4. 提供滤镜设置，可以选择滤镜风格，调节亮度、饱和度和色相等
## 风格
1. 参考如iphone、google等大厂的审美和设计风格进行设计
2. 配色以少女感为主

很快Cursor完成了基本页面结构的编写，点击【Save all】保存

在这里插入图片描述

双击【index.html】文件在浏览器中打开，预览效果如下：

在这里插入图片描述

这里我没有开摄像头，实际效果头像框是可以看到人像的，对效果满意可以点击【Accept all】接受代码，如果对效果不太满意，可以让Cursor进行调整

第二步：优化交互

在这里插入图片描述

Cursor第一步生成的效果并不是很完美，Cursor提供了白色白色背景和设置模块的背景色重合导致看不见了，其次进度条看不到具体的色值：

白色背景默认是看不到的，我们需要为其加一个边框，以便可以知道有白色背景
滤镜进度条，看不到具体的数值

下面我们将这两个问题反馈给Cursor，让Cursor帮我们调整效果

在这里插入图片描述

用到的提示词如下：

做的很好，我需要你帮我优化两个问题：
- 白色背景默认是看不到的，我们需要为每个背景颜色都默认加一个与之颜色有对比度的边框，以便可以让用户看到所有背景色
- 调整滤镜进度条交互效果，在滑块右侧添加输入框，滑动滑块时可以在右侧输入框实时展示参数值，用户也可以在输入框输入参数进行设置

在这里插入图片描述

等待Cursor修改完成后，点击【Save all】进行保存

在这里插入图片描述

经过上面的调整，设置部分基本上满足了我们的需求

第三步：产品优化

产品完成后，如果我们不知道产品是否受人欢迎或者不知道如何改进产品，我们可以让Cursor帮我们进行产品优化，这里将需求描述写到了NotePads中，也可以直接在对话框中输入。

在这里插入图片描述

用到的提示词如下：

完成的很好，下面我想让你担任一位优秀大厂产品经理，请从年轻女性喜欢的角度思考和分析该产品，并帮我对产品进行优化，让更多女性喜欢这个应用。

在这里插入图片描述

Cursor优化完成后，我们看下最终效果：

在这里插入图片描述

添加了美颜、贴纸、拍照保存和分享相关设置，不过肤质光滑程度、瘦脸程度、贴纸等部分需要更复杂的处理，这里Cursor并没有真正帮我们实现，只是预留了Todo，这也算是过度优化了，我们可以选择去掉该内容也可以选择让Cursor辅助我们实现，这里就不再继续延伸了。

在这里插入图片描述

第四步：补充项目描述

项目完成后补充项目说明文档是有必要的，不仅可以帮我们快速回忆项目内容，而且有迭代更新时可以让AI对项目进行快速了解。

在这里插入图片描述

用到的提示词：

分析当前项目的功能、项目结构，输出到 README.md 文件

完整效果

在这里插入图片描述

总结

今天这个案例Cursor完成的还是很顺利的，过程中没有遇到卡壳，抛开Cursor最后带来的过度优化，Cursor在完成项目的整体过程是令人惊叹的，配合Claude 3.7在实现前端UI工作上可以很大程度为我们助力。

项目地址

项目放到Github了，感兴趣的小伙伴可以自行玩耍

Github地址：https://github.com/MisterZhouZhou/kitten-fill-light

友情提示

见原文：【Cursor实战】实现一个网页版小猫补光灯效果