零代码用AI搭建SaaS网站：Bolt+Cursor全流程实战拆解

引言：AI编程让建站门槛降到零

很多人想尝试AI编程，但看到代码就头大。最近有开发者做了一个有趣的实验——完全不写一行代码，仅靠 Bolt 和 Cursor 两个AI工具，从零搭建了一个提供AI服务的完整SaaS网站。

关于这两个工具的背景：Bolt是由StackBlitz推出的AI全栈开发工具，其核心优势在于将WebContainers技术与大语言模型结合，能够在浏览器内直接运行Node.js环境，实现从提示词到可运行Web应用的端到端生成。Cursor则是基于VS Code深度改造的AI代码编辑器，内置了Claude、GPT-4等多种大模型，支持Composer（多文件编辑）和Agent（自主执行任务）两种核心模式。两者的分工通常是：Bolt负责快速原型生成，Cursor负责精细化迭代与调试。

这个网站集成了AI绘画、多模态聊天机器人、网页截图复刻三大功能，全程依赖提示词驱动开发。这个案例不仅展示了AI编程的当前能力边界，更提供了一套可复用的零代码建站方法论。

项目架构：三大AI服务的技术选型

服务功能设计

这个网站提供三个核心服务：

• AI绘画：接入硅基流动（SiliconFlow）平台的 Flux 免费模型，用户可以直接在网站上生成AI图片。Flux由Black Forest Labs开发，是当前主流的扩散模型之一，在图像生成质量和推理速度上均有显著提升，硅基流动平台将其封装为标准化API供开发者调用。
• 多模态视觉聊天机器人：基于智谱最新发布的 GLM-4V Flash 多模态大模型，支持图片理解和对话。多模态大模型是指能够同时处理文本、图像等多种数据类型的AI模型，GLM-4V基于智谱的GLM架构扩展了视觉编码器，Flash版本则是针对推理速度和成本优化的轻量化变体，适合高频API调用场景。
• 网页截图复刻：仿照 CopyCode 的功能，上传网页截图后由AI分析并生成对应的前端提示词，再用 Bolt/Cursor 复刻网页

技术栈选择

前端框架选用 Next.js，后端服务使用 Supabase。理解这里的技术选型逻辑，需要先了解两个行业概念：

SaaS与BaaS的区别：SaaS（Software as a Service，软件即服务）是通过订阅制向用户提供云端软件的商业模式；BaaS（Backend as a Service，后端即服务）则是SaaS的基础设施层。Supabase作为Firebase的开源替代品，基于PostgreSQL构建，将数据库、身份认证、文件存储等后端能力封装为API，开发者只需调用即可，近年来在独立开发者社区中迅速普及。Supabase 的优势在于它把登录注册、数据库 CRUD 等后端基础能力封装好了，开发者只需要配置连接信息和建表语句，大幅降低了后端开发的复杂度。

这种架构选择本身就体现了"零代码"思维——尽可能使用成熟的 BaaS 服务，把精力集中在前端交互和AI能力集成上。

核心方法：三合一提示词驱动开发

提示词工程的基础逻辑

在深入了解具体实现之前，有必要理解**提示词工程（Prompt Engineering）**这一核心概念。提示词工程是指通过设计、优化输入给大语言模型的自然语言指令，来引导模型输出符合预期结果的技术方法。其核心技巧包括：角色设定（让模型扮演特定专家）、少样本示例（提供输入输出对作为参考）、上下文注入（将API文档等关键信息嵌入提示词）等。理解这些基础逻辑，是高效使用AI编程工具的前提。

提示词的三段式结构

整个网站的基础框架通过一段精心设计的提示词生成，这段提示词包含三个部分：

1. 基础页面结构：描述整个SaaS网站的框架，包括导航栏、功能介绍区、定价层等UI元素，同时提供参考网站的地址让AI对照
2. 登录注册系统：集成 Supabase 的认证服务，包括邮件验证等功能
3. 服务仪表盘：登录后的AI服务使用界面，包含AI绘画等功能模块

作者最初是在 Cursor 中分三步完成这三部分，后来将提示词合并为"三合一"版本，直接输入 Bolt 后一步就生成了完整的网站框架。文中的"三合一提示词"本质上是将多个独立任务合并为单一复合指令，减少了模型的上下文切换损耗，同时保持了任务间的逻辑连贯性。这说明提示词的整合与优化本身就是一项关键技能。

用AI迭代提示词：多模型协作工作流

你可能没注意到，这套提示词并非一次性写成。作者采用了一个巧妙的方法：一边让AI按照初始提示词生成页面，一边将生成结果的截图和目标参考网站的截图一起发给第三方AI（如 Google Gemini 2.0 Flash 实验模型），让它对比分析并优化开发提示词。

这种"用AI优化AI提示词"的迭代方式，是当前AI应用开发中**模型编排（Model Orchestration）**趋势的具体体现。不同模型在不同任务上各有优势：Gemini 2.0 Flash在多模态理解和长上下文处理上表现突出，适合做视觉对比分析；而Cursor内置的Claude模型在代码生成上更为精准。将多个专业模型串联成工作流，让每个模型只做最擅长的事，是当前AI Agent架构设计的核心思路之一，LangChain、Dify等框架正是为这类多模型编排场景而生。这种多模型协作的工作流，大幅提升了最终输出质量。

功能实现：逐模块集成AI能力

多模态聊天机器人的接入

在基础框架搭建完成后，作者通过追加提示词的方式，在仪表盘中新增 GLM-4V 聊天机器人模块。关键步骤是将智谱的 API 文档作为上下文提供给 Cursor，让它理解接口规范后自动生成调用代码。这种"上下文注入"的方式是提示词工程中的核心技巧之一——将结构化的技术文档嵌入提示词，能够显著提升模型生成代码的准确性。

初始版本实现了图片链接分析功能，图片上传等高级功能则留待后续迭代。这种"先搭骨架、再填血肉"的渐进式开发策略，非常适合AI编程场景。

网页截图复刻工具的实现

这个功能的实现需要三个API文档的配合。用户上传网页截图后，后端调用多模态模型分析图片内容，生成描述该网页的提示词。这些提示词可以直接用于 Bolt 或 Cursor 来复刻网页。

后端的AI提示词设计是这个功能的核心，作者建议可以搭配 Agent 平台以工作流形式进一步优化输出效果。

界面优化：星空主题的视觉迭代

作者选择了星空主题进行界面美化，通过提示词让AI生成黑洞效果、空间撕裂感的页面跳转动画等视觉元素。有趣的是，同一段提示词在不同轮次的输出中会产生不同的视觉效果，这是大模型概率性输出的本质特性——大语言模型在生成每个token时都会从概率分布中采样，temperature（温度）参数控制着这种随机性的强弱，temperature越高输出越多样，越低则越确定。

如果想要控制输出的一致性，需要在提示词层面做更精确的约束，或在API调用时降低temperature参数值。这也印证了一个观点：AI编程的上限取决于你对提示词工程的理解深度。

实战经验：AI编程的效率技巧

善用"偷懒"提示词提升效率

作者分享了两个高效提示词策略：

• 需求扩展型：只描述简短需求，让AI自行延展为详细方案。适用于你对实现细节不太确定的场景
• 自主决策型：加入"让AI自己设计策略"的指令，配合 Cursor Agent 的智能体迭代能力，让AI在更大的自由度下工作

这两种策略的核心逻辑是：大模型训练了海量数据，在很多领域的"直觉"可能比非专业开发者的描述更准确。当然，大型项目中需要精准控制时，则应该采用更约束性的提示词。

版本控制是生命线

Git是目前最主流的分布式版本控制系统，由Linux之父Linus Torvalds于2005年创建。在传统开发中，Git主要用于团队协作和代码历史追踪。但在AI编程场景下，它的价值发生了根本性转变——由于大模型输出具有概率性（即相同提示词在不同轮次可能产生不同代码），每次AI生成的代码都可能引入新的不确定性。Git的分支和回退机制使开发者能够在AI"走偏"时快速恢复到稳定状态，本质上是为AI的不确定性输出提供了一个安全网。

作者强调了一个实用技巧：当纵向迭代（持续追问）解决不了bug时，横向回退到之前的版本重新生成。同样的提示词在新的对话轮次中可能不会产生相同的bug，这比在错误的代码基础上反复修补更高效。这也是为什么作者将版本控制称为"生命线"。

Cursor 使用的关键注意事项

• 新建 Composer 窗口会丢失上下文，可能导致AI创建平行目录结构
• 需要明确引用（@）你想修改的文件，配合 Agent 模式使用
• 配置好 .cursorrules 文件，写入项目的开发规则和框架约定

总结：零代码不等于零知识

这个案例展示了AI编程的真实水平：对于中小型Web项目，具备清晰需求描述能力的人完全可以在不写代码的情况下完成从0到1的搭建。核心能力已经从"会写代码"转变为"会写提示词"和"会设计架构"。

当然，这并不意味着编程知识毫无用处——理解框架原理、API调用逻辑、版本控制等基础概念，以及提示词工程、模型编排、BaaS平台选型等新兴知识体系，仍然是高效使用AI编程工具的前提。零代码不等于零知识，它只是把知识的表达方式从代码语法转换成了自然语言描述，同时要求开发者建立起一套与AI协作的新思维模型。

核心要点

• 通过Bolt和Cursor两个AI工具，完全不写代码即可搭建集成AI绘画、多模态聊天、网页复刻三大功能的SaaS网站
• 提示词采用三合一结构（页面框架+登录注册+服务仪表盘），配合参考网站地址可一步生成完整网站基础框架
• 利用第三方AI（如Gemini）对比生成结果与目标网站截图来迭代优化开发提示词，形成多模型协作工作流
• AI编程中版本控制至关重要，纵向迭代解决不了的bug可以回退版本横向重新生成
• 核心能力从'会写代码'转变为'会写提示词+会设计架构'，零代码不等于零知识