Cursor 深度实战：我如何用一份 .cursorrules 在 24 小时内构建 100+ 工具站

项目地址：WebUtilityKit.com | GitHub: 点击跳转

核心摘要 (TL;DR)

利用 Cursor 强大的 AI 结对编程能力，我在不到 24 小时内构建了一个包含 100 多个实用 Web 工具的在线平台。

项目特点： 纯前端、无后端、无框架（No React/Vue）、零 npm 依赖。

核心秘诀： 依靠原生 JS (Vanilla JS)、Tailwind CSS，以及一份精心打磨的 .cursorrules 文件——它成功地将 AI 变成了最懂我的架构师。

一、 起源：从一个 Prompt 到落地执行

一切始于我在 Cursor 中问 Claude 的一个简单问题：

“列出 100 个可以纯客户端实现的常用 Web 实用工具。”

几秒钟内，AI 甩给我一份详尽的清单：JSON 格式化、图片压缩、强密码生成、单位转换、PDF 处理……应有尽有。

紧接着，我追问了核心架构问题：

“如何以最大化代码复用的方式，最简单地实现所有这些工具？”

AI 的回答非常直接：构建一套“设计系统即代码” (Design System as Code)。

---

二、 核心：.cursorrules 文件

很多人对 AI 编程助手存在误解，把每一次 Prompt 都当作一次性的“问答”。但 AI 真正的威力在于Context（上下文）的持久化。

我花了最初的 2 个小时打磨 .cursorrules 文件。但这 300 多行规则并不是我一行行敲出来的，而是用 AI 来生成控制 AI 的规则。

核心技巧：套娃式开发

我没有从零手写，而是直接对 Cursor 说：

“我想做一个纯原生 JS + Tailwind 的项目，要求代码风格像 Linear 一样极简，严禁使用后端代码。请你帮我起草一份完美的 .cursorrules 文件，包含技术栈约束、代码风格指南和 SEO 要求。”

AI 瞬间生成了 90% 的内容。这份文件最终成为了项目的“DNA”，它定义了：

• 技术栈铁律 (STRICT)： 禁止 React/Vue，仅限使用浏览器原生 API (FileReader, Blob 等)。
• UI/UX 标准： 必须移除容器边框，卡片强制使用“悬浮”质感，统一配色变量。
• 代码规范： 强制使用语义化 HTML，禁止内联样式。

有了这份文件，每当我说“做一个 Base64 编码器”时，AI 不需要我再解释布局、按钮样式或 SEO 结构，它会自动读取规则并完美执行。

---

三、 24小时冲刺复盘

• 🔴 第 1-2 小时：基建搭建
  • 通过 AI 生成并微调 .cursorrules 设计系统。
  • 确定项目目录结构，创建共享的 Header/Footer 组件。
• 🟡 第 3-8 小时：原型开发 (前 30 个工具)
  • 效率： 平均 ~10 分钟/工具。
  • 策略： 使用 Tailwind CDN 快速验证想法。
  • 产出： 完成了 JSON Formatter, Password Generator 等基础工具。
• ⚫ 第 9-12 小时：架构危机 (详见下文)
  • 遭遇 Tailwind CDN 到 CLI 的迁移深坑，不得不停下来重构。
• 🟢 第 13-20 小时：爆发式产出 (剩余 70 个工具)
  • 效率： 惊人的 ~5 分钟/工具。
  • 策略： 切换到 Tailwind CLI，优化 prompt 模板。由于规则明确，AI 的代码生成几乎是一次过。
• 🔵 第 21-24 小时：打磨与部署
  • 批量补充 SEO Meta 信息。
  • 配置 Cloudflare Pages 自动化部署。
  • 移动端适配测试。

---

四、 踩坑实录：Tailwind CDN 到 CLI 的迁移

开发过程并非一帆风顺，最大的坑出现在构建方式的切换上。

在原型阶段，为了图快，AI 生成的代码大量使用了 CDN 模式下的自定义语法：

HTML

<style type="text/tailwindcss">
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
  }
</style>

这在 CDN JIT 模式下运行完美。但当我为了生产环境性能（加载速度）迁移到 Tailwind CLI 进行构建时，页面样式全崩了。

原因： 标准的 Tailwind CLI 无法解析 HTML 文件中 <style> 标签内的 @apply 语法。

解决方案：

1. 重构：将所有散落在 30 个 HTML 文件中的 @apply 规则替换0到DOM的class中。

2. 更新规则：在 .cursorrules 中明确禁止 CDN 风格语法：

   YAML

   # Forbidden in HTML (do not generate):
   - <style type="text/tailwindcss"> ... </style>
   - Any @apply inside HTML <style> tags
   

教训： 在让 AI 大规模生成代码之前，必须先明确生产环境的构建约束，否则后期的重构成本极其高昂。

---

五、 部署：Cloudflare Pages 真香

CI/CD 从未如此简单：

只要将 Cloudflare 连接到 GitHub 仓库，之后的一切都是自动的。

• 配置耗时：3 分钟
• 构建命令：无（纯静态 HTML，甚至不需要 npm run build）
• 托管成本：$0 (免费版足够)
• 收益：全球 CDN 加速 + 自动 HTTPS + 每次 git push 自动上线。

---

六、 成果数据一览

指标	数值
工具总数	100+
开发时长	~24 小时
代码行数	80,000+
后端代码	0 行
npm 依赖	0 个
单页加载 (FCP)	< 0.5s

---

七、 技术反思：为什么用原生 JS (Vanilla JS)？

在 React/Vue 统治天下的今天，为什么我要反其道而行之？

1. 极致性能：没有 Virtual DOM 的 Diff 算法，没有 Hydration 的水合过程。浏览器原生 API 就是最快的。
2. 绝对简单：每个工具就是一个独立的 HTML 文件。想加新功能？新建文件夹 -> 粘贴 -> 改逻辑。不需要复杂的 Webpack/Vite 配置。
3. 隐私安全（卖点）：
   • 无后端 = 数据不出本地。
   • 图片压缩、PDF 分割、密码生成，全部利用 Web Crypto API 或 WASM 在浏览器端完成。用户数据永远不会上传到我的服务器。
4. 设计一致性：
   • 全站暗黑模式优先（Dark Mode First）。
   • 统一的“隐私徽章”设计，强调本地处理，建立用户信任。

---

八、 给开发者的建议

1. 投资你的 .cursorrules：

   我花在写规则上的 2 小时，为后续节省了 20+ 小时的重复 Prompt 和 Debug 时间。它是 AI 时代的“配置文件”。

2. 原型要快，但标准要定早：

   千万别像我一样等到写了 30 个页面才去统一构建工具（CLI），重构是火葬场。

3. 限制激发创造力：

   “无后端、无 npm”听起来是限制，但它迫使我挖掘了浏览器原生 API 的潜力，反而做出了更隐私、更轻量的产品。

---

九、 写在最后

在 24 小时内构建 100 个工具，核心不在于我的手速，也不在于技术深度。

我想强调的是：在这个 AI 辅助编程的时代，技术门槛已经被无限放低。 只要你会截图报错给 AI，只要你会清晰地描述需求，每个人都可以是全栈工程师。

.cursorrules 才是真正的产品，这 100 个工具只是它的产出物。

如果你也想尝试，现在就打开 Cursor，开始定义属于你的 Rules 吧。

项目开源中，欢迎 Star ⭐ 或提交 PR：

👉 GitHub: my-tools-matrix

👉 在线体验: WebUtilityKit.com

---

如有技术问题，欢迎在评论区交流！