用Bolt.new（Bolt）自动化制作落地页的3个步骤【新手入门】
機械翻訳 / Machine-translated
A
AI Friends
1日前・5分で読める
機械翻訳 / Machine-translated
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
Bolt.new（Bolt）是由 StackBlitz 开发的、可在浏览器中完整运行的 AI 应用构建工具。即使没有编程基础，只需用中文输入指令，就能自动生成落地页（LP）。本文将为新手介绍用3个步骤完成落地页制作的方法。
传统的落地页制作流程繁琐：需要用设计工具完成视觉稿，再用 HTML 和 CSS 进行编码，最后上传到服务器。外包制作有时费用高达10万日元以上。而使用 Bolt.new，只需输入"帮我做一个以蓝色为主调的商品介绍页"，AI 就会自动生成设计和代码。借助在浏览器内运行的 WebContainers 技术，无需配置本地开发环境。2026年5月，Bolt.new 还宣布与 Microsoft Azure 集成，进一步满足企业使用需求。即便是免费套餐，每月也可使用100万 Token（约50个页面），非常适合个人用户和初创团队。
首先访问 bolt.new，点击"Sign in"。支持使用 Google 账户或 GitHub 账户登录。首次登录时显示的新手引导教程建议不要跳过，完整观看。点击右上角的齿轮图标进入设置页面，将语言切换为"日本語"，后续操作会更顺畅。使用免费套餐时，屏幕上方会显示剩余 Token 数量，请留意查看。每日上限为30万 Token。在这一阶段，提前简单记录下想要制作的落地页内容，可以让下一步进行得更顺利。
在屏幕中央的聊天输入框中，用文字输入你想要制作的落地页内容。例如："制作一个在线英语口语学校的落地页，配色为蓝橙渐变，包含 Hero 区域、价格表和联系表单。"指令越具体越好。发送后，AI 会自动选择 React 或 Vue.js 等框架并生成代码，右侧预览区域可实时查看效果。如有不满意的地方，可以继续输入"将按钮颜色改为绿色""加大字号"等追加指令。2026年的更新中，Bolt.new 还支持导入 Figma 设计文件，如果已有现成设计，直接将文件拖入即可应用。
预览页面确认无误后，点击右上角的"Deploy"按钮。通过与 Netlify 的集成，几秒钟内即可生成公开访问链接。自2026年起，新增了发布后可修改链接的功能。在浏览器中打开生成的链接，同时检查移动端显示效果。可使用 Chrome 开发者工具（F12键）查看响应式布局。建议实际测试联系表单是否能正常提交。如有问题，在聊天框中输入"提交表单时出现报错"，AI 将通过自主调试功能（错误循环减少98%）自动修复。
Token 耗尽报错： 免费套餐每日上限为30万 Token。若指令复杂或反复大量修改，容易触及上限。可等到次日重置，或升级为 Pro 套餐（每月25美元）。预览页面全白： 可能是浏览器扩展程序（如广告拦截器）造成的，请尝试在无痕模式下打开。中日文字体未生效： 追加指令"从 Google Fonts 加载 Noto Sans JP"即可解决。部署时报错： 项目名称中包含中文或特殊符号会导致失败，请修改为纯英文字母和数字。2026年1月的更新使构建速度提升了40%，但首次部署可能需要1～2分钟。
使用 Team Templates： 2026年新增功能，可将已创建的项目保存为模板，适合需要以相同设计制作多个落地页的场景。切换 Opus 4.6 模型： 可在设置页面选择 AI 模型。简单任务选 Haiku，复杂设计选 Opus 4.6，效率更高。AI 图像编辑： 在聊天框中输入"将 Hero 图片背景模糊处理"，无需借助外部工具即可完成图片编辑。自定义域名： 可在 Netlify 管理后台绑定已购买的域名，同时有助于 SEO 优化。接入数据分析： 输入"嵌入 GA4 标签"，即可自动添加 Google Analytics 跟踪代码。
使用 Bolt.new，可以大幅降低落地页制作的成本与时间。建议先用免费套餐体验，满意后再升级至 Pro 套餐正式使用。
本文转载自 AI Friends。
