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

这是一款能碘伏前端编程方式的工具——Bolt.new，工程师必备！
核心内容：
1. AI代码生成等特色功能
2. 适用的快速开发等场景
3. 以ChatGPT为例的实际应用

简介

如果你是一名技术工程师，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性价比就不太高了。

• 新技术栈开发
  ：后端做个页面、Ja vaer写个Python脚本、设计实现个移动端——大家的能力边界大大扩展了。当然，也需要考虑如何守住自己的工作范围。

实例

场景

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

建立一个仿Chat GPT的界面。

步骤

官网宣传的步骤：Prompt（提示），Run（运行），Edit（编辑），Deploy（部署）。前置条件：已注册并登录Bolt.new网站。

分析需求

作为技术从业人员，一定清楚“三思而后行”的好处——毕竟大家都被甲方“教育”过很多次。在官网给出的步骤前，一定要考虑清楚需求实现的想法，只有这样，才能避免来回返工。包括但不限于：前端页面布局的想法、设计风格、色调、技术栈等。

编写提示词

接下来，编写提示词。这一步要尽量按照提示词工程进行，方便AI理解的质量。以下使用的提示词比较简单，抛砖引玉。

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

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

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

运行

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

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

• 一步步的执行过程：

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

• 当前预览效果：

编辑

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

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

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

部署/使用

最后，可以使用Bolt.new提供的云服务直接deploy，这对初创者或者非技术人员非常友好。当然，对技术人员来说，大部分都有现成的框架或平台，可以直接复制或下载代码（右上角按钮），导入到已有工程中进行下一步的工作。

总结

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