用 Bolt.new 快速搭建一个多页 SaaS 落地页的实操避坑指南

Bolt.new 最强的地方在于它能直接在浏览器里把 Vite + React + Tailwind 这一套全给跑起来，但如果你直接丢一句“帮我写个 SaaS 落地页”，出来的结果大概率是那种一眼就能看出是 AI 生成的、空洞的模版页。

想要做出像真正的产品页面（带定价页、特性页、文档页且风格统一），得用“渐进式构建”法。

第一步：建立全局视觉基调
不要急着写页面，先给它定义一个 UI 规范。我习惯在第一个 Prompt 里就死磕风格，比如：

使用 Tailwind CSS 构建，配色方案采用深色模式：背景 #0f172a，主色调 #3b82f6。所有按钮必须带有微小的渐变效果和 hover 时的 scale-105 动画。字体统一使用 Inter，确保所有间距遵循 4 的倍数原则。

这样能避免后面每个页面风格打架，不用反复让它修改 CSS。

第二步：多页路由的坑
Bolt.new 有时候在处理多页面跳转时会乱搞，直接在 App.tsx 里写一堆条件渲染。为了方便后续维护，强制要求它安装 react-router-dom 并建立标准的目录结构：

npm i react-router-dom

然后明确指令：“请创建 /src/pages 文件夹，将首页、定价页、关于页分别独立成组件，并在 App.tsx 中使用 BrowserRouter 配置路由。”

第三步：处理内容空洞
AI 最爱写 "Feature 1: Powerful tool" 这种废话。我现在的技巧是把我的产品文档（哪怕是草稿）直接喂给它，并要求它：“禁止使用泛泛而谈的形容词，请基于我提供的功能点，将每个 Feature 模块拆分为：一个吸引人的标题 + 一段 20 字以内的具体痛点描述 + 一个对应的 Lucide-react 图标。”

实操踩坑总结：
内存溢出/卡死：当页面复杂度增加，Bolt 的预览窗口偶尔会白屏。解决办法是直接在右侧 Terminal 运行 npm run build 看看是否有报错，如果有，把报错信息直接丢回对话框，它修复 Bug 的速度比你手动找快得多。
图片素材：它默认生成的 Unsplash 图片经常货不对板。建议直接在 Prompt 里指定 https://images.unsplash.com/... 的具体关键词，或者干脆让它用简单的 div 占位符，等本地部署后再手动替换。
组件冗余：如果一个页面太长，它可能会在单个文件中写 500 行代码，导致后续修改时 AI 容易丢失上下文。建议每当一个 Section 完成后，立刻命令它：“将当前的 Hero Section 抽离到 /src/components/Hero.tsx 中。”

这样拆分后的代码结构，即便以后把项目导出到本地用 Cursor 接手，也能无缝衔接。