Cursor+LLM：快速完成侧项目的实战工作流

大约五年前，我转变为工程经理的角色，从那时起我在日常工作中就没有再编程了，但那种渴望一直存在。因此我继续从事副业项目来保持编程能力，不断磨练自己的技能。

由于时间总是有限的，过去副业项目的进展缓慢，许多项目因为生活事件导致失去动力后一直未完成，让它们变得很难恢复。不过在过去一年（2024），我在副业项目上的生产力非常高，能够快速构建我需要的工具或项目，并将它们部署供他人使用——换句话说，完成了每个项目的 v1 版本。

我构建的一些例子包括：

• jsonplayground.com - JSON 格式化工具，同时在浏览器中也可以使用 WASM 的 JQ，这样数据不会离开你的机器
• webtomarkdown.com - 因为我经常需要将文件或网站的部分内容转换为 Markdown，以便作为上下文传入给 LLM。我正在构建这个工具来解决这个问题
• 为我参与志愿工作的滑翔俱乐部网站 Evergreen Soaring 进行翻新（官方网站尚未部署）
• 一个 Chrome 浏览器扩展，用于自动化我们滑翔俱乐部收到的公开消息的部分流程
• fitinterval.com - 健身间隔计时器

总体来说，LLM 对我的副业项目生产力有巨大的推动作用，更具体来说，Cursor IDE 是一个很好的编辑器，能够充分利用这些 LLM 进行编码。

在这篇博文中，我将介绍我对于从零开始项目的高层工作流程，希望对你有所帮助。我想要承认的是，这些工具在某些情况下很有用，但在其他领域可能会浪费你的时间，你需要用它们来找出它对你具体有用的地方。

工作流程示例

我有一个不错的习惯追踪器，我想把它复制成一个网站，但所有数据存储在本地。让我用这个作为例子来说明我会如何创建它。

使用 ChatGPT o1 来优化需求

我用 ChatGPT o1 来首先优化应用程序的规范。这样做的原因是它能帮助我限定问题的范围，同时我在最后得到的规范，我会在后续的代码引导阶段使用它。你可以尝试自己编写规范，但我发现从几句话通过 ChatGPT o1 转变为更详细的规范对我节省时间非常有用。我还会要求它进一步用问题来探查我，以进一步细化它。

我从下面的提示开始。

它问我一堆问题，我回答了，但然后它继续问我更多问题。在某个时刻，当你觉得有足够的细节时，你应该明确地要求它创建一个规范，其中的细节将允许另一个人/AI 构建应用程序。我还会指定我想要使用的技术，因为那是我最熟悉的。

你可以在这里阅读整个对话：Habit Tracking Website Plan

现在将该规范存储在你的项目所在文件夹中的 SPEC.md 中。我们将在需要时继续参考它。

使用 Vite 启动项目

我使用 Vite 来启动我的项目。这允许我以一致的方式设置所有必要的工具。在项目的目录中，我运行 npm create vite@latest .，这将询问我关于使用哪个 UX 框架和语言的问题。一旦我有了项目和该项目中的 SPEC.md，我就使用 Cursor Agent 创建初始代码。

你可以进入 Composer > Select Agent > 在上下文中添加 SPEC.md，并要求它实现它。

这将遍历你的代码，设置 tailwind，更新几个文件以创建初始版本。

这是初始版本的样子。不完全是我想要的（拟态设计），但在结构上足够接近，我可以对其进行迭代。

它中也有一些 bug，其中点击按钮不会改变状态。但总体来说，这让我们处于一个很好的起点，它创建了我期望的整体 UX 布局，将数据存储在本地存储中，有正确的 Markdown 导出功能。所有这一切仅在几分钟内完成，而不是几小时。

P.S：有时我也使用 v0.dev 来启动项目的 UX 方面。该工具允许在 UX 方面更快地迭代。

分治法来迭代

你不想一次性完成所有事情，即在一次请求中要求它完成多个复杂的任务。这有时可能有效，但可能导致问题，并使迭代变得更困难（而且速度更慢，因为它会重新生成大量它不需要改变的代码）。遵循分治法，即将你的功能分成更小的任务，并使用 Chat/Composer 迭代。

现在首先让我们修复 bug 并改变 UX。在我与 o1 的规范对话中，我要求它为更专注于拟态方面的 UX 创建一个规范。然后我使用 Cursor Composer 来更新代码。我在这种情况下选择 o1 模型。

现在看起来是这样。所以它修复了 bug，并更新了 UX，具有更多 Led 类似的行为，深度和阴影。它看起来仍然很糟糕，但我们会进一步迭代它。

在下一次迭代中，我给了上面的截图（是的，cursor 也可以使用图像作为上下文）在聊天模式中，首先要求它描述按钮的细节，然后要求它进行必要的改变以复制它。经过几次迭代后。

经过几次来回后，我有了看起来足够好的演示体验。

部署设置

最后，我需要使用 GitHub actions 设置部署，所以每当我签入主分支时，它就会构建并部署到 GitHub 页面。我在另一个存储库中已有一个工作流，我想用它作为上下文并进行具体的改变来构建这个项目。Cursor 的好处在于你也可以通过添加链接来提供上下文，所以无论是现有代码、某些文档，都可以作为 LLM 的上下文传入。根据我的经验，提供相关上下文通常允许它输出更好的代码并避免幻觉。

总结与最佳实践

• 使用 LLM 来理清项目的细节并存储以供进一步上下文使用
• 使用工具或开源模板来启动你的项目以设置所有必要的工具，并遵循可管理的项目模式
• 利用 Cursor Composer（agent 模式）来启动项目
• 混合使用 o1 和 claude-3.5-sonnet。通常我在需要宽泛笔划时使用 o1，例如功能的首次草稿，然后使用 Claude-3.5-Sonnet 进一步迭代它。但我大约 80% 的时间使用 Claude-3.5-sonnet
• 选择正确的模式，例如 Chat、Composer（普通）、Composer（agent）。当我需要来回交流并确切知道变化发生的位置并想在应用之前查看变化时，我使用 Chat。当我需要多文件改变，例如新功能时，我使用 Composer（普通）。我还没有足够频繁地使用 Composer（agent）。Composer（agent）可以在终端中运行命令、lint 代码、重新迭代等，但回到小迭代的原则，我尝试将事情的范围限制在我可以轻松审查并添加的内容
• 尽可能提供相关上下文，例如你想改变的特定文件、特定文档（链接）、或在你想让它搜索相关上下文时使用 chat 中的代码库选项提交
• 存储与你的项目相关的 markdown 文件，以便你可以将这些添加为上下文，例如 SPEC.md、来自你经常返回的网站的文档（插入 https://webtomarkdown.com 以将网站文档转换为 Markdown 并存储 😄）
• 在你的项目目录中创建和使用 .cursorrules 文件，用于你想要它在提示中采用的指令，例如如果你看到它总是使用某些你不想要的库，那么将其添加到 .cursorrules，你想要它在代码中使用的特定技术，例如 Tailwind、某些组件库，例如 Shadcn 等。这允许你在大多数提示中将其推向你想要的方向
• 始终确保你在高层次上理解代码，这样你就不会陷入这样一个空间，其中最终它的代码是如此混乱，当 LLM 无法为你找到问题时，它变得很难调试。我的建议是继续将东西分割成可管理的片段（提示：你可以不时地使用 LLM 来完成它）

希望这对你有帮助，你可以开始完成你的项目的第一个版本并部署它们。通过将未完成的项目转变为已完成和已部署的项目，即使在你休息一小段时间时，你也可以继续建立动力。这种方法允许你逐渐向你的项目添加更多功能，同时保持它们的可管理性。我相信这也有助于保持我的动力，因为我能够更快地看到我想要交付的东西的进展。