我用 Cursor AI 开发了一个在线加密工具网站

最近接触了一个新的AI辅助开发工具Cursor AI，为新用户提供了免费额度，我用它代替了 Github Copilot 工作了一段时间，用来辅助开发我的 Unity 项目。在使用期间，我逐渐摸索了 Cursor 的使用方式，以及它的强大功能，效率高到吓人，并且能够非常清晰地理解我的开发需求，为我提供解决方案。

其中，它有一个优点是对整个项目的整理与梳理，并且能够根据我的需求，能够一次修改多个文件。
于是我想，是否可以挑战一下使用 cursor 完整地构建一个项目，我不参与修改任何代码，只负责提出需求，看看 cursor 是否能够完成这个任务。结果让我非常惊喜，cursor 不仅能够完成任务，而且完成得非常好。

项目实现

我挑选了一个比较简单的项目，一个在线加密工具网站，包含以下功能：

AES 加密/解密
SHA256/MD5 哈希计算
Base64 编码/解码
随机密码生成器
中英文双语支持

首先，我给它的第一个指令是：

本项目将会构建一个静态网页，部署在vercel 上，提供简单的加密服务。

encryption-tool/
│── public/             # 静态资源（可选）
│   ├── favicon.ico     # 网站图标
│   ├── logo.png        # 站点 Logo
│── src/                # 源代码
│   ├── assets/         # 存放 CSS、字体、图片等
│   ├── scripts/        # 存放 JavaScript 逻辑
│   │   ├── aes.js      # AES 加密相关代码
│   │   ├── hash.js     # 哈希算法（SHA256/MD5）
│   │   ├── base64.js   # Base64 编码解码
│   ├── index.html      # 主页
│   ├── style.css       # 站点样式
│   ├── app.js          # 主要 JS 逻辑
│── .gitignore          # Git 忽略文件
│── package.json        # npm 依赖（可选）
│── vercel.json         # Vercel 配置文件（可选）
│── netlify.toml        # Netlify 配置文件（可选）
│── README.md           # 项目说明

根据这个项目结构创建我的项目，并创建这些文件，在相关文件内生成代码。

备注：其实以上文件结构也是AI生成的....

随后 Cursor 生成项目代码，并给出了构建指令：

npm install
npm start

当我运行该指令时，npm 居然报错了，随后我给 Cursor 发送了第二个指令：

按照依赖时报错：
 npm install
npm ERR! code EJSONPARSE
npm ERR! path C:\Users\jxxcl\Documents\GitHub\cryptoWeb/package.json
npm ERR! JSON.parse Unexpected end of JSON input while parsing " "
npm ERR! JSON.parse Failed to parse JSON data.
npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jxxcl\AppData\Local\npm-cache\_logs\2025-03-01T15_36_47_056Z-debug-0.log

Cursor 为我解决了这个问题，原因是 package.json 文件格式错误；
解决 package.json 文件格式错误后，我继续运行指令npm start，项目成功运行。我可以通过浏览器 http://localhost:3000 访问网页。

但是，当我想要加密文本时发现，所有的加密功能都不可用！随后我给 Cursor 发送了第三个指令：

当我使用 ase 加密时，报错：
加密失败：Cannot access 'CryptoJS' before initialization

Cursor 为我解决了这个问题，原因是 CryptoJS 库未正确导入。
它将 CryptoJS 库的导入语句修改了位置，解决了这个问题；

修改后，所有的加密功能都可以正常工作了。

在网页的主要功能可以使用之后，我开始添加一些细节，比如网页图标、网站 Logo、网站标题等。但是我在 public 目录下放置了 logo.ico、logo.png，而网页并没有生效，我无法看到我的网站 Logo。随后我给 Cursor 发送了第四个指令：

我创建了 public目录，并放入了png文件和ico 文件，为什么调试时，我的网页不显示这两个图片？

Cursor 为我解决了这个问题，原因是图片路径错误。
它将图片路径修改正确，解决了这个问题；

还有一个问题，网页的 footer 组件，没有贴近底部，我希望它贴近底部。随后我给 Cursor 发送了第五个指令：

当我npm start 之后，使用桌面浏览器访问测试页，发现 footer 没有贴近网页的底部，我希望 footer 能贴近网页的底部

Cursor 为我解决了这个问题，它将 footer 组件修改为贴近底部;

此时的它只有 3 个加密功能，但是我希望此网页还支持密码生成器，于是我给 Cursor 发送了第六个指令：

我希望再增加一个功能，密码生成器，要求添加用户可选的配置，比如大小写，数字，常见特殊字符等

Cursor 添加了密码生成器，并添加了用户可选的配置，比如大小写，数字，常见特殊字符等;

由于我的网页将会部署在 vercel 上，全球用户都可以访问，于是我给 Cursor 发送了第七个指令：

此网站将面向全球用户，请为它添加语言转换，包含中文/English，并且英语为默认语言

Cursor 为我添加了语言转换，包含中文/English，并且英语为默认语言;

为了获取更多的浏览量，我需要添加一些 SEO 优化，于是我给 Cursor 发送了第八个指令：

为网站添加一些SEO关键字，以便获取更多浏览量

Cursor 在 head 标签中添加了许多 SEO 关键字;

至此，我使用 Cursor 完成了网页的构建，并实现了所有功能。接下来要做的就是部署到 vercel 上，并绑定域名。此处略过...

网站预览：https://www.fast-crypto.org/

总结

Cursor 真的很强大，周日休息时我有了使用 Cursor 构建网站的想法, 然后我开始行动，加上部署网页，以及写完这篇博客，总共花费了不到 3 小时，并且中途我没有参与任何代码的编写。
想起来2年前，我写网页时还需要一行一行的写，出错了还需要调试，而现在我只需要提出需求，Cursor 就会自动生成代码，并且 bug 很少，网站样式也符合大众审美。不禁感慨，以后的程序员可能真的会失业了，从而诞生出一种新的职业，Prompt Engineer。