Bolt.new 是一个新兴的AI驱动开发平台，允许用户通过自然语言描述直接生成完整的网站，无需编写代码。作为一种”vibe coding”工具，它能够理解并实现用户的创意意图，包括网站结构、功能、风格和氛围。本文将详细介绍如何使用Bolt.new快速创建专业网站。
Bolt.new及其核心特点
Bolt.new 是一个”vibe coding”平台，通过自然语言描述即可生成网站，而无需编写代码。它的核心功能是将用户用自然语言描述的网站想法转化为真实可用的网站。
它就像v0和Cursor的结合，让用户能够高效、有效地编辑全栈程序。Bolt在浏览器中直接运行后端，支持部署到Netlify，此外，你可以用最新的编程语言/框架生成应用程序，如React、Next.js、Remix、SvelteKit和Vite。
Bolt.new的一个大优势是可以动态安装软件包。例如，如果你想安装像OpenAI API软件包或Tailwind之类的软件包，它也可以做到。所以基本上，它能够创建一个完整的应用，而v0则不能做到这一点。
其他显著特点包括：
- 无需配置开发环境，网页打开即用
- 支持多轮对话持续优化代码
- 能够上传手绘草图转换为网站
- 实时代码生成与预览
- 提供一键部署功能
开始使用Bolt.new创建网站
使用Bolt.new的过程非常直观：
- 访问官网：打开浏览器，输入https://bolt.new，并注册账户(支持免费账户)
- 描述你想要的内容：在首页中央的输入框中，像聊天一样输入你的网站需求
- AI开始生成网站：几秒至几分钟内，Bolt.new自动生成一个可运行的网站草稿，包括网页结构和对应的HTML/CSS/JavaScript
- 探索与优化：你可以修改prompt重新生成，使用界面工具进一步微调，或者直接修改代码
对于代码生成，不需要安装任何软件，打开网址即可使用，也不存在中国地区被限制的问题。在代码生成过程中，你可以通过和Bolt的多轮对话来优化你的网站。分别点击code和preview按钮，可以查看对应的代码和预览效果。
当完成网站设计后，你可以直接通过右上角的download下载生成好的代码，也可以直接点击deploy一键部署。
编写高效的Bolt.new提示词
创建有效的提示词是使用Bolt.new的关键。以下是一些重要原则：
- 描述越具体越好：AI虽强，但不是你肚子里的蛔虫。你越具体，它越能还原你想要的结构、配色、功能和风格。
- 注重”氛围与风格”表达：Bolt属于「vibe coding」工具，它理解的不只是”做什么”，更是”怎么呈现”。
- 不断迭代优化Prompt：初始prompt往往只是粗稿，真正好用的prompt需要多轮试验、细化和打磨。
- 从大处入手，逐步细化：一开始就要求太多可能会让AI”理解混乱”。先给出框架，再添加细节更有效。
- 结合代码编辑：有时AI的生成结果还不够精准，手动调代码能实现更高精度控制。
提示词模板公式
高质量提示词可以遵循这个基本结构： “为[目标受众]创建一个[网站类型]，页面包含[具体结构]，配色为[颜色]，风格[氛围词]，整体感觉[描述性形容词]。请确保支持移动端适配。”
例如：
技术栈：用纯粹的HTML + TailwindCSS来做
核心功能：我要做一个马拉松训练计划的网站，用户填入自己的年龄、身高、体重，最近一次马拉松和最近一次半程马拉松比赛成绩，自己预期目标提高的成绩（PB），点击按钮，就可以就生成训练计划了。计划生成的算法我不管，你帮我完成，但是要计划生成出来让用户感觉专业、有理有据、愿意付费。生成出来的计划至少要包括目前运动员的水平、计划达到目标成绩需要的时间以及各时间段的训练计划还有理由等等。
功能区域：你要有完整的header，testinoials, faq, features, pricing, how it works ,footer 区域。网站的版权所有人是AI掘金社，联系方式jiangzziv@gmail.com，其他内容需要编写得专业、真实。
网站文案：所有网站上的文案内容，我要求你使用中文。关于这个马拉松训练计划的网站你要强调专业，是经过大数据推算出来的。
网站风格：网站配色和风格需要现代化、高级，类似于苹果官网的风格。网站需要自适应各种屏幕尺寸。
实用案例与示例
以下是一些不同类型网站的提示词示例：
- 个人作品集网站：为一位自由平面设计师创建一个极简风格的个人作品集网站。页面包含顶部导航栏、个人简介、大图展示作品区域，以及联系表单。配色为黑白灰，使用大字号无衬线字体，布局简洁、留白充足，整体风格现代、艺术感强。适配移动端。
- 产品着陆页：设计一个环保水瓶品牌的产品落地页，整体风格自然清新。顶部有logo和简约导航，中部展示产品高清图，搭配绿色与浅棕色配色。加入产品特点区块、用户评价滑块和”立即预购”按钮。页面底部包含社交媒体链接和订阅表单。适合移动端浏览。
- SaaS企业主页：创建一个B2B SaaS产品首页，页面包含产品介绍、功能对比图、客户评价、定价表和CTA按钮。配色使用深蓝+灰白，强调科技感与专业性。标题字体粗体、正文清晰，布局基于响应式网格，适用于桌面与移动设备。风格现代、可信、专业。
- 教育平台页面：为一个在线编程课程平台设计首页。包含顶部搜索导航、课程分类卡片、热销课程横幅、讲师简介和”立即注册”按钮。颜色以浅蓝+橘色为主，整体风格现代、有活力。使用圆角按钮、大字号标题和清晰的卡片式布局，兼容手机和平板浏览。
高级技巧与最佳实践
迭代与优化
Bolt.new的一个特别强大的功能是：在你与右边的应用程序交互过程中如果出现错误，左边就会弹出一个类似的响应；这个时候你只需点击左边的修复错误，它就会去修复。这个功能是原来其他几个自动化AI工具所没有的。
另一个有帮助的功能是：在多轮迭代中，当提出新需求后，Bolt会修改原有的项目代码，并且能看到正在跳动的代码对应的改动文件，这有助于了解需求在整个项目中的影响位置。
实用功能组合
对于开发流程，可以采用这样的组合策略：开发初期，使用Bolt设计生成初始设计和前端代码。然后导入Cursor，继续利用Cursor进行精细化修改和接入后端。这样结合两个工具的优势，能够获得更好的开发体验。
价格与资源考量
如果你需要更多的AI tokens或想要私有项目，可以在Bolt.new的设置中购买订阅。最便宜的是1个月20美元，10M的token，对一般用户应该是够用的。值得注意的是，随着平台走红，免费额度可能会变得有限。目前使用多次基本上都是免费的，但未来情况可能会变化，类似于V0的发展轨迹。
通过Bolt.new，即使没有编程背景的用户也能快速创建专业、功能完善的网站。它结合了AI的自然语言理解能力和代码生成技术，为网站开发提供了一种全新的方式。无论你是创业者、内容创作者还是想要快速原型开发的专业人士，Bolt.new都能帮助你高效实现网站创意。
值得一提的是，Bolt.new不仅是一个代码生成工具，它更是一种”vibe coding”平台，能够理解并实现你想要表达的网站风格和氛围。通过合理构建提示词，你可以创建出既美观又实用的网站。
Wenn Sie GPT Plus, Claude Pro, Grok Super offizielles bezahltes exklusives Konto benutzen wollen, können Sie unser professionelles Team (wx: abch891) kontaktieren, wenn Sie nicht wissen, wie Sie Ihr Konto aufladen können.
