个人随想-代码生成工具v0+claude+cursor

cursor出来已经有一段时间了，不知道大家用了感觉怎么样。今天就以我个人为例，给大家介绍一下我是如何使用cursor搭建原型。

首先，我并不觉得cursor对于后端程序员带来了革命性改进，我们与很多团队沟，使用cursor80%以上的功能，任然跟copilot一样，代码补全+函数编写+单元测试+代码解释。基本上操作起来，与copilot和通义灵码很像。

有人说，通过cursor可以快速的开发网页，直接在cursor里面，就可以让cursor做出一个应用出来。

我个人还是保持怀疑的，毕竟作为软件开发来说，毕竟是一个团队工程，需要各个角色的配合，光一个cursor生成的应用直接发布上线，还是有困难的。特别是很多同事跟我说，"生成5分钟，修改2小时"，在现阶段通过cursor或者其他代码生成工具直接生成的项目，在可视化和与产品经理的需求上来说，差距还是比较大。

但是对于产品经理来说，或者确实是一些小的demo来说，cursor等工具，确实可以快速的可视化。接下来，我就来说说，对于这些小型demo，我是如何去做的。

我们这里以nextjs的快速demo为例，一般的原型demo开发，我一般会用到v0+claude+cursor。

首先，个人觉得目前v0作为一个前端ui components的生成，效果是非常不错的。您可以通过自然语言，快速的去生成页面，并通过多轮交互，为这个页面增加动画、特效、背景、样式、Icon等等。

通过v0，您可以生成一个您满意的页面。接下来，v0会给您整个页面的代码，记住，所有的内容，都在一个文件中。

接下来，就到了第二步。

有一点前端经验的人都知道，无论是react还是vue，现在都是组件开发，通过v0，它会将原型以单个文件全部返回给我们，接下来，我们将复制粘贴这个文件，发送给claude，一般我们会选用sonnet模型，让sonnet将v0的前端代码文件，组织到单独的组件中。也就是通过sonnet模型的能力，将单个文件，拆分成多个组件，为了后期复用。

我一般使用的sonnet的提示词"please organize this code into separate components.this is a typescript application,please use Nextjs 14 standards not the pages router but APP Router。Remember APp Router。Give me thecodebase / file structure and give me the components to copy and paste. ".

有人说，你的提示词为什么用英文。。。这里不做解释，就说一句，哪怕你不会英语，都把你的提示词，放到翻译软件里面，翻译成英文，再放到sonnet里面。

最后，开始使用cursor。

首先，使用cursor按照sonnet的项目目录，创建项目结构。

我一般用： create a file structure as follows,and just cureate the files with boilerplate.i will put the code in .（接下来在这里复制上sonnet的文件目录结构。）

很快，cursor就创建好了项目文件和结构，接下来，将sonnet中的代码，复制到cursor刚刚建立的空文件中。

接下来，就是使用cursor进行开发了。

有人说，为什么不直接使用cursor去从头搭建整个项目，而是要使用v0+claude+cursor的方式。个人使用下来，cursor目前的初始化代码生成能力，错误率还是很高，特别是对于ts的支持，很多类型错误，都是无法通过的。所以，算是各取所长把，v0负责快速生成，cursor负责代码补全，claude负责代码组织。

您可以试试我的这种方式，如果您觉得有帮助，请给我点赞。

记得关注我的视频号，我会在10月份开始，每天带大家开发AI应用。