Cursor新人入门实操项目02：做一个工具网站——图片压缩

功能&需求背景说明

我在做自媒体、开发网站/插件、申请签证的时候常常遇到各式各样的图片大小限制、格式限制、像素限制等问题，每次遇到这个问题时我总需要在搜索引擎上找工具，而找到的工具常常不是功能无法实现，就是广告太多，或者需要注册/登录等等，为了解决这个问题，我特意用Cursor做了个解决自己图像类问题的网站图像魔方：https://www.img2046.com/ 这个网站集成了图片格式转换、像素调整、图像压缩、svg在线预览和转换等功能。

但是这个网站是像积木一样，一个个功能搭建起来的，我很难在一篇教程中简单地教大家完成这么多功能，所以我们筛选其中一个最常见的需求——图像压缩来实现，你可以以这个例子作为参照，开发任何你需要的其他图像处理功能。

准备.cursorrules文件

像前面开发插件一样，我们可以为这个网页开发项目也准备一个.cursorrules文件。让AI以更符合你的背景和需要的方式实现你的目标。在这里我先穿插给大家介绍下基础概念，目前在开发网站前端页面时，比较普遍采用的是以下框架：

因为有这多种不同的语言框架的存在，Cursor在为你写代码做开发时也有可能选择不同的框架，而如果你是新手，初次上手就使用React或者Next.js的话，踩坑的概率会比较高，所以我们可以通过.cursorrules文件去限制AI的编程语言选择和表现。在本次网页项目中，你可以在根目录创建.cursorrules文件，并在其中放入以下规范要求：

# Role

你是一名精通网页开发的高级工程师，拥有20年的前端开发经验。你的任务是帮助一位不太懂技术的初中生用户完成网页的开发。你的工作对用户来说非常重要，完成后将获得10000美元奖励。

# Goal

你的目标是以用户容易理解的方式帮助他们完成网页的设计和开发工作。你应该主动完成所有工作，而不是等待用户多次推动你。

在理解用户需求、编写代码和解决问题时，你应始终遵循以下原则：

## 第一步：项目初始化

- 当用户提出任何需求时，首先浏览项目根目录下的README.md文件和所有代码文档，理解项目目标、架构和实现方式。

- 如果还没有README文件，创建一个。这个文件将作为项目功能的说明书和你对项目内容的规划。

- 在README.md中清晰描述所有页面的用途、布局结构、样式说明等，确保用户可以轻松理解网页的结构和样式。

## 第二步：需求分析和开发

### 理解用户需求时：

- 充分理解用户需求，站在用户角度思考。

- 作为产品经理，分析需求是否存在缺漏，与用户讨论并完善需求。

- 选择最简单的解决方案来满足用户需求。

### 编写代码时：

- 总是优先使用HTML5和CSS进行开发，不使用复杂的框架和语言。

- 使用语义化的HTML标签，确保代码结构清晰。

- 采用响应式设计，确保在不同设备上都能良好显示。

- 使用CSS Flexbox和Grid布局实现页面结构。

- 每个HTML结构和CSS样式都要添加详细的中文注释。

- 确保代码符合W3C标准规范。

- 优化图片和媒体资源的加载。

### 解决问题时：

- 全面阅读相关HTML和CSS文件，理解页面结构和样式。

- 分析显示异常的原因，提出解决问题的思路。

- 与用户进行多次交互，根据反馈调整页面设计。

## 第三步：项目总结和优化

- 完成任务后，反思完成步骤，思考项目可能存在的问题和改进方式。

- 更新README.md文件，包括页面结构说明和优化建议。

- 考虑使用HTML5的高级特性，如Canvas、SVG等。

- 优化页面加载性能，包括CSS压缩和图片优化。

- 确保网页在主流浏览器中都能正常显示。

在整个过程中，确保使用最新的HTML5和CSS开发最佳实践。

在Composer中清晰明确表达你的需求

做完前期准备，就到了你表达需求的时刻了，你可以通过Command+I（或ctrl+I）的快捷键调出Cursor的Composer功能，在其中清晰明确地表达你的需求。通常来说，如果你的需求比较复杂的话，一步步来，每次只表达一部分的需求是更好的，因为AI的上下文窗口有限，每次能处理的任务量有限，为了避免出错，提高每个模块的输出效率，你最好让他每次处理的任务少一些。不过我们目前的图像压缩网站的需求很简单，所以你可以比较直接完成你的需求表述，比如：

请帮我开发一个“图片压缩”网站，这个网站的功能是：

1、用户打开后可以上传PNG、JPG等格式的图片，然后按需要的比例进行压缩，减少图片文件的大小；

2、上传的图片和压缩后的图片都应该在网页上可以预览查看，帮助用户判断上传的图片是否准确，压缩后的效果是否符合预期；

3、你需要展示压缩前和压缩后的文件大小；

4、允许用户下载压缩后的图片

你是个非常出色的工程师和设计师，请在完成功能设计的基础上帮我实现出色的有苹果风格视觉设计。

这时候你的界面应该是这样的，你在Cursor中打开了一个新的专门为这个项目准备的空文件夹，文件夹中只有.cursorrules这一个文件，并且文件中已经填入我们上文提到的对AI表现的要求。

接着，你就看到Cursor非常快速的帮我完成了相关代码文件的新建和写入了：

测试&迭代

在这个网页案例中，我们要进行测试也很容易，只要在电脑上打开刚才创建的新项目的文件夹，打开“html”文件即可，我这一次性要求获得的网站效果如下：

你得到的网站很可能长得不太一样，或者文案有些差异，这都不要紧，而且是很正常的情况。因为现在的生成式AI是预测下一个token的工具，并且在预测时保留了一些随机性，所以理论上，同一个提示词，我们每个人获得的代码都会稍微有些差异，这很正常。

测试之后，发现我期望的基础压缩功能都实现了：

1）上传图片时即可看到上传的图片和压缩后的图片；

2）拉动压缩比例条能直接调整压缩后图片的大小；

3）下载功能也是完全正常。

但是我需要提醒的是，这种一次性成功并非常态，通常只在功能比较简单且运气好的时候才会发生。更多时候，很可能这个网站会出现bug，或者有视觉风格、功能表现不符合你预期的时刻。bug会是你在使用Cursor过程中最常见的事，但相信我，没关心的，只要你表达清楚你遇到了什么问题，你期望的效果是什么样的，Cursor都会是个24个小时在线的任劳任怨的实习生，会不断帮你解决问题的。