用 Bolt 构建网络应用对应的书籍案例🧣

第一章：Bolt.new 和提示优先开发简介

• 内容总结 ：本章介绍了 Bolt 这个由 StackBlitz 推出的 AI 驱动的开发工具 ，以及提示优先开发 （Prompt-First Development）的核心理念。它解释了这种开发模式如何通过自然语言描述来降低开发门槛 、加速开发效率 、让开发者专注于"做什么"而非"如何做" ，并支持快速迭代 。此外，本章还为读者介绍了 React 的核心概念（组件、属性、状态），以帮助理解 Bolt 生成的代码。

• 示范案例 ：食谱网页应用。

• 提示词：

  • "Build me a recipe web app." （为我构建一个食谱网页应用。）
  • "Build me a recipe web app. Users should be able to search for recipes by ingredient or name, view a list of matching recipes with pictures, and click on a recipe to see details like ingredients and instructions. Include a feature for users to save their favorite recipes. The app should have a modern, clean look and feel, perhaps using a light color scheme and elegant fonts for readability." （为我构建一个食谱网页应用。用户应该能够通过食材或名称搜索食谱，查看带有图片的匹配食谱列表，并点击食谱查看详细信息，如食材和说明。包含用户保存喜爱食谱的功能。应用应具有现代、简洁的外观和感觉，也许使用浅色调和优雅的字体以提高可读性。）
  • "Make the recipe cards smaller and add a rating out of 5 stars for each recipe in the list." （将食谱卡片做得小一些，并在列表中的每个食谱中添加一个5星评分。）

第二章：Bolt 入门

• 内容总结 ：本章指导用户注册 Bolt 账户 ，熟悉 Bolt 工作区 （包括提示输入区、文件浏览器、代码编辑器、预览区和控制栏），并创建第一个项目 。它解释了 Bolt 如何理解提示、生成代码并运行应用。此外，还介绍了 Metaprompts（元提示词）的概念，用于在项目层面指导 AI 的行为和上下文。

• 示范案例 ：友好问候应用。

• 提示词：

  • "Create a simple web page that greets the user. It should have a text input where the user can type their name, and a heading that says "Hello, [Name]!" which updates as the name is typed. Make the design friendly and colorful." （创建一个简单的网页，向用户打招呼。它应该有一个文本输入框供用户输入姓名，以及一个标题显示"你好，[姓名]！"，并随着姓名输入而更新。使设计友好且色彩丰富。）
  • Metaprompt 示例 ： "Prefer TypeScript for all files and code snippets. When adding components or utilities, follow idiomatic TypeScript patterns with clear types and interfaces." （所有文件和代码片段都优先使用 TypeScript。在添加组件或工具时，遵循带有清晰类型和接口的惯用 TypeScript 模式。）

第三章：清晰、具体：提示工程与迭代开发

• 内容总结 ：本章深入探讨了提示词编写的艺术和科学 ，以及如何管理 AI 输出和实践提示优先开发。它讨论了 AI 的局限性（上下文窗口）和优势（实验、建议），强调了从宽泛到具体、迭代式完善的策略。引入了**"情绪化编程"（Vibe Coding）**的概念，鼓励通过描述感觉来指导设计，并提供了在 Bolt 偏离预期时如何引导的技巧。本章还介绍了 **"增强提示"（Enhance Prompt）**功能。

• 示范案例 ：个人任务管理器（待办事项列表）应用 、面包店网站 、心情追踪器。

• 提示词（部分示例）：

  • "Build a to-do list application where users can add tasks, mark tasks as completed, and remove tasks." （构建一个待办事项列表应用程序，用户可以添加、标记完成和删除任务。）
  • "Make the app use a modern, minimalist design with a soft color palette, and add a feature to edit existing tasks." （让应用程序采用现代、极简的设计，使用柔和的调色板，并添加编辑现有任务的功能。）
  • "Allow tasks to be categorized by project. Users should be able to switch between projects (like tabs or a drop-down to select the current project) and see separate task lists for each." （允许按项目对任务进行分类。用户应该能够切换项目（如通过标签页或下拉菜单选择当前项目），并查看每个项目的独立任务列表。）
  • "The layout looks weird on my phone screen---the sidebar overlaps the task list. Make it responsive: on small screens, put the sidebar as a top menu instead of on the side." （布局在我的手机屏幕上看起来很奇怪------侧边栏与任务列表重叠。使其响应式：在小屏幕上，将侧边栏改为顶部菜单而非侧边栏。）
  • "Give the app a different theme---maybe try a dark theme with gold accents." （给应用程序一个不同的主题------也许尝试一个带有金色点缀的深色主题。）
  • "I actually wanted graphical charts (like bar or line charts) on the dashboard. Please add a bar chart showing X and a line chart showing Y." （我其实想要仪表板上显示图形图表（如条形图或折线图）。请添加一个显示 X 的条形图和一个显示 Y 的折线图。）
  • "Refactor the project to use a clearer folder structure: separate components into a components/ directory and move styles to a separate CSS file." （重构项目以使用更清晰的文件夹结构：将组件分离到 components/ 目录，并将样式移动到单独的 CSS 文件中。）

第四章：修复、检查点与回滚

• 内容总结 ：本章探讨了 Bolt 提供的管理问题和版本 的工具：包括故障排除 （识别问题、描述问题、测试修复）、检查点 （每次提示都是一个保存点）和回滚（恢复到之前的状态）。强调了迭代开发和低风险实验的重要性。

• 示范案例 ：购物车功能错误排除。

• 提示词：

  • "There's a bug: when I click the "Add to Cart" button, nothing happens. Please fix it so that it adds the item to the cart and updates the cart count in the UI." （有一个 bug：当我点击"添加到购物车"按钮时，什么也没发生。请修复它，使其将商品添加到购物车并更新 UI 中的购物车数量。）
  • "The cart count is updating now, but it seems to always add 2 instead of 1. Please fix that logic." （购物车数量现在正在更新，但它似乎总是添加 2 而不是 1。请修复这个逻辑。）
  • "Explain how the cart updating logic works in this code." （解释一下这段代码中购物车更新逻辑是如何工作的。）

第五章：构建电影探索应用，第一部分：浏览与详情

• 内容总结 ：这是第一个实践项目，指导用户构建一个电影探索网页应用 。该应用使用 TMDB API 显示热门电影、按标题搜索电影以及显示电影详细信息。本章涵盖了 API 密钥设置 、数据获取和显示 、搜索功能 以及详情页的实现和导航 。此外，还包含如何通过各种提示来优化用户界面的细节。

• 示范案例 ：电影探索网页应用 (第一部分) 。

• 提示词：

  • "Create a React web application called Movie Explorer that uses the TMDB API to display a list of movies. The app should have a home page showing popular movies with their titles and posters, a search bar to find movies by title, and a page to show details of a selected movie." （创建一个名为"电影探索"的 React 网页应用程序，使用 TMDB API 显示电影列表。该应用应具有一个显示热门电影及其标题和海报的主页，一个按标题搜索电影的搜索栏，以及一个显示所选电影详细信息的页面。）
  • "Insert my TMDB API key into the project and use it for API requests. The API key is YOUR_KEY_HERE." （将我的 TMDB API 密钥插入项目并用于 API 请求。API 密钥是 YOUR_KEY_HERE。）
  • "On the home page, fetch the list of popular movies from TMDB and display their poster images and titles in a grid." （在主页上，从 TMDB 获取热门电影列表，并以网格形式显示它们的海报图片和标题。）
  • "Add a search bar at the top of the home page. When a user enters a movie name and submits, search TMDB for that title and update the list to show the search results instead of popular movies." （在主页顶部添加一个搜索栏。当用户输入电影名称并提交时，搜索 TMDB 查找该标题，并更新列表以显示搜索结果而非热门电影。）
  • "Make each movie item clickable. When a movie is clicked, navigate to a details page for that movie and display its details (using TMDB's movie details API). Include the movie's poster, title, overview description, release date, and rating on the details page. Provide a back link to go back to the home page." （让每个电影项目都可以点击。当点击电影时，导航到该电影的详情页面并显示其详细信息（使用 TMDB 的电影详情 API）。详情页面应包含电影海报、标题、概述描述、发布日期和评分。提供一个返回主页的链接。）
  • "Add smooth hover effects to movie cards---when users hover over a movie poster, gently scale it up by 5% and add a subtle shadow. Also add a fade-in animation when the movie grid loads." （为电影卡片添加平滑的悬停效果------当用户将鼠标悬停在电影海报上时，轻轻将其放大 5% 并添加微妙的阴影。同时在电影网格加载时添加一个淡入动画。）
  • "Change the background to dark mode." （将背景更改为深色模式。）
  • "Is there a bug in the search function? I'm not seeing results." （搜索功能有 bug 吗？我没有看到结果。） (讨论模式提示)

第六章：构建电影探索应用，第二部分：收藏与认证

• 内容总结 ：本章在第五章的基础上，通过引入用户账户（认证）和收藏功能 来扩展电影探索应用，并使用 Supabase 作为后端和数据库 。内容包括 Supabase 设置、Bolt 与 Supabase 的连接、提示词生成认证 UI ，以及收藏功能的实现（添加、查看、删除）。

• 示范案例 ：电影探索网页应用 (第二部分) ，包含认证和收藏功能。

• 提示词：

  • "Add user authentication to the app using Supabase. Create a page or modal for users to sign up or log in with email and password. Include fields for email and password and buttons to Sign Up and Log In. Once logged in, the app should show the user's email (or a welcome message) and a logout option, instead of the login form." （使用 Supabase 向应用添加用户认证功能。创建一个页面或模态框，供用户使用电子邮件和密码注册或登录。包括电子邮件和密码字段以及"注册"和"登录"按钮。登录后，应用应显示用户的电子邮件（或欢迎消息）和"注销"选项，而不是登录表单。）
  • "On the movie details page, add an "Add to Favorites" button. If the user is not logged in, clicking it should prompt them to log in (e.g., redirect to login page or show a message). If the user is logged in, clicking it should save the movie to the user's favorites in Supabase (in the favorites table with user_id and movie info). Change the button state or text to indicate the movie is favorited after clicking." （在电影详情页面上，添加一个"添加到收藏"按钮。如果用户未登录，点击该按钮应提示他们登录（例如，重定向到登录页面或显示消息）。如果用户已登录，点击该按钮应将电影保存到用户的 Supabase 收藏夹中（在 favorites 表中包含 user_id 和电影信息）。点击后更改按钮状态或文本以表明电影已被收藏。）
  • "Create a "My Favorites" page that lists all movies the logged-in user has favorited. Each favorite should show the movie's poster and title (just like the movie cards). Allow the user to click a favorite to go to that movie's detail page. Also, include a remove button (or unfavorite icon) on each, so the user can remove it from favorites. Only logged-in users can access this page; if not logged in, prompt to log in." （创建一个"我的收藏"页面，列出所有已登录用户收藏的电影。每个收藏都应显示电影的海报和标题（就像电影卡片一样）。允许用户点击收藏以跳转到该电影的详情页面。此外，每个收藏上都应包含一个删除按钮（或取消收藏图标），以便用户可以从收藏夹中删除它。只有登录用户才能访问此页面；如果未登录，则提示登录。）

第七章：使用 Netlify 集成部署应用

• 内容总结 ：本章重点介绍了如何使用 Netlify 将电影探索应用部署到互联网 。内容包括 Bolt 与 Netlify 的连接、启动部署 、测试实时网站 、管理生产环境配置（如 API 密钥的环境变量），以及使部署过程可重复。本章还解释了 Jamstack 架构（静态内容与动态内容结合）的概念。
• 示范案例 ：部署电影探索应用。
• 提示词：本章主要关注部署流程，没有特定用于构建功能的提示词。部署动作通常通过 Bolt UI 中的"Deploy"按钮触发。

第八章：构建 Supabase 驱动的健身追踪器

• 内容总结 ：本章构建了一个数据密集型的健身追踪器应用 ，广泛使用 Supabase 作为主要的锻炼数据存储，展示了关系型数据库设计 。内容涵盖了数据模式规划、在 Supabase 中设置表和行级安全（RLS） 、项目搭建、用户认证，以及创建、添加、显示和删除锻炼会话和练习 。还探讨了可选的高级功能，如实时更新 和用于服务器端计算的 Supabase Edge Functions。

• 示范案例 ：Supabase 驱动的健身追踪器。

• 提示词：

  • "Create a new React web application called Workout Tracker. Use Supabase for authentication and data storage. The app should use two related tables: workout_sessions (id, user_id, session_date, title) and workout_exercises (id, session_id, exercise_name, sets, reps, weight, notes). Users should be able to create workout sessions, add exercises to them, view their past workouts, and delete sessions. Include user authentication with email/password." （创建一个名为"健身追踪器"的 React 网页应用程序。使用 Supabase 进行认证和数据存储。应用应使用两个相关表：workout_sessions（id, user_id, session_date, title）和 workout_exercises（id, session_id, exercise_name, sets, reps, weight, notes）。用户应能够创建锻炼会话、向其中添加练习、查看过去的锻炼记录并删除会话。包括使用电子邮件/密码的用户认证。）
  • "Implement user sign-up and login using Supabase Auth. The app should require login. Provide a form for email and password sign-up/login, and show a logout button when logged in. After logging in, redirect to the workout dashboard." （使用 Supabase Auth 实现用户注册和登录。应用应要求登录。提供一个电子邮件和密码注册/登录表单，并在登录后显示一个注销按钮。登录后，重定向到锻炼仪表板。）
  • "Add a form to create a new workout session. Include fields for date (default to today) and optional title. When submitted, insert into the workout_sessions table with the current user's ID. Store the new session's ID in state to use when adding exercises." （添加一个创建新锻炼会话的表单。包括日期（默认为今天）和可选标题字段。提交时，将数据插入 workout_sessions 表，并使用当前用户的 ID。将新会话的 ID 存储在状态中，以便在添加练习时使用。）
  • "Display a list of the user's workout sessions below the form. For each session, show the date, title, and all associated exercises with their sets × reps @ weight. Order sessions by date (newest first). Use a Supabase query that joins both tables." （在表单下方显示用户锻炼会话列表。对于每个会话，显示日期、标题以及所有相关的练习及其组数 × 次数 @ 重量。按日期排序会话（最新优先）。使用 Supabase 查询连接两个表。）
  • "Add real-time subscriptions to the workout data. When a workout is added, edited, or deleted, all connected clients should see the update immediately. Use Supabase's real-time features." （为锻炼数据添加实时订阅。当锻炼被添加、编辑或删除时，所有连接的客户端应立即看到更新。使用 Supabase 的实时功能。）
  • "Create a Supabase Edge Function called calculate-volume that computes the total volume (sets × reps × weight) for a user's workouts. It should accept a date range and return the total volume lifted." （创建一个名为 calculate-volume 的 Supabase Edge 函数，用于计算用户锻炼的总负荷量（组数 × 次数 × 重量）。它应接受一个日期范围并返回总负荷量。）

第九章：使用 Bolt 的 Figma 集成构建购物清单应用

• 内容总结 ：本章探讨了 Bolt 的 Figma 集成 ，用于构建一个移动优先的购物清单应用 。内容包括理解设计到代码的流程（通过 Anima），在 Figma 中使用 **自动布局（Auto Layout）**设置设计环境，创建购物清单设计（标题、列表项、输入区域），将设计导入 Bolt，并将其从静态转换为动态（添加/勾选/删除项目、使用 localStorage 持久化、响应性）。还讨论了常见问题和优化导入的设计模式。

• 示范案例 ：购物清单移动应用（从 Figma 设计） 。

• 提示词：

  • "Convert the static list items to use React state. Create a state variable called "items" that holds an array of objects. Each object should have "id", "text", and "checked" properties. Initialize it with the existing items from the design. Replace the hardcoded list elements with a map function that renders ListItem components based on this state." （将静态列表项转换为使用 React 状态。创建一个名为"items"的状态变量，它包含一个对象数组。每个对象应具有"id"、"text"和"checked"属性。使用设计中现有项目初始化它。用一个 map 函数替换硬编码的列表元素，该函数根据此状态渲染 ListItem 组件。）
  • "Make the Add Item form functional. Track the input field's value in state. When the Add button is clicked or Enter is pressed in the input, create a new item with a unique ID and add it to the items array. Clear the input after adding. Don't add empty items." （使添加项目表单功能化。在状态中跟踪输入字段的值。当点击"添加"按钮或在输入框中按下 Enter 键时，创建一个具有唯一 ID 的新项目并将其添加到 items 数组中。添加后清除输入框。不要添加空项目。）
  • "When a checkbox is clicked, toggle that item's checked property in state. Apply a strikethrough style to checked items. Make sure the checkbox visual state reflects the checked property." （当点击复选框时，切换该项目在状态中的 checked 属性。对已勾选的项目应用删除线样式。确保复选框的视觉状态反映 checked 属性。）
  • "Save the items array to localStorage whenever it changes. When the app loads, check localStorage for saved items and use them as the initial state. Store the data as a JSON string." （每当 items 数组改变时，将其保存到 localStorage。当应用加载时，检查 localStorage 中的保存项目并将其用作初始状态。将数据存储为 JSON 字符串。）
  • "After successfully adding an item, automatically focus the input field so users can immediately type the next item. Use a ref to access the input element directly." （成功添加项目后，自动聚焦输入字段，以便用户可以立即输入下一个项目。使用 ref 直接访问输入元素。）

第十章：Bolt 用户的 StackBlitz

• 内容总结 ：本章指导用户将 Bolt 项目迁移到 StackBlitz 编辑器进行手动控制 。概述了 StackBlitz （一个完全在浏览器中运行的在线集成开发环境 IDE，使用 WebContainers 在浏览器中运行 Node.js 代码），并提供了导出 Bolt 项目的步骤 。详细介绍了在 StackBlitz 编辑器中开发（界面导览、实时反馈编辑、调试工具）、与 Bolt 工作流的区别（AI 提示与直接编码、编辑与优化、项目结构可见性）、集成终端的使用以及 GitHub 集成进行版本控制。

• 示范案例 ：电影探索应用（来自第五章和第六章）在 StackBlitz 中进行增强。

• 提示词：

  • "Set up a new Express.js route at /api/users that returns a JSON list of users." （在 /api/users 设置一个新的 Express.js 路由，返回一个用户 JSON 列表。）
  • "How do I filter the movie list by title?" （如何按标题过滤电影列表？） (在 StackBlitz 中寻求 AI 帮助的提示)

第十一章：使用 Bolt 和 Expo 构建原生移动应用

• 内容总结 ：本章利用 Bolt 的 Expo 集成来构建原生 iOS 和 Android 应用 。涵盖了设置（Expo Go 应用）、创建一个基于位置的天气应用 （初始提示、位置服务、集成 OpenWeatherMap API）、使用设备功能（摄像头、通知）、使用 React Native 进行样式设计以及在设备上测试。还讨论了如何将现有的购物清单网页应用转换为移动应用。

• 示范案例 ：LocalWeather（基于位置的天气应用） 、将购物清单网页应用转换为移动应用。

• 提示词：

  • "Create a new Expo React Native app called "LocalWeather." It should ask for the user's location and then display the current weather for that location." （创建一个名为"LocalWeather"的新的 Expo React Native 应用。它应该请求用户的位置，然后显示该位置的当前天气。）
  • "Use the OpenWeatherMap API to get the current weather for the user's location. The API key is stored in an environment variable OWM_API_KEY. Display the city name, temperature, and a description of the weather (e.g., "Sunny")." （使用 OpenWeatherMap API 获取用户位置的当前天气。API 密钥存储在环境变量 OWM_API_KEY 中。显示城市名称、温度和天气描述（例如，"晴朗"）。）
  • "Add a feature to take a photo of the current weather view. When the user taps a "Take Photo" button, open the camera, allow them to capture an image, and then return to the app, showing a thumbnail of the photo." （添加一个功能，可以拍摄当前天气视图的照片。当用户点击"拍照"按钮时，打开相机，允许他们捕捉图像，然后返回应用，显示照片缩略图。）
  • "Apply some styling: center the content, use a larger font for the temperature, and maybe use a nice background color or image depending on weather." （应用一些样式：内容居中，温度使用更大的字体，并根据天气情况可能使用漂亮的背景颜色或图片。）
  • "I have a web app for grocery lists. It has a list of items and a form to add an item. Convert this into a React Native mobile app. Create a similar UI using React Native components. Use React Navigation for multiple screens if needed." （我有一个购物清单网页应用。它有一个项目列表和一个添加项目的表单。将此转换为 React Native 移动应用。使用 React Native 组件创建类似的 UI。如果需要，使用 React Navigation 进行多屏幕导航。）
  • "Make the grocery items swipeable to remove (like a swipe gesture)." （让购物项目可以滑动删除（就像滑动手势一样）。）

第十二章：Bolt 高级技巧

• 内容总结 ：本章深入探讨了 Bolt 的高级功能 ：调试技巧 （理解实时开发环境、运行时错误、错误循环、外部服务错误等常见问题及最佳实践，如一次只做一项更改、阅读和记录代码、使用讨论模式 、必要时回滚更改、明确提示），鲜为人知的生产力功能 （文件锁定与目标 、忽略文件 、与 GitHub、Expo 等外部工具的集成、Chrome 扩展如 Supercharge/Snippets），以及后端功能 （API 与微服务、**服务器端渲染（SSR）**和框架、数据库与存储、后台任务与脚本、利用后端能力的最佳实践、安全性、日志、离线使用、限制和学习 Node.js）。

• 示范案例 ：调试待办事项列表应用 、构建带后端邮件逻辑的联系表单。

• 提示词：

  • "Fix the ReferenceError for handleLogin on login button click." （修复登录按钮点击时 handleLogin 的 ReferenceError。）
  • "Add console.log statements to show the data flow when I click "Add to Cart"." （添加 console.log 语句以显示我点击"添加到购物车"时的数据流。）
  • "Why might I be getting a 404 error when fetching /api/data?" （为什么我在获取 /api/data 时可能会收到 404 错误？） (讨论模式提示)
  • "The Add button is not working---create a Node/Express endpoint /api/addTask to save new tasks (just store them in memory)." （"添加"按钮不起作用------创建一个 Node/Express 端点 /api/addTask 来保存新任务（只存储在内存中）。）
  • "How can I persist to-do items so they remain on reload?" （如何持久化待办事项，使其在重新加载时仍然存在？） (讨论模式提示)
  • "Make the header background animated on scroll." （使标题背景在滚动时动画化。） (针对文件进行修改的提示)
  • "What's a good way to store user preferences (like dark mode on/off) in this Bolt.new app?" （在这个 Bolt.new 应用中，存储用户偏好（例如深色模式开关）的好方法是什么？） (讨论模式提示)
  • "Create an Express endpoint /api/weather that fetches weather from OpenWeather API and returns the result." （创建一个 Express 端点 /api/weather，从 OpenWeather API 获取天气并返回结果。）
  • "Add a backend function that sends an email via SendGrid when the contact form is submitted." （添加一个后端函数，在提交联系表单时通过 SendGrid 发送电子邮件。）