Bolt.new实战指南②｜Prompt工程：一次生成满意的应用

Bolt.new实战指南的第二篇，我们聊最关键的技能：Prompt工程。在Bolt.new里，你的输入质量直接决定了输出质量。学会精准描述需求，一次生成满意的应用。

为什么Prompt是Bolt.new的核心技能

Bolt.new和Cursor、Claude Code最大的区别在于——后者是"你写代码，AI帮你完善"，而Bolt.new是"你描述需求，AI从头生成"。这意味着你的Prompt就是整个项目的蓝图。

一个模糊的Prompt和一个精准的Prompt，输出质量差距可能高达10倍。

对比示例

模糊Prompt：

做一个电商网站

→ AI会生成一个通用电商模板，大概率不是你想要的。

精准Prompt：

做一个二手书交易平台，功能包括：
- 书籍列表页：封面图、标题、价格、卖家头像
- 搜索功能：按书名/作者/分类筛选
- 详情页：书籍描述、卖家信息、联系方式
- 用户注册/登录：邮箱验证
- 发布书籍：上传封面、填写信息、设置价格
- 收藏夹：标记感兴趣的书
- 技术栈：React + TypeScript，数据暂存localStorage

→ AI会生成一个完整的、功能明确的二手书交易平台。

Prompt工程5步法

第1步：定义核心场景

先回答一个问题：这个应用解决什么问题，为谁解决？

目标用户：大学生
核心场景：便宜买到二手教材，卖出不再用的书

这一步决定了整个应用的功能范围和UI风格。

第2步：列出功能清单

把所有功能按优先级排列，标注核心功能（必须有）和可选功能（以后加）：

核心功能：
- 浏览书籍列表
- 搜索和筛选
- 发布二手书
- 用户注册登录

可选功能（v2再加）：
- 在线支付
- 聊天系统
- 评价系统

Bolt.new一次处理太多功能容易出错，先做核心功能，后续迭代加可选功能。

第3步：描述UI布局

告诉AI每个页面有哪些元素，怎么排列：

首页布局：
- 顶部搜索栏 + 分类标签
- 书籍卡片网格（3列），每张卡片包含：封面图、书名、价格、卖家头像
- 底部导航栏：首页、发布、收藏、我的

不需要精确到像素，但要让AI理解你想要的页面结构。

第4步：指定技术约束

明确技术栈、数据存储方式和特殊要求：

技术约束：
- React + TypeScript + Tailwind CSS
- 数据存localStorage（先不做后端）
- 移动端优先（手机是主要使用场景）
- 支持深色模式

第5步：设定交互细节

关键的用户操作流程怎么走：

交互流程：
- 点击书籍卡片 → 进入详情页 → 可收藏或联系卖家
- 点击发布按钮 → 进入发布页 → 上传封面 + 填写信息 → 发布成功回到首页
- 搜索时实时过滤，无需按回车

迭代修改的Prompt技巧

第一次生成很少完美。后续修改时要注意：

指定修改范围

不要笼统地说"改一下UI"，而是精确指定：

把首页书籍卡片改成2列布局，增加"发布时间"字段，
搜索栏下方加一行热门分类标签

保持上下文连贯

Bolt.new会记住之前的对话，所以修改时不需要重复整个描述：

在详情页添加一个"相似推荐"区域，展示同分类的其他书籍

一次改一个方向

同时改UI、改功能、改数据结构容易让AI混乱。分批改：

1. 先改布局和视觉 → 确认
2. 再改功能逻辑 → 确认
3. 最后优化细节 → 确认

Prompt模板库

以下是几个常见应用类型的Prompt模板，可以直接复制使用：

信息展示类

做一个[主题]展示网站：
- 首页：hero区 + [内容类型]列表
- 详情页：[字段1][字段2][字段3]
- 搜索/筛选：按[维度1][维度2]过滤
- 技术栈：React + Tailwind，数据存localStorage

工具类

做一个[工具名称]：
- 输入区：[输入字段列表]
- 处理逻辑：[核心算法/流程描述]
- 输出区：[输出格式]
- 历史记录：保存最近[数量]次操作
- 技术栈：React + TypeScript

社交/社区类

做一个[社区主题]社区平台：
- 用户系统：注册/登录/头像
- 内容发布：[内容类型] + [字段列表]
- 互动功能：评论/点赞/收藏
- 推荐系统：按[维度]推荐内容
- 技术栈：React + Node.js + SQLite

下一篇，我们将实战演练——用Prompt工程5步法，从零生成一个完整的天气预报应用。