大多数开发者宁愿浪费数小时，也不肯花20分钟学会用 Cursor

@大迁世界

于 2025-05-28 08:10:28 发布

阅读量819

点赞数 8

本文链接：https://blog.csdn.net/qq449245884/article/details/148320816

版权

我见过一些开发者，明明可以轻松解决的问题，却偏偏要给自己制造困难。

他们宁愿花上几个小时和代码中的 bug 死磕，也不愿花20分钟搭建一个高效的自动化流程。

这简直不可理喻！

自从我开始用 Cursor —— 一款类似“编程高手朋友”的 AI 驱动的 IDE 后，我总结出一套五步技巧，快速上手、轻松开发。

接下来，我用一个具体项目——FIGxAI（类似 MidJourney 的平台，基于 OpenAI 的图像模型构建，目前因资金问题暂未上线）作为例子，详细讲解一下我的经验。

为什么要花时间用 Cursor？

有一次，我因为从零开始写一个 React 组件，结果整整浪费了一整个周六的时间，只因为少写了一个 TypeScript 类型定义。从此，我再也不这么做了。但我发现很多开发者还是在重复这种错误，浪费大量时间和精力，而 Cursor 明明可以大幅提高效率。适当的前期设置，可以避免无休止的反复调整。这套方法，让我更轻松地专注于快速交付代码。

步骤一：别从零开始写代码

从头开始搭建一个项目，就像烤蛋糕不看菜谱，肯定会出问题。你应该选择一个成熟的模板，包含以下工具：

ESLint 防止低级错误。
Shadcn UI 快速搭建美观组件。
Zod 表单校验不再出错。
TailwindCSS 拒绝手写 CSS。
TypeScript 提升代码稳定性，帮助 Cursor 更准确地给出建议。

在 FIGxAI 项目里，我用的是 Next.js 15，搭配 Tailwind、Shadcn UI、React Hook Form、Zod 和 Lucide 图标。示例如下：

package.json

{
  "name": "figxai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.0.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwindcss": "^3.4.1",
    "@hookform/resolvers": "^3.3.2",
    "zod": "^3.22.4",
    "lucide-react": "^0.263.0",
    "@radix-ui/react-slot": "^1.0.2",
    "swr": "^2.2.4"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "15.0.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "typescript": "^5"
  }
}

选择 Next.js 模板或 GitHub 上的成熟项目模版，Cursor 特别适合 TypeScript 和 ESLint，它会自动避免一些基础问题。别再掉进“空白项目”的陷阱。

步骤二：明确告诉 Cursor 你的需求

Cursor 很聪明，但毕竟不是你妈，它无法直接猜出你到底要做什么。我曾经没写清楚需求，结果写出一个漂亮但完全没功能的按钮。因此，花15分钟详细列出你要做的内容，包括技术选型，很有必要。

以 FIGxAI 为例，我希望它拥有 MidJourney 的体验，采用 OpenAI 的 gpt-image-1 模型，于是我列出清晰的功能需求：

FIGxAI 功能需求：

使用 OpenAI 的 gpt-image-1 模型。
布局包含底部聊天框和顶部滚动图片时间轴。
响应式网格布局：手机1列、平板2列、桌面4列。
图片自动加载，带分页和筛选功能（日期、状态、排序）。
图片支持下载及查看详情弹窗。
提供完善的 Prompt 设置（如图片质量、比例、压缩率等）。
浏览器本地存储图片和 API 密钥。
技术栈为 Next.js 15、Tailwind、Shadcn UI、React Hook Form、Zod、SWR 和 Lucide 图标。
图片懒加载、小体积、移动端友好。

清晰的需求列表，能让 Cursor 更准确地执行任务，避免后续反复修改。

步骤三：使用任务管理工具

过去我用便签管理任务，结果惨不忍睹。有次甚至忘了给客户做设置页面。现在我用 TaskMaster AI，它和 Cursor CLI 配合非常棒。具体做法：

为每个功能创建任务（如：“实现响应式图片网格”）。
设置优先级并关联具体需求。
通过 CLI 将任务导入 Cursor。

这样，Cursor 始终专注一个目标，效率倍增。

步骤四：教 Cursor 你的代码风格

Cursor 能自动识别你的代码习惯，并生成规则，保证项目一致性。我过去的项目中，有的组件用 Tailwind，有的组件用内联样式，结果混乱不堪。

具体做法：

在 Cursor 聊天里输入 /Generate Cursor Rules。
标记你的组件文件，比如 @Timeline.tsx，让 Cursor 根据现有代码自动生成规则。

例如 FIGxAI 项目中 Cursor 总结出：

使用 TypeScript 函数组件。
Tailwind 统一样式。
Shadcn UI 统一按钮和模态框。
Lucide 图标。

步骤五：保持干净结构，不断优化

代码库会不断变化，规则也要随之更新。此外，良好的文件夹结构也很关键。

FIGxAI 项目的结构：

figxai/
├── components/  # 组件
├── lib/         # 辅助函数
├── schemas/     # Zod校验
├── app/         # Next.js 路由
├── public/      # 静态资源
├── styles/      # 样式

设置规则：