在几个月之前用过一次 v0.dev，当时对它并没有特别深的感受，觉得相比 ChatGPT 和 Claude，并没有太多的优势。最近一次偶然的机会又用了一次，让我体会到了 v0.dev 的强大之处。
v0.dev 是Vercel 来开发和维护的，Vercel 大家一定不陌生，可以免费进行前端站点的部署的基础设施，其提供了慷慨的免费用量，并且使用起来非常方便。Next.js 这个框架也是 Vercel 开发和维护的，所以在 v0.dev 上面，开发前端主要使用的是 Next.js 框架 + Tailwind CSS + shadcn/ui，作为默认开发使用的框架。
相比 Cursor 这种开发 IDE 工具，v0.dev 是直接在网页上面就可以进行开发的，不需要下载其他任何工具。我个人感觉其强大之处主要在以下几个方面：
1. v0.dev 生成代码为完整的前端项目，并且可以实时预览。
这可能也是 v0.dev与 Claude 和 ChatGPT 最大的不同。在 ChatGPT 和 Claude 上面，每次代码基本上都是根据单个文件进行的，但是 v0.dev 生成的是一个完整的项目。如果根据提示语添加一个新的页面，也会在当前生成的这个项目中间进行添加。
我只需要一句话，就可以帮我创建一个完整的前端项目。比如这个示例
我的提示词是：以蓝色为主色调，创建一个科技类企业站点的官方网站，并填入示例数据。
于是便有了下面这个项目，自动创建页面目录以及对应的页面结果。
其显示效果也是相当专业。与 Cursor 这些 AI 开发 IDE 工具相比，v0.dev 更加专注于前端的开发，但是其也更加完善，可以不用安装任何插件和环境进行界面的预览，甚至通过链接地址在浏览器中查看。
整个界面预览如图，整体排版与配色，看起来是相当的专业，对齐等各方面也是非常不错的。至少对于我这个不会设计的人来说，我是做不出来这个水平的。
2. 在当前项目上面持续更新，并选择具体位置进行特定修改。
接下来，我继续添加一个提示词，让其添加一个公司详情界面，并从首页的“learn More”中可以点击进去查看。
提示词为：添加一个公司详情界面，并从首页顶部的 learn More 中可以点击进入查看。
于是，v0.dev 添加了单独的 page.tsx 页面，并且对相关组件进行了修改。
修改完成后，从首页的“learn More”中点击，可以进入到公司详情页。
除了添加页面，也可以直接针对某个具体地方进行微调。 选中之后，直接输入想改的样式。
v0.dev 同样支持手动对代码的修改，修改完成后，直接点击保存则会生效。
3. 一键连接 GitHub、一键部署 Vercel
由于 v0.dev 本身就是有 Vercel 开发的，所以针对 Vercel 部署有着非常好的集成度。 点击 Deploy 后，可以直接确认并部署到 Vercel 上面。
也可以连接 github 将代码添加到 github 仓库中，后面不用担心代码的保存问题。
除了这些功能，高级版的甚至支持了通过 figma 导入原型图进行代码开发的功能，让开发变得更加的轻松。
# v0.dev 这类开发工具带来的变革
v0.dev 为代表的AI 智能开发工具应该还有很多，并且功能越来越完善，所能做的事情也越来越多。虽然现在并不能完全取代程序员，但是却在事实上面对程序开发的必要性进行了弱化。
在一起，有了想法，要实现出来是需要程序开发等大量的工作，现在 AI 工具可以帮我们完成大部分的工作。从想法到实现，中间的流程也越来越简单。
笔者个人感觉，随着时间的推移，开发这类工作本身会变得越来越不那么重要，而产品和运营目前是 AI 所无法代替的，其地位也会越来越重要。只要有好的想法，强大的行动力，会更加容易地将自己的想法变为一个实际的产品，而推向市场的过程中，可能才是我们需要花大力气的地方。
