Bolt.diy 测评：从零部署到创意实践的全流程体验

最新推荐文章于 2025-05-18 16:00:00 发布

dyqd2011

最新推荐文章于 2025-05-18 16:00:00 发布

阅读量1.2k

点赞数 9

文章标签：阿里云

本文链接：https://blog.csdn.net/dyqd2011/article/details/147460194

版权

领取免费额度，一键部署Bolt.diy：超强辅助,Bolt.diy 一步搞定创意建站-阿里云技术解决方案

这应该是2025年以来的第二篇解决方案测评了，从第一篇到现在已经足足过去三个月了，虽然是一种诞生时间还不算长的测评方式，但对于广大用户来说，尤其是新手用户来讲，这种测评方式还是非常不错的，首先技术方案本身就是一个不错的学习案例，其次基于方案准备的部署文案也是非常适合新手用户的，此外，还可以通过解决方案学习到有关技术的实现，基此学习到更多技术组合实现。所以，还是非常建议官方能够推出更多一些解决方案的测评活动，让大众用户有机会参与进来。希望大家可以踊跃参加，把你最真实的体验感受和建议分享出来。以下是活动首页，可点击下方链接前往：

Code to All-Stack | 用Bolt.diy 一步搞定创意建站

以下是我今年上一期的评测文章，欢迎各位前来打卡点评。

《AI 剧本生成与动画创作》解决方案测评

本次方案测评还附带了一个联动活动，只需上传部署体验的应用截图就可以获得社区300积分奖励（可兑换实物哟），非常给力，建议大家都来体验一波。活动链接：超强辅助,Bolt.diy 一步搞定创意建站

方案速览

按照传统惯例，这里还是先呈上方案的整个页面截图，供不愿意点击链接查看的伙伴们查阅。从方案整体来看，还是一如既往的样式和排版，也就是非常成熟的五个大模块进行阐述。接下来将逐个分析。

由于方案一开始并没有介绍本次的主角Bolt.diy是啥，这里有必要给大家科普一下。在介绍Bolt.diy之前，有必要先介绍一下AI全栈开发工具Bolt.new，它是一款基于 AI 的 Web 开发工具，它允许用户在浏览器中直接运行完整的 Node.js 环境，并通过自然语言提示快速生成、运行、编辑和部署全栈 Web 应用程序，从而大幅简化开发流程。但是它存在一个非常大的局限性，就是只能使用官方默认的大语言模型（LLM），而且一键部署也是只能部署到netlify。也正是因此，我们隆重邀请今天的主角，它也是Bolt.new项目的一个开源分叉，现在已经发展成为Bolt.new的官方开源版本，给喜欢研究的用户提供了更多的灵活性和开放性，它就是Bolt.diy。

通俗点讲，Bolt.diy 是一个功能强大且可扩展的开源 AI 开发平台，除了可以让用户根据自己需求使用各种LLM，还可以根据自己需求进行功能扩展，从而实现更多定制功能。感兴趣的朋友可以前往开源项目的首页了解更多GitHub - stackblitz-labs/bolt.diy

有了对Bolt.diy的了解后，我们回到方案本身，一开始便阐述了方案的四大优势，分别是多模型灵活适配、可扩展性与高度定制化、全栈开发全流程覆盖和智能化辅助工具。这些优势我们将在接下来的部署体验中挨个接触。

紧接着就是方案的具体技术架构和响应的部署方式了，如下：

方案的是实现原理：基于云原生应用开发平台 CAP 构建 Web 服务，利用其函数计算资源与百炼的模型服务能力，快速完成 Bolt.diy 开源项目的部署。用户通过访问 Web 页面发起请求后，Bolt.diy 借助deepseek-v3模型实现实时代码生成，用户可即时查看生成的代码及运行预览效果，体验流畅高效的开发流程。

部署方式这次仅提供了自动部署一种方式，我觉得这个点就非常好，相比过往一并提供的手动部署方式，自动部署优势明显，且不易出错，对于大众用户来说学习成本几乎没有，而对于官方来说，即可以减少方案输出的成本，还可以提高用户体验度，非常划算。点击“立即部署”就来到了云起实验室，如下：

接下来阐述的是本次方案可以应用的场景，文案中只提到了广泛应用的三个典型场景，实际上远不止，可以毫不夸张的说，凡是有AI需求的地方，就会有对应的应用场景出现。

在上面的技术架构中，我们可以非常直观看到，实现需要用到三个阿里云的产品，分别是云原生应用开发平台 CAP、函数计算FC、以及大模型服务平台百炼。由于这三款产品中的云原生应用开发平台 CAP和大模型服务平台百炼，其本身是不收取费用的。所以方案这里的免费试用仅提供了函数计算FC的快速链接，如下：

在方案的最后阐述的是更多技术方案，感兴趣的可以点击前往学习了解。

部署体验

在正式部署体验前，相关的产品和服务需要先开通。新用户都可以在方案的免费试用处领取对应产品的试用额度。方案这里并没有提供百炼平台的开通链接，大家可以点击我这里提供的。大模型服务平台百炼控制台

为了方便更多新手小白用户快速开通，尽可能通过一篇文档就能实现开通并部署，这里还是提供一下各个产品服务开通的方法。由于云原生应用开发平台 CAP已经发布正式版，不再有试用申请开通的限制，因此可以直接点击产品官网链接，点击“立即体验”即可，如下：

准备工作

开通大模型服务平台百炼

由于本次解决方案实现涉及的服务有函数计算FC、阿里云百炼产品，如果你是新用户，是基本没有体验费用的，因为可以领取试用额度，尤其是函数计算FC；而对于百炼产品，开通服务即可免费获得试用额度，如下将展开阐述如何开通云百炼服务。

首先访问大模型服务平台百炼控制台。首次进入需要同意服务协议，点击同意。如下：

在首页/模型广场/应用广场，均可点击开通模型调用服务。新用户首次访问将获得每个模型100万Token的额度。额度用完后需开通服务后方可继续使用。有关免费额度的详细内容可以点击链接前往了解新人免费额度。

点击开通，如下：

使用阿里云百炼大模型服务，需要开通【百炼大模型推理】【百炼大模型部署】【百炼大模型训练】商品，并创建模型调用API-KEY。勾选协议，点击确认开通。如下：

开通服务后将会收到三条开通百炼大模型推理、百炼大模型部署、百炼大模型训练商品成功的短信通知。

至此，我们就完成了阿里云百炼大模型服务产品的开通，也就是开启了百炼产品的免费试用。接下来还需要开通函数计算FC，接下来就阐述如何开通函数计算服务。

开通函数计算FC

在服务开通前有必要先了解下函数计算的计费方式，产品共提供了三种方式，有试用额度、按量付费和资源包。计费项由函数调用次数、资源使用量和公网出流量组成。详细的可以点击链接前往了解详情。

如果你是第一次使用函数计算产品的，可以先领取一个免费的试用额度。如下：

但如果你是函数计算的老客户，要么按量付费，要么购买资源包，这里推荐经常使用的朋友购买资源包或者调整函数实例并发度来降低成本。

点击链接进入函数计算控制台，默认进入的是2.0版本的首页，点击首页右上角的体验函数计算3.0便可来到新版首页。

首次体验需要SLR授权，如下图，点击确定即可。

部署应用

完成了上面的准备工作后，我们可以直接来到部署方案的“部署应用”章节，点击“前往部署”超链接进行应用的快速部署。如下：

这里有一点需要注意，就是首次使用云原生应用开放平台 CAP 会自动跳转到访问控制快速授权页面，滚动到浏览器底部单击确认授权，等待授权结束后单击返回控制台。如下：

单击“部署项目”，在项目资源预览弹窗中，点击“确认部署”，如下：

如果资源预览界面出现了未开通的服务，直接勾选协议让应用自动开通服务，如下：

确认部署后，等待完成部署，如下：

部署耗时12秒就完成了，这时候生成了一个可以访问的URL，如下：

我们直接点击URL来到Bolt.diy的首页，会自动跳转为 HTTPS 链接地址，这个时候浏览器会提示安全证书警告或错误，我们点击高级选项，然后点击继续前往以访问该网站。如下：

首次访问需要耗时加载，大概15秒的样子，完成后如下：

这个时候应用还不能调用大模型来进行推理，我们需要配置百炼 API-KEY，这里没有KEY的可以先新建一个。

点击OpenAILike API Key右侧的编辑图标，将API-KEY填入，如下：

完成后，我们就可以选择百炼中的各种大模型了，如下：

当然Bolt.diy不仅支持百炼平台，还可以使用各种平台的大模型，比如GPT-4o、Gemini等，只需要配置对应平台的API-KEY就可以使用。

应用体验

现在我们就可以进行应用的体验了，应用友好地提供了两个示例的prompt，你可以直接使用。开始正式体验之前有必要了解下界面的主要区域构成，如下：

这里我想给我所在的企业涉及一个有特色的着陆页，prompt如下，来看看生成的效果会如何。

生成一个具有全息投影风格的响应式着陆页，要求：
1. 顶部采用动态粒子流模拟能源流动，粒子颜色随页面滚动从深蓝（传统能源）渐变为翠绿（新能源）
2. 左侧悬浮3D地球模型，实时显示企业全球项目分布（支持点击查看各电站发电量/减排量）
3. 核心区域设置"能源神经中枢"仪表盘，包含：
   - 实时波动的碳减排数字（接入公开API数据）
   - 动态对比柱状图（传统VS新能源成本/效率）
   - 可拖拽的能源结构比例饼图
4. 底部设计AR体验入口，用户扫描屏幕二维码可查看虚拟变电站的立体投影

提交prompt后，很快进入了编码模式，如下：

大概2分钟就编码完成了，出现“Response Generated”就说明编码完成，但这个时候大概率会出现无法预览，因为报了一个异常，如下：

这个时候我们只需继续提问bolt即可，点击“Ask Bolt”即可得到解决。现在我们点击Preview看看实际效果吧，如下：

可以看到这个生成效果还凑合，基本是实现了我prompt中提到的功能和效果的，但对于一个着陆页来说还是缺少文字内容的。这里我换一个prompt试下看看能否满足我的意图，prompt如下：

创建赛博朋克风格的氢能企业官网，需实现：
1. 背景采用液态金属流动特效，通过鼠标移动产生金属涟漪效果
2. 核心技术创新模块设计为可拆解的3D电解槽模型，鼠标悬停显示制氢效率、成本等参数对比
3. 嵌入实时更新的"绿氢挑战"进度条，显示全球绿氢渗透率与企业贡献值
4. 交互彩蛋：连续点击LOGO 5次触发隐藏的氢气分子裂解动画

这次的效果就更加一言难尽了，看来prompt还是得优化，我尝试用示例的格式来试一下看看最终的效果吧，如下：

创建一个中文能源科技企业的着陆页，包含产品特性介绍、定价方案、客户案例等板块，风格要现代科技感。

这个着陆页看着还可以，就是顶部有个3D的动图影响了整体的效果，如下：

以上效果还是不理想，为此我更换模型为deepseek-r1，添加上复杂prompt，来看看效果如何吧。

创建一个中文能源科技企业的着陆页，包含产品特性介绍、定价方案、客户案例等板块，要求：
1. 顶部采用动态粒子流模拟能源流动，粒子颜色随页面滚动从深蓝（传统能源）渐变为翠绿（新能源）
2. 左侧悬浮3D地球模型，实时显示企业全球项目分布（支持点击查看各电站发电量/减排量）
3. 核心区域设置"能源神经中枢"仪表盘，包含：
   - 实时波动的碳减排数字（接入公开API数据）
   - 动态对比柱状图（传统VS新能源成本/效率）
   - 可拖拽的能源结构比例饼图
4. 底部设计AR体验入口，用户扫描屏幕二维码可查看虚拟变电站的立体投影

可惜这次并没呈现任何效果，如下：

到这其实我并不甘心，于是我让deepseek-r1先给我生成一个实用的prompt，而后让Bolt.diy为我生成页面，如下：

生成一个中文的能源科技企业官网，包含首页、核心业务、技术优势、案例展示、新闻动态、联系我们六大模块。具体要求如下：

**1. 核心模块设计**
- 首页：顶部导航栏固定，LOGO右侧悬浮动态能源监测数据（如“累计减排XXX吨”）。首屏全屏视频展示风电场/光伏矩阵实景，叠加半透明蒙版与企业Slogan。
- 技术优势：采用“左图右文”布局，左侧嵌入可交互的能源管理系统Demo（如点击太阳能板展示发电量），右侧用信息图表对比传统方案与创新技术效率提升数据。
- 案例展示：网格化瀑布流布局，每个案例卡片包含项目地点、装机容量、减排效益三组核心数据，鼠标悬停触发360°实景漫游。

**2. 业务契合度强化**
- 图标系统：定制化设计“风电叶片”“储能电池”“智能电网”等行业图标，采用线性微动效（如电流流动效果）。
- 数据可视化：在“全球布局”页面集成矢量地图，通过热力图层显示已建/在建项目分布，点击弹出项目详情及实时监测数据。
- 信任背书：底部通栏展示合作伙伴Logo（如国家电网、特斯拉能源），并嵌入权威认证标识（如ISO 50001）的悬浮放大交互。

令人遗憾的是这次依旧没呈现任何效果。

到这体验部分就完成了，如果你想将生成的页面发布到网上，可以继续参考部署教程接下来的内容，发布流程相对复杂一些，适合有基础且有稳定资源环境的人选用。

应用体验就到这，可以简单总结一下，首先需要肯定的是基于Bolt.diy可以非常高效地实现一键建站，着实提升了企业的建站效率，但从实际生成效果来看，还是缺乏功能上的不足的，比如，对于复杂prompt的理解能力基本是不可用的，应用本身的稳定性还不够。

体验总结

在工作场景中，我会让Bolt.diy协助我提升工作效率，比如通过输入如“开发一个用户行为分析仪表盘，包含实时数据图表和权限管理模块”等自然语言指令，直接生成React前端+Node.js后端的代码框架。在需求评审阶段快速输出可视化Demo，减少与产品经理的沟通成本；而针对重复性任务（如日志分析、API测试），利用Bolt.diy编写类似“生成Python脚本，每日定时抓取服务器日志并发送异常摘要到Slack”的指令，利用其与百炼模型的集成自动生成脚本逻辑，并通过函数计算FC实现云端部署，缩短部署耗时。
在生活场景中，更多地会让Bolt.diy参与个性化的事务，比如构建家庭自动化控制面板，输入“创建响应式界面，显示温湿度传感器数据并控制智能插座”，生成物联网前端，并通过API连接Home Assistant后端。
在个人兴趣上，我会让Bolt.diy协助我完成一些私域的工作，比如接到一个商单，开发交互式编程教程，通过“生成一个可动态修改参数的排序算法可视化工具”自动输出教学Demo，嵌入在线课程平台供学员实操。

以下是实际体验过程中遇到的一些问题和有关建议：

首先，代码在继续输出过程中，这个滚动条是无法拖动到下面的，尤其是当代码很多的时候，你是无法在生成过程中看到实时代码内容的，只有当生成结束后才可以拉到下方查看。建议优化这里的逻辑，滚动条在生成过程中是随着代码的前进而往下的。