第6章 用bolt和Trae等4款工具快速实现Web产品原型

第6章

用bolt和Trae等4款工具快速实现Web产品原型

在1.2.9节中提到，大模型在生成内容时会因为5个原因产生幻觉。当生成内容是代码时，这些幻觉可能导致运行时错误，或者代码虽能运行但结果不符合预期。即便

将错误消息反馈给氛围编程工具请求大模型修复，有时甚至多次尝试也无法解决问题。如果使用氛围编程以小步迭代方式开发一款完整的Web产品原型，AI在每一步

都可能产生幻觉。这种方法不仅耗时，而且每一步都可能遇到运行错误，用户体验较差。对缺乏编程经验的用户（尤其是想快速生成可运行产品原型的产品经理）而

言，这无疑是一个很大的障碍。不过，通过精心设计提示词并选择合适的氛围编程工具与大模型的搭配组合，还是可以实现“单次对话即成功”——在单次对话中生

成既能成功运行，又能满足80%以上需求的代码。

通过本章的学习，你将掌握如何为云AI IDE Bolt.new编写长达几页的高质量提示词，实现“单次对话即成功”，从而构建一个功能完整的名为“Promptyoo-1”的

Web应用产品原型，以通过自动优化提示词减少AI幻觉，并能连接DeepSeek API进行智能提示词优化。“单次对话即成功”不仅能提高氛围编程效率，还能改善编程

体验。随后，你将学习使用Trae修复剩余bug，并使用Cursor生成架构图来可视化代码结构，便于后续研究代码。

要实现“单次对话即成功”的目标，要先做Promptyoo-1 Web应用产品原型的需求分析。

6.1 需求分析

本章要实现的Promptyoo-1 Web应用产品原型的需求与第2章和第5章中的“减少AI 幻觉”应用的功能类似，都是一方面能帮助用户将随手写的原始提示词润色得更加

清晰流畅，让大模型更好地理解用户意图，另一方面能自动在提示词后面添加提供出处的网页链接和不要编造的辅助提示词，用于减少AI幻觉，免去用户每次都手动

添加的麻烦。

Promptyoo-1确实帮我完成了这两项任务。在完成本章后，我在计算机上一直开着一个终端窗口运行着新开发的Promptyoo-1产品原型，随时用它来优化AI提示词，

如图6-1所示。

图6-1 Promptyoo-1自动在提示词中增加角色和两句辅助提示词

当使用图6-1中的“优化后的提示词”向DeepSeek（需要打开“联网搜索”模式）

提问时，其回复会在每个主要观点后附带对应的文章链接。这样可以直接点击链接查看原文，轻松验证回答的准确性，如图6-2所示。

仔细查看图6-1，这款提示词优化工具还包含多个常见功能：用户管理（左下角的 “我的账户”显示已登录状态）、历史记录管理，以及右上角的中英文界面切换和

深浅色主题显示模式切换。虽然这些功能看起来需要几天时间来实现，但只要提示词设计得当并选择合适的氛围编程工具并搭配口碑良好的大模型，仅需单次对话就

能在几分钟内完成90%的功能开发。

图6-2 DeepSeek根据优化后的提示词的要求在主要观点后面附上了文章链接

为了实现这一目标，我花了整整一天来反复测试和优化提示词。这个过程的核心目标是让云端氛围编程工具Bolt.new（以下简称bolt，其详细介绍见6.1.1节中的避

坑指南）通过一次对话就能生成一个功能完整、运行正常的应用。生成应用后，可以将其下载到本地个人计算机，再使用本地AI原生IDE Trae国际版来修复bolt生成

代码中剩余10%的bug。这种开发方法非常适合那些不熟悉JavaScript却想快速开发 Web应用的用户——它既充分发挥了氛围编程助手的优势，又避免了传统小步迭代

来我将详细介绍这个探索过程。

6.1.1 描述业务需求

人们常说“一图胜千言”，有了上面的想法后，我便用Figma绘制了Promptyoo-1的用户界面线框图来展现我的构思（你也可以尝试用纸笔手绘，然后让AI聊天应用识

别并用文字描述，作为将来编写代码生成提示词的素材。此处选择Figma是考虑到产品经理一般对Figma更加熟悉），如图6-3所示。

图6-3 用Figma绘制的Promptyoo-1的用户界面线框图

线框图是一种低保真界面原型设计图，它通过简单的线条和方框勾勒出应用的基本布局和功能结构，帮助开发团队在早期阶段清晰理解产品界面。它不关注具体的视

觉设计细节，而是聚焦于展示页面元素的布局关系和用户交互流程。这一特点使其成为从“我的天才想法”到适合氛围编程的“用户界面和交互的自然语言描述”之

间的理想桥梁。

系？

因为Figma是本书撰写时用户界面设计的常用工具。

即使你没有从事过前端界面设计，也一定听说过Photoshop。“P图”这个广为流传的说法充分体现了它的影响力。在2010年专业UI设计工具Sketch推出前，

Photoshop一直是用户界面设计的常用工具。Sketch推出后，许多UI/UX设计师转而使用它，因为Sketch创建的所有内容都是100%基于矢量的，这意味着作品可以随意

缩放而不会损失画质。而在Photoshop中，如果创建小图标时不使用智能对象，放大后会变得模糊失真。此外，Sketch从一开始就是专为UI设计而打造的，不像

Photoshop的UI功能是后来添加的。

2016年9月，Figma发布后又吸引了许多UI/UX设计师从Sketch阵营转投过来。这主要是因为Figma自发布以来就在其纯浏览器界面中提供协作功能，成为当时唯一允

许多人在同一文件上协作设计的工具。以浏览器作为用户界面意味着Windows和 Linux用户也能通过浏览器使用Figma，而Sketch仅限于macOS用户使用。这使得

Figma获得了“浏览器中的Photoshop”的美誉。

到了2025年1月，当StackBlitz公司将其AI产品更名为Bolt.new后，一个类似的转折点出现了。2025年1月23日bolt的首席执行官埃里克·西蒙斯（Eric Simons）发

布的一条推文称“我们已经进入了一个新时代，现在使用代码制作可运行的原型比在Figma中设计它们更加高效”。这种方式完全省去了使用Figma绘制原型图的时

间。

在介绍bolt之前，先要了解StackBlitz。

StackBlitz是一个基于WebAssembly的在线IDE，它通过WebContainers技术在浏览器沙箱中提供完整的Node.js运行环境。这项突破性的技术解决了传统云IDE面临的

延迟和资源消耗问题，让开发者能够完全在浏览器中进行前端和后端开发，无须配置本地环境或远程虚拟机。

在2024年10月，StackBlitz已整合AI功能。2025年1月，这款强大的AI代码生成工具正式更名为bolt。

bolt将WebContainers与Claude Sonnet 3.5大模型相结合，实现了代码生成和即时执行的无缝集成。它最大的优势在于赋予AI对整个开发环境的完整控制权，包括文

件系统、包管理器、终端和服务器，从而能够自动检测和修复错误，创建完整的全栈应用。

而bolt添加了AI编排层，实现了从自然语言到完整部署应用的端到端流程，大幅缩短了从概念到产品的开发周期。

bolt是一个基于浏览器的开发工具，让开发者可以在浏览器中编写代码并实时预览，最终构建出可在Web网站上运行的应用，以及能在iOS和Android平台运行的跨

平台移动应用。

bolt主要服务3种用户：想学习新技术并快速开发的程序员，想测试新想法并快速制作可编程和运行的产品原型的产品经理，以及想做网站但不太懂编程的普通人。

它使用起来很简单：你只要用文字描述想要的网站，它就能自动生成代码；你还可以直接在浏览器里浏览、修改和下载代码，实时预览前端界面，不需要安装复杂的

软件就能做出网站。

但是bolt也有一些局限性。目前它主要适合做简单的网站，对于复杂的项目还无法替代传统开发方式。另外，如果全程使用bolt开发大型Web应用或跨平台移动应

用，那么它的使用成本可能会比较高，因为这两类应用通常涉及几十个源文件，每次对话时bolt都要将这些文件同步给大模型，消耗大量token。即使用户每月付费

订阅bolt就能得到不少token，但做大项目时可能还未到月底token就已耗尽。此时要么额外花钱购买token，要么中断工作直到下个月初。因此，一种实用的折衷方

案是用bolt生成初始应用，下载后再用Windsurf、Cursor或Trae等工具搭配大模型在本地计算机上继续开发。

对于Figma新手，可以在网上找到一个讲解如何绘制Figma线框图的5分钟入门视频教程，边看边练习，很快就可以掌握绘制Figma线框图的基本技巧。

接下来我开始考虑如何编写业务需求描述。我计划将Promptyoo-1的业务需求分为两个阶段实现：第一阶段实现“基础提示词优化”功能——不连接DeepSeek API，

仅通过Promptyoo-1的前端应用将用户输入的原始提示词与内置的辅助优化提示词进行简单拼接，然后返回优化后的提示词给用户；第二阶段实现“智能提示词优

化”功能——将连接DeepSeek API作为默认的优化方式，当API不可用时，自动切换到第一阶段实现的“基础提示词优化”功能作为备选方案。这样设计能确保用户

在任何情况下都能获得优化后的提示词。

第一阶段要实现的“基础提示词优化”业务需求描述如代码清单6-1所示。

代码清单6-1 listings/L6-1.md

# Promptyoo-1业务需求描述

### 用户界面

用户界面文字描述如下：

这是一个名为“Promptyoo-1”的AI提示词优化工具的界面设计。整个布局采用左右分栏结构。

**左侧边栏**

• 顶部显示应用名称“Promptyoo-1”
• 有一个黑色标签显示“New optimization”（新优化）
• 包含两个时间分组的历史记录：
• “Today”部分有一个条目“提示词优化专家”
• “Yesterday”部分有一个条目“提示词优化工具”
• 底部有用户资料区域显示“My profile”

**右侧主内容区**

• 顶部有应用标题和两个图标按钮（中英文界面切换和深浅色主题显示模式切换）
• 副标题文字：“Start from a line. Create high-quality AI prompts with ease.”
• 输入区包含：
• 一个标题“Your prompt to be optimized”（带红色星号表示必填）
• 一个单行文本输入框，占位符文字为“e.g. "recommend me some prompt optimization tools"”
• 一个黑色的“Optimize prompt”按钮
• 下方结果区包含：
• 一个标题“Optimized prompt”
• 右上角有复制按钮

• 当前显示占位符文字：“Your Optimized prompt will be displayed here.

Optimize your prompt now!”

整体设计简洁现代，采用卡片式布局，主要功能是帮助用户输入原始提示词并获得优化后的版本。

### 基本功能

如果你已经知道要问AI什么，只是想让提示词更流畅清晰，那么Promptyoo-1 Web应用会更适合你（其中的“1”表示你已有初始提示词）。你只需将原始提示词提交给这个应用，它就会开启“基础提示词优化

模式”将原始提示词进行优化，并返回给你。

看一个具体例子：假设你想问AI“请为我推荐几个提示词优化工具”，并希望添加这样的后缀“请为每个工具提供官网链接，以便我核对。如果你不知道或查不到，就实说，不要编造”，这样可以最大限度地减

少AI幻觉。你希望为所有查询类的提示词都加上这个后缀，但由于后缀较长，手动添加比较麻烦。因此，你想借助AI的帮助。当你将原始提示词输入应用界面并点击“Optimize prompt”按钮后，Promptyoo-1应

用会在用户原始提示词的基础上添加以下固定辅助优化提示词：

<markdown>

你是专家。<用户原始提示词>。请提供主要观点的网页链接，以便核实。如遇不确定信息，请如实告知，不要编造。

</markdown>

例如，若用户的原始提示词是“请为我推荐几个提示词优化工具”，Promptyoo-1将返回：

<markdown>

你是专家。请为我推荐几个提示词优化工具。请提供主要观点的网页链接，以便核实。如遇不确定信息，请如实告知，不要编造。

</markdown>

结果区右上角有一个“Copy”按钮，方便用户复制优化后的提示词。

“Your prompt to be optimized”下方的输入框为必填项。

当用户点击左侧边栏的“New optimization”按钮后，右侧的待优化提示词输入框和优化后提示词结果框会清空，并显示默认提示信息。其中，“Your prompt to be optimized”下方的待优化提示词输入框会

显示示例提示“e.g. "recommend me some prompt optimization tools"”，而“Optimized prompt”下方的优化后提示词结果框会显示“Your Optimized prompt will be displayed here. Optimize your

prompt now!”

### 用户管理功能

未登录用户无法保存原始提示词和优化后的提示词的历史记录。

用户可以通过点击界面左下角的“My profile”进行登录。点击后会显示“Sign in”和“Sign up”两个选项。

点击“Sign in”后，界面中心会显示登录界面，要求输入用户名和密码。登录界面下方设有“Sign up”

链接，方便未注册用户创建新账号。

用户完成注册后会获得一个默认头像。

点击“Sign up”后，界面中心会显示注册界面，要求输入用户名和两次密码确认。注册界面下方设有 “Sign in”链接，供已有账号的用户直接登录。

界面左下角显示用户头像和“My profile”。点击后会弹出一个悬浮菜单，顶部显示当前用户名，下方包含“Settings”和“Log out”两个选项。

点击“Settings”后，界面中心会显示用户资料修改界面，用户可以更换头像和修改密码。修改密码时只需输入两次新密码，无须验证原密码。

点击“Log out”后会退出登录，同时左侧边栏的提示词优化历史记录将清空。

### 中英文界面切换功能

Promptyoo-1应用提供英文和中文两种界面。用户可通过点击界面右上角从右向左第二个切换按钮即可在英文界面和中文界面之间切换。界面默认显示英文，每次点击语言切换按钮都会在英文界面和中文界面之

间切换。

### 深浅色主题显示模式切换功能

钮，即可在浅色主题显示模式和深色主题显示模式之间切换。

由于bolt更擅长将文字描述转换为前端代码，因此我在代码清单6-1中“用户界面”部分没有上传Figma线框图，而是使用Claude将线框图转换成文字描述。

第二阶段要实现的“智能提示词优化”业务需求描述如代码清单6-2所示。

代码清单6-2 listings/L6-2.md

# Promptyoo-1业务需求描述

## 第二阶段：智能提示词优化

### 基本功能

Promptyoo-1的提示词优化功能将原有的“基础提示词优化模式”设为DeepSeek API的故障应急模式，并默认使用下述新增的“DeepSeek API优化模式”来优化原始提示词。

在将原始提示词发送给DeepSeek API之前，Promptyoo-1会自动在其前面添加辅助优化提示词（需将其中的<用户原始提示词>替换为实际的用户输入）：

<markdown>

请按以下步骤优化用户给出的原始提示词。

1. 创建一个空的“辅助优化提示词”，用于优化用户提供的原始提示词（见后文）。
2. 如果原始提示词未指定AI要扮演的角色，请根据提示词内容确定相关领域，然后在“辅助优化提示

词”后添加“你是xxx领域的专家”。这里的“xxx”指你根据提示词确定的专业领域。

1. 如果原始提示词未说明回复格式要求，在“辅助优化提示词”后添加“请提供主要观点的网页链接，

以便核实”。

1. 如果原始提示词未提及用户对AI的顾虑，在“辅助优化提示词”后添加“如遇不确定信息，请如实告

知，不要编造”。

1. 使用整理好的“辅助优化提示词”优化下面的原始提示词。确保优化后的提示词清晰流畅，且只提供

优化后的提示词，不要在结果提示词之前和之后附加其他说明。

用户提供的原始提示词是：<用户原始提示词> </markdown>

<markdown>

你是人工智能领域的专家，请为我推荐几个实用的提示词优化工具，并简要说明它们的主要功能和优势。

请提供相关工具的官方网站或权威评测链接以便核实。如遇不确定信息，请如实告知，不要编造。

</markdown>

上面这段优化后的提示词显然比原始提示词更加专业和完整。

为了提升使用体验，这个应用还具备流式响应（streaming response）功能。当DeepSeek API开始回复时，用户能在结果区的优化后提示词结果框中看到文字逐字呈现的效果，让用户尽早看到优化后的提示

词。

当DeepSeek API访问失败（可能由网络问题、API密钥无效或服务繁忙等导致），则Promptyoo-1会自动启用之前已经实现了的“基础提示词优化模式”返回优化后的提示词。

### 提示词优化历史管理功能

用户每完成一次提示词优化（即输入提示词、点击“Optimize prompt”按钮并获得优化结果，无论是使用了“基础提示词优化模式”还是“智能提示词优化模式”），系统会自动将该记录保存到数据库，并将

其置顶显示在左侧边栏“Today”分组的历史记录列表中。

每条历史记录都有一个最长30个汉字的标题，标题内容即为用户的原始提示词。如果原始提示词超过30个汉字，系统会自动截取前30个汉字作为标题。

Promptyoo-1允许历史记录标题重复。

点击历史记录后，右侧区域会显示对应的原始提示词和优化后的提示词，该记录同时会以浅灰色背景标记为已选中状态。用户可以查看右侧内容，并使用“Copy”按钮复制优化后的提示词。此时历史记录的原始

提示词无法编辑，且“Optimize prompt”按钮处于禁用状态。不过，用户可以复制该历史记录的原始提示词，以便在新建优化任务时使用。

在左侧边栏中，每个历史记录标题最多显示前16个汉字。当用户将鼠标指针悬停在超长标题上时，会出现一个黑底白字的悬浮提示，显示完整标题。

标）。

点击编辑图标后，相应的历史记录标题变为可编辑状态。按回车确认后，新标题会保存到数据库并更新到左侧边栏。如果用户清空标题后按回车，则保持原标题不变。

点击红色垃圾桶图标后，会弹出确认对话框显示“是否删除？”及要删除的记录标题。确认后，该记录将从数据库和左侧边栏中永久移除。

从代码清单6-1和代码清单6-2可以看出，我特意避免在需求描述中包含技术实现、架构设计和技术栈相关的信息。在传统软件开发中，这些内容应当在软件架构设计

阶段再进行讨论。

如果将这两个阶段的业务需求用产品需求文档（product requirements document，PRD）编写，然后提供给bolt生成代码，是否能让擅长编写产品需求文

档的产品经理工作得更便捷？

6.1.2 将业务需求转为产品需求文档时踩坑

即使你从未编写过产品需求文档，也不必担心——可以借助AI聊天应用将需求描述转换为标准格式。为此，我分别向Claude和DeepSeek（这是为尚未使用过Claude的

读者准备的选项）提供了以下提示词：

你是经验丰富的产品经理。请你按照产品经理编写PRD（product requirements document）流行的模板，将下面的Promptyoo-1提示词优化应用的需求描述改写为标准的PRD格式。要求依次将第一阶段和第二阶段

分开写。下面是需求描述：（略。见代码清单6-1和代码清单6-2）

两款AI聊天应用给出的产品需求文档的专业度，都令我满意。

值得一提的是，Claude在转换过程中有一个显著优势：当我要求它修改之前的回复内容时，它会自动生成完整的更新版本，免去了我手工修改的麻烦。相比之下，

DeepSeek只提供零散的修改建议，我还需要自行在它上次的回复中查找并做具体修改。

仔细阅读这两份产品需求文档后，我产生了一些疑虑。我的目标是通过精心设计的提示词，让bolt通过单次对话先使用Next.js前后端一体化架构及其主流版本，生

成Promptyoo-1第一阶段“基础提示词优化”的前端代码，并确保其能在个人计算机上运行。之后，我计划将代码从bolt下载到本地，再用Trae基于这些代码继续生

成第二阶段“智能提示词优化”的前后端代码。然而，Claude按产品需求文档模板

要求（如API响应时长、历史记录加载时长、流式响应首字节时长），以及 DeepSeek提供的非功能性需求（如密码加密存储和API故障降级机制）——这些是

否真的与我的目标直接相关？虽然软件架构设计和技术栈选型通常不属于产品需求文档范畴，但要用氛围编程实现一个可运行的产品原型，这些技术细节又确实不可

或缺。

这些问题引发了更深层的思考：产品经理编写的产品需求文档是否能直接用于氛围编程工具生成代码？那些与单次对话生成前端代码无关的里程碑和交付物不仅浪费

token，是否还会导致大模型产生幻觉？如果让大模型自行选择架构设计和技术栈版本，而不在提示词中明确指定，它是否会生成对产品经理不够友好的原型系统？

举例来说，前后端分离架构需要在本地分别启动两个应用，这显然不如使用 Next.js前后端一体化技术栈只需启动一个应用来得方便。

我意识到需要将软件架构设计、技术栈选型及其版本号与业务需求描述整合在一起，创建一个专门用于氛围编程快速实现产品原型的需求描述。本书将这种专为氛

围编程生成产品原型的“带有技术栈选型简述的需求描述”命名为“氛围编程需求描述”，简称“氛围编程需求”。

那么，如何在氛围编程需求中清晰地描述架构设计和技术栈选型呢？带着这个问题，我开始向AI聊天应用寻求专业建议。

6.1.3 让AI提供软件架构与技术栈建议

基于我之前使用Docker Desktop和PostgreSQL数据库开发容器化Web应用的经验，以及了解到Next.js前后端一体化技术栈可以通过启动单个应用来演示产品原型

（这对包括产品经理在内的所有氛围编程者快速构建产品原型都很方便），我已经对软件架构和技术栈有了清晰的整体方向。为了将这些信息加入氛围编程需求，我

向AI聊天应用询问了Next.js、Docker Compose和PostgreSQL等技术栈的当前主流版本号。

在探索中，我偶然间发现了一个更适合产品经理的技术栈方案，比使用数据库持久化提示词历史、启动容器化数据库和Next.js应用都要简单。因此，本节仅给出下

列AI聊天应用提供的数据库和容器化相关建议，不再深入讨论。

## 后端技术栈

• **Next.js API Routes** - 内置API支持

• **PostgreSQL 17** - 关系型数据库
• **Redis 8.0** (可选) - 缓存和会话存储

## 开发和部署工具

• **Docker 27.0** - 容器化
• **Docker Compose 2.32** - 多容器编排
• **Nginx 1.28** - 反向代理
• **pnpm 9.15** - 包管理器
• **ESLint 9.0** + **Prettier 4.0** - 代码规范

## Docker Compose 配置（略）

6.2 在氛围编程需求中包含严格技术栈要求时踩坑

因为是首次尝试让bolt根据氛围编程需求生成前端应用代码，我采取了小步迭代的策略。我给bolt的提示词仅包含代码清单6-1中描述的第一阶段“基础提示词优

化”需求，以及严格的技术栈规范和版本要求（如代码清单6-3所示）。

代码清单6-3 listings/L6-3.md

### 前端技术栈简述

为简化产品经理在个人计算机上启动应用的流程，本项目将采用Next.js作为全栈开发框架（仅需启动单个应用，无须分别启动前端和后端）。以下为前端技术栈及其版本号：

• **Next.js 15.1** - 全栈React框架，支持SSR/SSG
• **React 19** - UI框架
• **TypeScript 5.7** - 类型安全
• **Tailwind CSS 4.0** - 实用优先的CSS框架

• **next-i18next 16.0** - 国际化支持
• **next-themes 0.4** - 明暗模式切换
• **React Hook Form 8.0** - 表单处理
• **Zod 3.24** - 数据验证

### 开发和部署工具

• **pnpm 9.15** - 包管理器
• **ESLint 9.0** + **Prettier 4.0** - 代码规范

### 项目结构建议

promptyoo-1/

├── docker-compose.yml

├── Dockerfile

├── src/

...（略）

├── locales/

├── .env.example

└── package.json

### 关键特性实现建议

1. **多语言支持**：使用next-i18next实现中英文界面切换
2. **主题切换**：使用next-themes和Tailwind CSS的dark mode bolt根据我的提示词生成了前

端代码，但在其云环境预览时用户界面上出现了编译错误。好在bolt在聊天区域提示发现了这个错误，并提供了一个“Attempt fix”按钮。我点击按钮开始修复，

额几乎耗尽，为了看到最终结果，我不得不充值订阅。

接下来又经历了4轮“点击修复按钮→发现运行错误→继续点击修复”的循环。最后一次尝试后，错误数量反而从3个增加到5个，我终于失去了耐心。

我决定放弃，将代码下载到本地计算机，改用Trae国内版打开。我先后尝试用Trae 国内版搭配DeepSeek大模型和豆包大模型来修复npm run dev报出的错误，但经过

近10次尝试后，错误仍然存在。

我回想起之前做实验让bolt生成AI聊天应用时，只用了一句简单的提示词“Use Next.js to implement an AI chatbot with history management and DeepSeek

API key input functions”（使用Next.js实现具有历史记录管理和DeepSeek API 密钥输入功能的AI聊天机器人）。那时虽然生成的代码在bolt云环境运行时也有错

误，但错误只有1个，只需修复一次就能运行，远没有现在这么多运行错误。这让我思考：是不是因为在给bolt的氛围编程需求提示词中对技术栈及其版本要求过于

严格，才导致了这些问题？大模型在预训练和指令微调阶段不太可能恰好学会了能精确满足代码清单6-3所列技术栈组合的代码。也许我应该适当放宽氛围编程需求

中的技术栈描述，让大模型运用自己擅长的知识来生成代码（正是这次的经历启发了我总结出1.7节中的氛围编程高配组合放松要求指导原则）。

6.3 用bolt的“Enhance prompt”时踩坑

于是我在bolt中打开一个新对话，还是使用上一次的提示词，只是把提示词后面的技术栈描述从代码清单6-3中的严格要求简化为代码清单6-4中的宽松要求。

代码清单6-4 listings/L6-4.md

### 前端技术栈简述

为简化产品经理在个人计算机上启动应用的流程，本项目将采用 Next.js 作为全栈开发框架（仅需启动单个应用，无须分别启动前端和后端），并使用2025年主流版本。

在提交提示词前，我看bolt还提供优化提示词的功能，便随手点击了提示词输入框左下角的“Enhance prompt”按钮。bolt立即对提示词进行了“优化”，将内容精

简了不少。这让我思考：或许是我在代码清单6-1中的业务需求描述过于冗长，又或许bolt确实能更准确地理解我的氛围编程需求（但后来发现全不是）。

我提交了优化后的提示词。代码生成过程很顺利，单次对话生成的前端代码运行时

Claude在解读Figma线框图时生成的文字描述（见代码清单6-1）没有准确表达“右侧主内容区→主要功能区域”的内容。它把“一个单行文本输入框标题”简化成了

“一个标题”。当我使用bolt的优化提示词功能时，bolt又将其进一步改写为“必填标题”，最终导致多生成了一个标题输入框。发现这个问题后，我修正了代码清

单6-1中的描述不清之处，改后的描述如代码清单6-5所示。

代码清单6-5 listings/L6-5.md

（略。同代码清单6-1）

• 主要功能区域包含：
• 一个单行文本输入框标题“Your prompt to be optimized”（带红色星号表示必填）
• 一个单行文本输入框，占位符文字为“e.g. "recommend me some prompt optimization tools"”

（略。同代码清单6-1）

这表明在使用AI聊天应用将Figma线框图转换为文字描述时，需要仔细检查输出内容，确保没有表述不清或歧义的地方（这也符合1.7节中氛围编程高配组合优化提

示词指导原则）。

6.3.1 用bolt直接导入Figma线框图时踩坑

既然用Claude描述Figma线框图会出现一些瑕疵，那么直接在bolt中导入Figma线框图（因为我之前在bolt主页上看到有醒目的导入Figma的按钮）是否能减少这些问

题呢？

我立即进行了尝试。点击“Import from Figma”图标，复制并粘贴我在Figma网页端绘制的线框图链接后，就成功导入了Figma图。生成的用户界面确实与Figma线框

图几乎完全一致，只是缺少了左下角的“My profile”用户管理按钮。

这个问题不难理解，因为在这种导入方式下，我无法输入任何提示词来让bolt添加用户管理功能。此外，由于无法在导入过程中指定我想使用的Next.js框架，生成

的前端代码默认使用了React 18.2.0。这就意味着我还需要另外生成一个Node.js 后端应用才能与前端配合使用。

考虑到这些无法自定义功能和框架的限制，在bolt中直接导入Figma线框图的方法并不适合用于本章单次对话生成可运行的Next.js应用的场景。

瑕疵，但作为一个Next.js新手，我希望能更好地理解这个框架中前端页面元素与代码的对应关系。因此，我决定让氛围编程工具生成一个C4 模型风格的架构图，

这样就能清晰地看到代码组件之间的调用关系，使代码更容易理解。

6.3.2 从Cursor生成的架构图中得到启发

由于Claude被公认为编程能力最强的大模型，我原本打算用它来分析代码并绘制架构图。但bolt生成的Next.js框架代码包含76个文件，逐个上传给AI聊天应用太过

烦琐。虽然可以将文件打包成ZIP上传，这种方式仍然不够便捷。我需要一个能在本地计算机上打开Next.js项目，并直接集成Claude大模型（撰写本书时最新版本

为Claude Sonnet 4）的氛围编程IDE。这样就能避免上传代码的麻烦，同时享受 Claude大模型的强大功能。

在本书撰写期间，我能用上的集成了Claude Sonnet 4且广受欢迎的氛围编程IDE只有Cursor（当然后来等Trae国际版推出Pro订阅，特别是2025年7月中旬Windsurf因

被Cognition公司收购重新获得Claude Sonnet 4访问权限后，就又多了一些选择），所以我选择了它。

Mermaid是一种基于文本的图表描述语言，它能将文本转换为流程图、时序图、甘特图等多种可视化图表，无须使用专门的绘图工具就能快速创建和维

护专业的技术文档图表。

我使用了代码清单6-6所示的提示词，让Cursor（搭配Claude Sonnet 4大模型，使

用Agent模式）生成C4模型架构图的Mermaid脚本。

代码清单6-6 listings/L6-6.md

请读取 @next-js-app，分析这个Next.js项目的前后端代码，按照C4模型的三层架构（上下文层、容器层、组件层）用Mermaid脚本绘制3个层级的架构图。每个脚本分别以 C4Context、C4Container和

C4Component开头。3个层级的架构图需体现层层深入的特征，例如可以将容器层中的前后端部分在组件层中展开详述。另外要求以C4Container和C4Component开头的两张图里都要画User。

在组件层中请标注每个组件对应的源文件名，以便快速查找相关代码。在容器层中需标注所有技术栈的具体版本号。

在Cursor的提示词中，“@next-js-app”是引用代码目录的特殊符号，需要在其前后各添加一个空格才能激活蓝色高亮效果（表示起效）。

的文本生成能力。这个方法乍看起来可能不太直观——为什么要用文本生成能力来创建图表呢？答案很简单：Mermaid图表本质上就是由文本脚本定义的。

【避坑指南】为何代码清单6-6中生成C4模型架构图的Mermaid脚本提示词如此啰唆？

这些看起来啰唆的提示词，其实都是在实践中踩坑后的产物。

最初的提示词中并未包含下面这两句：“每个脚本分别以C4Context、C4Container 和C4Component开头”和“要求以C4Container和C4Component开头的两张图都要画

User”。当我把这个最初版本用于Trae国内版（搭配DeepSeek-V3-0324大模型）生成架构图时，它生成的并非C4模型风格的架构图，而是以“graph TD”（top-

down，自顶向下）开头的普通流程图。流程图无法展示C4模型中上下文层、容器层和组件层之间的逐层细化的关系。此外，如果不加上第二句提示词，生成的容器层

架构图和组件层架构图可能会遗漏User。这些踩坑经历促成我总结出1.7节的氛围编程较弱大模型优化提示词指导原则。

基于代码清单6-6中的提示词，Cursor生成了C4模型的三层架构图的Mermaid脚本，其中上下文层架构图引起了我的注意。这个图的Mermaid脚本如代码清单6-7所示。

代码清单6-7 listings/L6-7.md

C4Context

title System Context diagram for Promptyoo-1 AI Prompt Optimizer

Person(user, "User", "Users who want to optimize their AI prompts")

System(promptyoo, "Promptyoo-1", "AI Prompt Optimization Platform<br/>Helps users enhance and optimize their AI prompts")

System_Ext(browser, "Web Browser", "User's web browser for accessing the application")

System_Ext(localStorage, "Browser Storage", "Local storage for user data and prompt history")

Rel(user, browser, "Uses")

Rel(browser, promptyoo, "Accesses", "HTTPS") Rel(promptyoo, localStorage, "Stores data", "Browser APIs")

mermaid.live网页（一个免费的Mermaid图表显示工具）后，即可生成与图6-4类似的上下文层架构图。由于mermaid.live生成的图表存在连线交错、不够美观易读的

问题，我又使用Claude将Mermaid脚本转换为PlantUML脚本，并在planttext.com上生成了图6-4的SVG格式图（后续C4模型架构图均采用与此相同的处理方式，不再重

复说明）。

从图6-4能够看出，Promptyoo-1应用通过调用Browser API将数据存入了Browser Storage（浏览器存储）。Browser Storage这个概念引起了我的兴趣。作为前端开

发新手，这是个令人耳目一新的发现。根据图6-4所示，用户数据和提示词优化历史可以直接存储在浏览器本地，无须使用我最初设想的容器数据库。这一特性使缺

乏编程经验的产品经理能更轻松地使用氛围编程方法开发可运行的产品原型，因为这样能省去在个人计算机上安装和配置容器的麻烦。我随之萌生了一个新想法：将

原先使用容器化数据库实现数据持久化的设计替换为Browser Storage。这让我体会到了使用氛围编程工具探索时意外获得启发的乐趣。

值得一提的是，在使用Cursor（搭配Claude Sonnet 4大模型）之前，我用相同的提示词（代码清单6-6）分别测试了Trae国内版（搭配DeepSeek-V3-0324大模

型）、Trae国内版（搭配Doubao 1.5 Pro大模型）、Trae国际版（搭配Claude Sonnet 3.5大模型）、Trae国际版（搭配Claude Sonnet 3.7大模型）和Trae国际

版（搭配Claude Sonnet 4大模型）。结果这些组合都没有在上下文层架构图中展示Browser Storage组件。这表明，如果对代码使用的技术栈不太熟悉，要生成更

高质量的架构图，最好在氛围编程工具中选用Claude系列中最新版本的大模型。这正是启发我总结出1.7节中的氛围编程大模型升级指导原则的“那颗小火星”。

话说回来，如果能像代码清单6-8所示的提示词那样精确描述C4模型架构图的 Mermaid脚本生成要素，即使使用Trae国际版（搭配Claude Sonnet 4或Claude

Sonnet 3.5大模型），也能生成令人满意的架构图。这一点促成我总结出1.7节中的氛围编程大模型降级指导原则。

代码清单6-8 listings/L6-8.md

请读取#Workspace，分析该Next.js项目的前后端代码，并按照C4模型的三层架构（上下文层、容器层、组件层）用Mermaid脚本绘制架构图。绘制3个层级的架构图的Mermaid脚本，分别以C4Context、

C4Container和C4Component开头。所有层级都需展示User、Web Browser和Browser Storage这些Person和 System_Ext，并体现层层深入的结构关系。例如，将容器层的Next.js容器在组件层中详细展开。在以

C4Component开头的图中标注每个组件对应的源文件名，方便代码查找。在以C4Container开头的图中标注所用技术栈的具体版本号。C4Container图中只有一个容器，即Next.js应用。

不过，暂且搁置这个新想法，因为用户界面中的两个输入框问题仍待解决。既然在 bolt中直接导入Figma图时无法指定使用Next.js框架和实现用户管理功能，那么是

否可以在提示词中同时包含这些技术要求和Figma线框图呢？这样或许能达到两全其美的效果（后来发现不是）。

6.3.3 在bolt提示词中插入Figma线框图时踩坑

我打开了一个新的bolt对话，将代码清单6-5中的需求描述复制并粘贴进去，并将 “用户界面”的文字描述替换为“见我上传的线框图”。随后在bolt的提示词区域

上传了Figma线框图（如图6-3所示），并添加了代码清单6-4中的“前端技术栈简述”后提交。当bolt生成代码并运行时，系统发现了7个错误。当我点击“Attempt

fix”按钮时，bolt弹出“Large Project Size Alert”（大型项目规模警报）对话框，提示“The project seems to be quite large in size, which increases

token usage per message.”（项目规模较大，这会增加每条消息的token使用量）。

由于我刚订阅了Trae Pro，可以更多地使用它所能搭配的Claude大模型，我决定将代码从bolt下载并解压，使用Trae Pro（搭配Claude Sonnet 3.7大模型）来修复

这些问题。

随后我用Trae国际版尝试修复了6次，错误不仅没有得到解决，反而报错信息变得更多。这让我开始思考：在提示词中添加Figma线框图是否像严格规定技术栈及版

本号一样，反而限制了AI的发挥空间，从而导致更多错误？值得注意的是，到目前

是让blot去读上传的线框图。由此可以猜测：bolt在处理用户界面的文字描述时，似乎更容易生成运行时不报错的前端代码。

既然已经有了一个运行无报错的应用，我是否可以让bolt或Trae国际版基于此进行修改，使其符合我的期望呢？理论上可行，但仔细思考后，我意识到bolt生成的用

户界面瑕疵其实源于提示词对界面描述不够清晰。如果能把提示词改得更明确，就能在单次对话中实现目标，无须后期修改，这样效率会更高（这也符合1.7节中的

氛围编程高配组合优化提示词指导原则）。基于这个考虑，我放弃了修改现有代码的想法。

6.4 用bolt单次对话成功生成第一阶段氛围编程需求代码

我打开了一个新的bolt对话，将代码清单6-5中的“基础提示词优化”业务需求描述复制进去。这次我保留了“用户界面”的文字描述，而不是上传Figma线框图。

我添加了代码清单6-4中的“前端技术栈简述”，没有点击“Enhance prompt”按钮就直接提交。

结果令人振奋：前端代码在首次对话就完美运行。不论是在bolt云环境中运行、预览模式下测试，还是下载到本地计算机后运行，都未出现任何错误。根据代码清单

6-5的业务需求描述进行初步测试，功能运作完全正常。

既然与bolt的单次对话就能完成第一阶段以前端应用为主的氛围编程需求，那么如果将原本计划用容器化数据库实现的“智能提示词优化”后端功能改为使用

Browser Storage这种前端技术来实现，是否也能在一次bolt对话中同时完成第一阶段和第二阶段两个阶段的业务需求呢？我决定尝试一下。

6.5 用Claude更换氛围编程需求持久化方案时踩坑

为了在bolt的单次对话中同时实现第一阶段和第二阶段的氛围编程需求，我需要将数据持久化方案从容器化数据库改为Browser Storage。作为前端开发新手，我对

这种技术选型转换涉及的技术栈不太熟悉，因此我让Claude（搭配Claude Sonnet 4大模型，未开启“Extended thinking”和“Web search”模式）进行转换：

如果我的产品原型快速开发的需求描述中的数据持久化技术要由PostgreSQL数据库改为Browser Storage，那么请你评判下面的需求描述（针对PostgreSQL数据库写的内容）中哪些内容是不适用的？应

该如何修改。下面是需求描述：

述”及6.1.3节中为后端应用设计的用容器化数据库实现数据持久化的方案）

Claude分析了原氛围编程需求中不适用的后端技术栈，包括NextAuth.js（用于认证）、Prisma（现代ORM）、PostgreSQL数据库、Redis（用于缓存和会话）及整个

Docker Compose配置。它建议由于Browser Storage的安全限制，需要简化用户管理功能，去掉传统的用户注册和登录系统，改用本地标识符（如UUID）来区分不同

用户会话。

由于我没有使用过UUID，想了解具体效果，我继续向Claude提问：

请你基于你给出的评判，修改我给你的需求描述，然后给我一份修改后的完整版需求描述。

Claude很快提供了修改后的完整版氛围编程需求。我用这个需求让bolt生成了 Promptyoo-1应用，也是首次对话后生成的前端代码就能正常运行，但发现用户界

面左下角的用户名和头像被Session ID编号取代，这不符合预期。于是我向Claude 询问：

为何你移除了用户管理系统？难道用browser storage同时实现用户管理系统和提示词优化记录历史管理不现实？

Claude承认之前的判断过于谨慎，表示Browser Storage完全可以同时实现用户管理系统和提示词优化记录历史管理。随后它对完整版氛围编程需求进行了相应修

改。

这个修改后的包括第一阶段和第二阶段的完整版氛围编程需求是否能在bolt的单次对话中生成可运行的代码呢？

6.6 用bolt单次对话成功生成两个阶段氛围编程需求代码

我将完整版的氛围编程需求（见本书配套代码中的ch06-bolttrae/prompts/prompt-generate-next-js-app.md文件）提交给bolt作为提示词。

提交前，我特意避免点击“Enhance prompt”按钮。结果令人满意：bolt生成的前端应用代码在其云环境和我的个人计算机上都能顺利运行，没有报错。虽然还存在

几个小bug，但大部分功能都能正常使用。

通过单次对话，bolt能在几分钟内生成一个可在个人计算机上运行的完整Web应用。该应用包含基础提示词优化、智能提示词优化、优化历史管理和用户管理等功

能。这种产品原型不仅显著缩短了制作周期，还让团队成员和用户能够及早进行试

型的传统方式。

虽然这个产品原型中存在一些小bug，但通过6.8节的学习就能发现，即使缺乏编程经验的产品经理也能通过氛围编程工具逐步修复这些问题。在开始修复bug前，可

以先理解产品原型中界面功能和代码之间的对应关系，这样在使用氛围编程工具修复bug时，就能清楚地知道要调整哪些文件。对于不熟悉Next.js框架又想找到一个

可运行的产品原型来学习的读者，架构图是很好的“导航地图”。为此，下面要为当前代码绘制一份C4模型的组件层架构图，用于可视化Next.js应用中各个组件之

间的关系及其对应的源代码文件。

6.7 用Cursor生成C4模型架构图

我使用Cursor（搭配Claude Sonnet 4大模型）打开产品原型代码（位于本书配套代码中的ch06-bolt-trae/next-js-app目录），并使用前文代码清单6-8中的提示

词生成了C4模型风格架构图的Mermaid脚本。

限于篇幅，这里只展示最有助于理解产品代码的C4模型组件层架构图，如图6-5所示。

图6-5 Promptyoo-1产品原型C4模型组件层架构图

图6-5中的文字看不清没关系，因为我不会讨论图中的架构，只是展示这个在氛围编程工具与所搭配大模型组合的帮助下用“单次对话即成功”的方式生成的Web应

用产品原型的软件架构复杂性。如果你有兴趣研究这个架构图，可以打开本书配套代码中的ch06-bolt-trae/c4-model-diagrams/c4-model-component-for-

promptyoo-1.svg文件查看。

大致看一眼图6-5中显示的19个组件及表示它们之间关系的连线就能发现， Promptyoo-1产品原型的Next.js实现相当复杂，因此需要更多信息来帮助理解代

码。我使用以下提示词，让Cursor为我详细介绍了这个产品原型的技术栈、目录结构和关键文件（限于篇幅，Cursor的回复略，读者可自行尝试）：

释每个关键文件的作用，这样在未来需要添加功能或修复问题时，我能快速定位到相关文件。

重点说明需要手动修改的文件，对于工具自动生成和维护的文件只需简要说明。最后，列出在开发维护过程中最常需要修改的文件，作为重点关注对象。代码具体实现细节可以先不讨论。

对Next.js前端应用开发新手而言，了解用户界面元素如何与源代码文件对应尤为重要。因此，我向Cursor上传了产品原型的用户界面截图，并使用以下提示词获取

了详细说明（限于篇幅，Cursor的回复略，读者可自行尝试）：

请查看应用界面截图，并用自然语言描述界面中的所有元素，以及它们与 @next-js-app 项目中相应源代码文件的对应关系。这将帮助我更好地理解每个文件的具体功能。

完成这些前期准备工作并参考图6-5所示的组件层架构图后，就可以开始修复bolt 生成的Next.js应用中的bug了。

6.8 用Trae国际版修复Next.js应用中的bug

在修复bug前，我先需要做一个完整的排查。我将代码清单6-1和代码清单6-2中关于“基础提示词优化”和“智能提示词优化”业务需求描述复制到记事本，然后启

动Promptyoo-1产品原型，逐一验证各项功能。经过测试，我发现bolt实现了以下3 个与预期不符的功能，但可以接受（无须修复）。

・用户无须登录即可存储、浏览、修改和删除提示词优化历史记录。（氛围编程需求原本规定未登录用户只显示“No history yet”。）

・用户退出登录后，左侧边栏显示登录前的历史记录。（氛围编程需求原本规定退出登录后应清空历史记录。）

・鼠标指针悬停在超长历史标题上会显示白底黑字的提示框。（氛围编程需求原本规定应为黑底白字。）

此外，我还发现了4个需要修复的bug：1个严重偏离预期的功能缺陷、2个未实现的功能模块，以及1个可能导致DeepSeek API密钥泄露的安全隐患。

接下来简要说明如何使用Trae国际版来修复这些bug。

6.8.1 修复一个严重偏离预期的bug

时，没有任何响应，右侧的待优化提示词输入框和优化后提示词结果框也没有清空。

我原本以为这是个容易修复的小bug。但令我意外的是，即使使用Cursor（搭配 Claude Sonnet 4大模型）和Trae国际版（搭配Claude Sonnet 3.7大模型）这两款

当下顶级的氛围编程工具及大模型搭配组合，经过3轮连续对话和代码修复尝试， “New optimization”按钮点击后依然毫无反应。为避免其他章节的代码干扰，我

用这两个AI原生IDE只打开了本书配套代码中的ch06-bolt-trae/next-js-app目录。以下是我最初尝试修复这个bug的提示词：

这是Cursor中的用法，Trae中用“#Workspace”，表示当前打开的项目代码。

请你阅读 @next-js-app代码，找出以下功能相关的代码：“当用户点击左侧边栏的‘New optimization’按钮后，右侧的待优化提示词输入框和优化后提示词结果框应该清空并显示默认提示信

息，效果类似于点击浏览器的刷新按钮”。目前发现点击该按钮后没有任何响应，右侧的待优化提示词输入框仍然保留着用户之前输入的提示词和优化结果。请修改相关代码来实现这个功能。

后来我发现，通过刷新页面就能达到想要的清空效果。于是，我用以下提示词尝试了Trae国际版（搭配Claude Sonnet 4大模型）：

请你阅读并修改#Workspace代码，实现“当用户点击左侧边栏的‘New optimization’按钮后，就刷新当前浏览器页面”功能。

令人惊喜的是，这个简单的提示词直接解决了这个bug。这也说明了在提示词中明确指出解决方案比泛泛而谈更加有效。这也印证了1.7节中的氛围编程高配组合优

化提示词指导原则的有效性。

6.8.2 补充实现两个尚未实现的功能与项目规则文件

bolt尚未实现“访问DeepSeek API进行智能提示词优化”和“大模型回复内容的流式响应”功能。现在来看一下如何实现这两个功能。

首先实现“访问DeepSeek API进行智能提示词优化”功能。

我选择继续使用Trae国际版（搭配Claude Sonnet 4大模型）。要让Trae国际版补充这个功能，它需要了解完整的氛围编程需求。除了直接将需求复制到提示词中，

还有一个更优雅的方案：将完整版的氛围编程需求保存到项目专属的规则文件中（如同5.7节使用项目规则那样，可以把规则理解为可复用的提示词）。创建规则

“Project Rules”，Trae就会在“next-js-app/.trae/rules”目录下创建 “project_rules.md”项目规则文件，如图6-6所示。

图6-6 在Trae中创建项目规则

将6.6节中的完整版氛围编程需求复制到这个文件后，以后只要在提示词中使用 “#project_rules.md”，Trae就能了解项目的整体需求，更好地补充功能，无须

重复粘贴冗长的需求说明。准备好规则文件后，就可以用下面的提示词来实现这个功能：

请阅读#Workspace代码并参考#project_rules.md，找出相关功能代码。Promptyoo-1的提示词优化功能需要将原有的“基础提示词优化模式”设置为DeepSeek API的故障应急模式，同时默认启用新增的“智能提

示词优化模式”来优化原始提示词。由于该功能目前尚未实现，请修改相关代码以实现此功能。

具体要求：

1. DeepSeek API key设置为“xxx”并保存在.env文件中
2. 在终端中打印DeepSeek API的连接日志，方便观察运行状态

件，然后点击“Accept All”按钮确认。接着，我在.env文件中输入正确的 DeepSeek API key，在Trae国际版的内置终端中运行npm run dev。当前端界面链

接出现在终端后，我按住快捷键（在macOS系统上用“Cmd”，在Windows/Ubuntu系统上用“Ctrl”）并点击链接，在浏览器中打开了Promptyoo-1产品原型。通过浏

览器的“Developer Tools”菜单打开开发者工具，选择“Console”选项卡查看日志。测试优化一个提示词后，“智能提示词优化”功能成功实现，浏览器终端也显

示了DeepSeek API的访问日志。

接下来，我用以下提示词在Trae国际版中实现“大模型回复内容的流式响应”功能：

请阅读#Workspace代码并参考#project_rules.md，找出与下述需求相关的功能代码：“为了提升使用体验，这个应用还具备流式响应（streaming response）功能。当DeepSeek API开始回复时，用户能

在‘Optimize prompt’按钮下方的结果区看到文字逐字呈现的效果，让用户尽早看到优化后的提示词。”由于该功能目前尚未实现，请修改相关代码以实现此功能。

具体要求：在终端中打印与“streaming response”相关日志，方便观察运行状态。

按照Trae国际版给出的修改方案实施后，我运行npm run dev进行测试。流式响应功能已经实现，但发现优化后的提示词前总是带有“优化后的提示词”这个前缀。

这导致复制并粘贴到AI聊天应用后还需要手动删除，很不方便。为解决这个问题，我又使用了下面的提示词：

在“Optimized prompt”按钮下方的结果区中，提示词优化结果前面被添加了字符串“优化后的提示词”。请删除这段多余文本，因为当用户点击右上角的Copy按钮时，会一并复制这段无关内容，需要手动

删除很不方便。

Trae国际版成功修复了这个问题。现在，氛围编程需求中的功能已基本实现完成，产品经理可以让团队成员和用户开始试用这个产品原型。然而，我随后发现了一个

潜在的安全隐患——产品经理在演示原型时可能会不慎暴露DeepSeek API密钥。

6.8.3 修复一个API密钥安全性问题

目前产品原型的DeepSeek API密钥以明文形式保存在ch06-bolt-trae/next-jsapp/ .env文件中。尽管本书配套代码的根目录下.gitignore已设置忽略.env文

件，确保推送到GitHub或Gitee等公共代码仓库时不会泄露密钥，但产品经理在演示原型时（特别是在线直播或录屏时）可能会误开.env文件，存在密钥泄露的安全

隐患。

密钥从.env文件中移除，改为在用户点击“Optimize prompt”按钮时提示输入密钥。用户可从1Password等密码管理工具中复制密钥，而输入的密钥将以星号显

示，有效防止密钥在屏幕上明文暴露。

于是我使用了以下提示词，让Cursor帮我实现API密钥的输入功能：

我觉得你说的“启动时密码输入（最安全演示方案）”很好。请你帮我修改 @next-js-app 中相应的代码，使得我在每次点击“Optimize prompt”优化提示词后，应用会提示我输入DeepSeek API的密钥。这

个密钥不要保存在任何地方。

Cursor很快完成了修改。不过，在测试时我发现，每次点击“Optimize prompt”

按钮都需要重新输入密钥略显烦琐。于是我又用以下提示词让Cursor进行改进：

每次点击“Optimize prompt”按钮都要输入API key有些烦琐。请问你能否再次修改@next-js-app 中的相关代码，使得我在第一次输入这个API key后，应用能将其保存在next.js的后端应用里，使其不会暴露

在前端。之后只要用户不关闭chrome浏览器，保持session不中断，再点击“Optimize prompt”按钮，应用能从后端session里获取这个API key，从而省去我输入key的麻烦。

Cursor很快完成了改进。测试结果表明，新功能运行良好——用户只需在首次使用时输入密钥，之后在同一浏览器会话中点击“Optimize prompt”按钮时就无须重

复输入。这样就可以安全地删除.env文件中的密钥，从而彻底消除了密钥意外泄露的风险。

本章至此已完成通过编写精心设计的提示词，让bolt在单次对话中生成功能完整且可运行的Next.js应用，并用氛围编程方法修复了bug。然而，从图6-5可以看出，

bolt生成的代码包含多达19个模块。对想通过氛围编程工具入门新编程语言及其技术栈的新手来说，一次性生成如此多模块的产品原型显然让新手吃不消。那么，该

如何运用氛围编程工具来帮助零基础用户更加轻松地小步入门Web应用开发呢？