Bolt.new：结对编程的AI伙伴（前端篇）

简介

大家好，今天我要给大家带来一款可能会颠覆你编程方式的工具——Bolt.new。如果你是一名技术工程师，Bolt.new绝对是你不可错过的神器。

想象一下，你可以在浏览器里通过简单的自然语言就能完成复杂的前端开发工作，生活是不是一下子就更加美好了起来。

Bolt.new 每天有一定数量的免费Token，目前够我日常使用了。

特色

• AI代码生成：你只需描述你的需求，Bolt.new就能帮你生成代码，就像是有个隐形的编程大佬在你背后默默支持。
• 全栈开发环境：直接在浏览器里就能完成开发，省去了一大堆环境配置的麻烦，就像是在用一个超级终端。
• 一键部署：写完代码，一键就能部署到云端，对于非技术人员或者初创团队，这种一站式服务，还是很爽的。
• 错误修复：代码出了毛病？也不用害怕，Bolt.new支持直接在线编辑，也可以帮你自动检查并修复，让你更专注于创造。
• 实时预览：随时查看你的代码效果，随时反馈修改，指哪改哪，让前端开发更加直观。
• 执行命令：除了生成代码，开发过程中还需要运行很多命令，安装依赖、构建等等，这些Bolt.new也能一样帮你自动生成并执行。

适用场景

• 快速原型开发：对于那些需要快速验证想法的创业者来说，Bolt.new能大大缩短从0到1的时间，原型版本、MVP版本、产品效果图，Bolt.new都能帮你快速完成。
• 个人项目开发：个人开发者可以利用Bolt.new快速搭建并开发项目，节省时间，专注于创意实现。这一点其实并不是大型项目Bolt.new支持不了，而是大型项目出于安全考虑或者架构太过复杂，使用Bolt.new性价比就不太高了。
• 新技术栈开发：后端做个页面、Javaer写个python脚本、设计实现个移动端，大家的能力边界大大扩展了。当然，也需要考虑如何守住自己的工作范围。

实例

场景

ChatGPT大家都知道是一个什么样的界面，那今天的实例，就它吧。

建立一个仿Chat GPT的界面。

步骤

官网宣传的步骤：Prompt（提示）, Run（运行）, Edit（编辑）, Deploy（部署）。

前置条件：已注册并登录Bolt.new网站。

分析需求

作为一个技术从业人员，我们一定清楚“三思而后行”的好处，毕竟大家一定都被甲方“教育”过很多次。

在官网给出的步骤前，我们一定要考虑清楚需求实现的想法，只有这样，才能避免来回返工。

包括但不限于：前端页面布局的想法、设计风格、色调、技术栈等。

编写提示词

接下来，我们编写提示词，这一步要尽量按照提示词工程进行，方便AI理解的质量。

以下是我使用的提示词，比较简单，抛砖引玉。

## UI设计       
- 打造一个简洁高效的Web用户界面，风格硬朗、干练。

## 功能实现
- 该网页主要实现和ChatGPT类似的功能
- 主体分为：
  - 左侧：设置区域
  - 右侧：
    - 右上：主要功能区域
    - 右下：输入框和发送按钮，输入框上方需要有一些快捷按钮，方便预设一些快捷指令

## 技术要求
- 使用若依框架前端技术选型：Vue2+javascript+webpack。  

运行

将提示词输入到Bolt.new中，运行。

Bolt.new会一步步进行实现，对于前端开发来说，最好的是，我们可以每步预览界面的变化，这让我们能够直观地描述调整和优化。

• 一步步的执行过程：

很类似我们自己实现功能的过程。

• 当前预览效果：

编辑

发现对话消息部分未实现，我们可以直接在Code页签里面在线编辑，也可以再次通过对话，要求Bolt.new修改。

我直接对话发送：

请在右侧主功能区显示对话样式，方便我后续实现对话功能。

效果就出来了，还不错哦。

部署/使用

最后，我们可以使用Bolt.new提供的云服务直接deploy，这个对于初创者或者非技术人员非常友好。

当然，对于技术人员来说，我们大部分都有现成的框架或者平台，可以直接复制或者下载代码（右上角按钮）导入到我们已有的工程中进行下一步的工作。

总结

我个人在使用Bolt.new的过程中，真的感受到了它带来的便利。不像目前很多的代码生成插件，有一些智能，也确实给开发带来了便利，但是由于与开发过程集成的程度不够彻底，导致有时候用起来需要频繁切换、人工参与。Cursor、Bolt.new这一类的智能IDE，它更像是结对编程中的一个伙伴，一个能够理解你的工程、理解你的意图的、无怨无悔帮你承担各类任务的伙伴。