Vibe Guide确认界面与技术方案
页面草稿也叫原型，可以演示样子和顺序，但里面的保存按钮可能还不能真正保存。
为什么要有这一节点？
先看看页面草稿，确认入口和按钮放对了，再花时间开发。
开始操作共 2 个步骤 · 按顺序完成
0102先看关键页面，再决定怎么开发待核对展开这一步收起这一步
01开始前准备什么，做完后留下什么？
需求文档和用户操作顺序。
设计文件可以给后面的开发步骤使用。
这一步要让 AI 读取和保存哪些文件？
在所选工具的项目对话中，让它先打开下面的文件。找不到时，点击下方链接回到创建文件的步骤。
先让 AI 读取这些材料：docs/requirements.md · docs/stories.md
让 AI 将结果保存到：docs/design.md
02这一步要帮你解决什么问题？
先看看页面草稿，确认入口和按钮放对了，再花时间开发。
弄懂原理，再试着自己判断
这个概念是什么意思？
页面草稿也叫原型，可以演示样子和顺序，但里面的保存按钮可能还不能真正保存。
换个情况，你会怎样判断？
画面显示“保存成功”，怎样确认它不是演示文字？
查看参考答案
按要求真正保存，再重新读取或重开核对实际记录；原型可能只有假数据和提示文字，所以此时不能认定已实现。
试着用自己的话回答；拿不准时先对照上面的解释，再用自己的项目举例核对。
03这一步具体怎么做？
展开收起
项目对话与 AI 给出的原型预览
每次只发送当前这一项的提示词：选中框内文字复制（Mac 按 ⌘C，Windows 按 Ctrl+C），切到所选工具的项目对话，粘贴后把【】替换成自己的内容，再点发送。等工具回复并核对“完成后应该看到”的结果，再做下一项。
先看页面草稿。页面草稿只帮助决定东西放哪里、点击后去哪里。展开收起
建议提示词：
请根据 docs/requirements.md 和 docs/stories.md 做一条主要使用过程的页面草稿。告诉我怎样打开，每个按钮会去哪里；还不能实际使用的部分请标明。先不要接数据库。
完成后应该看到：有能打开查看的页面草稿。
从第一屏按顺序点一遍，指出找不到入口或看不懂的地方。展开收起
建议提示词：
请只调整我指出的这些位置：【填写】。保留其他已确认内容，完成后告诉我从哪里再看。
完成后应该看到：能找到主要输入、按钮和结果。
把确认的页面和操作方法保存下来。展开收起
建议提示词：
请把确认的页面安排和按钮作用写入 docs/design.md，区分已经能用和仍是演示的部分。
完成后应该看到：设计文件可以给后面的开发步骤使用。
跟练：个人学习记录（前端 + 后端 + 数据库）
选择这个示例时，沿用同一个 learning-journal 项目逐步完成。已有自己的项目时，对照检查相关要求即可，不必另建项目。
只看输入框、保存按钮、状态提示和历史列表的位置；用明显标记的模拟记录试顺序。
- 做完这一步，应该看到什么？
- 能说出保存前、提交中、成功、失败四种画面；原型还没有真实数据库。
- 做不下去时，先怎么办？
- 看起来能保存也先问是否模拟，不能把演示当后端完成。
04不会具体操作？逐项跟着做
展开收起
先看页面草稿。页面草稿只帮助决定东西放哪里、点击后去哪里。
- 操作后应该看到什么？
- 有能打开查看的页面草稿。
- 没有看到这个结果时，怎么办？
- 打开方式不清楚就要求准确地址或文件位置。
从第一屏按顺序点一遍，指出找不到入口或看不懂的地方。
- 操作后应该看到什么？
- 能找到主要输入、按钮和结果。
- 没有看到这个结果时，怎么办？
- 一次只改具体位置，避免一句“更好看”让工具全部重做。
把确认的页面和操作方法保存下来。
- 操作后应该看到什么？
- 设计文件可以给后面的开发步骤使用。
- 没有看到这个结果时，怎么办？
- 把演示效果误写成已开发完成时，要求纠正。
06遇到问题时，应该怎么处理？
展开收起
原型看起来能用，但不清楚哪些是假数据
- 先检查哪里，确认问题的原因？
- 查看 AI 是否标注了模拟数据、保存位置和真实服务。
- 按下面的方法处理问题
- 要求 AI 按控件列出“仅演示／真实实现／未实现”，然后只验布局和已说明的行为；保存能力留到实际开发时检查。
- 恢复后应该看到
- 重新执行原操作，得到本页要求的实际结果；未执行的检查仍标为未验证。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
我停在“先看关键页面，再决定怎么开发”。预期结果：能看懂第一版操作顺序，清楚哪些只是演示、哪些已经实现。。实际画面/报错：[在这里补充]。请先根据已有文件检查原因，一次只给一个可逆的处理动作，说明在哪里操作、恢复后应看到什么。不要重建项目，不要删除已有成果。07本步材料（填写或复制）
展开收起
上面已经逐项发送并完成的，不必再发下面整段模板。需要整理本步材料时再使用；替换【】后确认，再复制到项目对话。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
先检查能否读取docs/requirements.md、docs/stories.md。缺失或无访问能力时，明确缺项与需本人操作的入口，停止本步执行，不编造文件或前序结论。
读取 docs/requirements.md 的需求与 docs/stories.md 的用户故事。只制作一条核心流程的轻量原型；无界面项目给输入输出样例。说明入口、主操作、结果、返回和适用的失败状态；标注模拟数据及未实现功能。给出查看位置供本人确认，确认后将界面决定记录到 docs/design.md 的交互小节。只做原型，不实现正式业务或选择技术方案。跟练个人学习记录：本步怎么填写／补充提示词
仅当你选择本页全栈跟练时使用：使用下面已合并本步要求的提示词，填好空白后复制发送；不必重复发送上方通用模板。它不授权跳到后续步骤。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
先检查能否读取docs/requirements.md、docs/stories.md。缺失或无访问能力时，明确缺项与需本人操作的入口，停止本步执行，不编造文件或前序结论。
读取 docs/requirements.md 的需求与 docs/stories.md 的用户故事。只制作一条核心流程的轻量原型；无界面项目给输入输出样例。说明入口、主操作、结果、返回和适用的失败状态；标注模拟数据及未实现功能。给出查看位置供本人确认，确认后将界面决定记录到 docs/design.md 的交互小节。只做原型，不实现正式业务或选择技术方案。
本次已选择个人学习记录全栈跟练。
读取 docs/stories.md；原型标注“模拟数据”。仅演示四种状态，交互决定写 docs/design.md，不实现真实保存。08看到这个结果才算完成
能看懂第一版操作顺序，清楚哪些只是演示、哪些已经实现。
09没有看到预期结果，接下来怎么办？
展开收起
打开方式不清楚就要求准确地址或文件位置。
看结果对照（教学示意，不是你的项目结果）
“报名成功”只是演示时，必须标“模拟结果，尚未写入真实记录”。
0202把实际条件交给 AI 选做法待核对展开这一步收起这一步
01开始前准备什么，做完后留下什么？
已经确认的页面草稿，以及使用设备、费用和保存数据的要求。
后面准备环境时知道要安装什么、先试什么。
这一步要让 AI 读取和保存哪些文件？
在所选工具的项目对话中，让它先打开下面的文件。找不到时，点击下方链接回到创建文件的步骤。
先让 AI 读取这些材料：docs/requirements.md · docs/stories.md · docs/design.md
让 AI 将结果保存到：docs/design.md
02这一步要帮你解决什么问题？
请工具解释准备用哪些东西来做项目，以及会不会产生费用。
弄懂原理，再试着自己判断
这个概念是什么意思？
前端是看得见的页面；后端处理请求；数据库保存记录。你的项目需要哪部分，就准备哪部分。
换个情况，你会怎样判断？
为什么本机保存不等于手机电脑自动同步？
查看参考答案
本机资料只在当前设备或浏览器中。跨设备需要约定的数据服务、身份或同步方式，并用另一设备验证，不会自动发生。
试着用自己的话回答；拿不准时先对照上面的解释，再用自己的项目举例核对。
03这一步具体怎么做？
展开收起
技术选择资料页，再回到项目对话
每次只发送当前这一项的提示词：选中框内文字复制（Mac 按 ⌘C，Windows 按 Ctrl+C），切到所选工具的项目对话，粘贴后把【】替换成自己的内容，再点发送。等工具回复并核对“完成后应该看到”的结果，再做下一项。
告诉工具项目给谁用、需要保存什么、预算多少。让它解释准备采用的做法。展开收起
建议提示词：
请读已确认需求和 docs/design.md，推荐一种适合我的做法。分别解释页面怎么做、处理请求的程序在哪里运行、数据存在哪里、需要什么费用。先不要安装。
完成后应该看到：你能理解三个部分分别负责什么。
确认适合自己的做法，并把决定写进设计文件。展开收起
建议提示词：
请把我确认的做法、需要准备的账号和最难部分的试验方法写入 docs/design.md。未确定的条件保留待定。
完成后应该看到：后面准备环境时知道要安装什么、先试什么。
跟练：个人学习记录（前端 + 后端 + 数据库）
选择这个示例时，沿用同一个 learning-journal 项目逐步完成。已有自己的项目时，对照检查相关要求即可，不必另建项目。
认识三部分：浏览器里的 HTML/CSS/JavaScript 是页面；Python Flask 接收请求；SQLite 把记录放在电脑文件里。
- 做完这一步，应该看到什么？
- docs/design.md 写出每部分做什么、文件放哪、如何一起启动。
- 做不下去时，先怎么办？
- 已有项目使用另一套已确认技术时沿用，不能为了跟练重建；请 AI 给相同三层的对应位置。
- 前端：你在浏览器看到、填写和点击的页面。
- 后端：收到保存请求后检查内容，决定能不能保存。接口就是页面向它交材料的入口。
- 数据库：按编号保管记录。SQLite 是实际文件，不是浏览器缓存，也不是另一个必须注册的网站。
04不会具体操作？逐项跟着做
展开收起
告诉工具项目给谁用、需要保存什么、预算多少。让它解释准备采用的做法。
- 操作后应该看到什么？
- 你能理解三个部分分别负责什么。
- 没有看到这个结果时，怎么办？
- 方案中有陌生名称时，让工具先解释用途，再谈是否使用。
确认适合自己的做法，并把决定写进设计文件。
- 操作后应该看到什么？
- 后面准备环境时知道要安装什么、先试什么。
- 没有看到这个结果时，怎么办？
- 关键条件不能满足时先换做法，不开始大量开发。
06遇到问题时，应该怎么处理？
展开收起
我不知道“本机”和“共享”怎么选
- 先检查哪里，确认问题的原因？
- 是否需要在另一部手机看到同一条记录？
- 按下面的方法处理问题
- 不需要就先只在当前浏览器保存。需要就记录共享需求，让 AI 说明服务、账号和费用；不要把本机演示当已同步。
- 恢复后应该看到
- 方案和实际使用方式一致，未知费用没有被当作免费。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
我停在“把实际条件交给 AI 选做法”。预期结果：知道记录存在哪里、是否能换设备看、需要哪些费用。。实际画面/报错：[在这里补充]。请先根据已有文件检查原因，一次只给一个可逆的处理动作，说明在哪里操作、恢复后应看到什么。不要重建项目，不要删除已有成果。07本步材料（填写或复制）
展开收起
上面已经逐项发送并完成的，不必再发下面整段模板。需要整理本步材料时再使用；替换【】后确认，再复制到项目对话。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
先检查能否读取docs/requirements.md、docs/stories.md、docs/design.md。缺失或无访问能力时，明确缺项与需本人操作的入口，停止本步执行，不编造文件或前序结论。
你用的是什么设备和操作系统：【填写】
你愿意为这个项目花多少钱：【填写或尚未确定】
谁会使用，需要保存资料或在不同设备上查看吗：【填写本机/多人、是否保存、是否跨设备；未知写尚未确定】
读取 docs/requirements.md 与 docs/design.md 中的交互决定，只建议满足已确认范围的技术方案。解释推荐理由、费用、限制和数据位置；优先沿用已有项目。关键条件未知时先询问。本人确认后，将方案保存到 docs/design.md 的技术方案小节，保留交互内容。本次不安装、不初始化、不开发。 将最难能力和交付资格的最小验证写入设计，列设备/账号前提、预期结果及失败时替代方案；实验在环境准备后执行。跟练个人学习记录：本步怎么填写／补充提示词
仅当你选择本页全栈跟练时使用：使用下面已合并本步要求的提示词，填好空白后复制发送；不必重复发送上方通用模板。它不授权跳到后续步骤。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
先检查能否读取docs/requirements.md、docs/stories.md、docs/design.md。缺失或无访问能力时，明确缺项与需本人操作的入口，停止本步执行，不编造文件或前序结论。
你用的是什么设备和操作系统：【填写】
你愿意为这个项目花多少钱：【填写或尚未确定】
谁会使用，需要保存资料或在不同设备上查看吗：【填写本机/多人、是否保存、是否跨设备；未知写尚未确定】
读取 docs/requirements.md 与 docs/design.md 中的交互决定，只建议满足已确认范围的技术方案。解释推荐理由、费用、限制和数据位置；优先沿用已有项目。关键条件未知时先询问。本人确认后，将方案保存到 docs/design.md 的技术方案小节，保留交互内容。本次不安装、不初始化、不开发。 将最难能力和交付资格的最小验证写入设计，列设备/账号前提、预期结果及失败时替代方案；实验在环境准备后执行。
本次已选择个人学习记录全栈跟练。
新练习建议 Flask 同时提供页面与 /api/entries，避免两个服务跨域；SQLite 固定 instance/journal.sqlite 路径，参数化查询。本机单人无登录，不适合直接公开。解释依赖和本机成本，待本人确认再保存设计，不安装。08看到这个结果才算完成
知道记录存在哪里、是否能换设备看、需要哪些费用。
09没有看到预期结果，接下来怎么办？
展开收起
方案中有陌生名称时，让工具先解释用途，再谈是否使用。
看结果对照（教学示意，不是你的项目结果）
例如必须读取手机本地文件：先在目标设备验证选择文件与权限，再决定是否采用该方案。
看示例或查资料
本节点出现的词按出现顺序排列，点开可查完整解释
更多问题与排障资料
遇到卡点，从现象开始查
2 种情况以下路径整理自官方文档与公开求助，不代表发生频率。先按现象检查，再核对处理结果。
技术名单很多，无法比较
看到的现象：AI 给十个框架，却没有说明为什么适合当前项目。
- 先检查哪些地方？
列出设备、登录、数据保存、公开访问和预算要求。
- 接着处理
要求最多两套方案，逐项比较能否满足要求、维护工作和迁移代价；已有项目优先沿用，先做一条小流程证明可行。
- 这样才算解决
选择记录有理由和限制，并有最小可运行验证。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
我在【技术名单很多，无法比较】这一步遇到问题。
项目与工具：[填写名称、版本和项目路径]
实际现象：[填写操作步骤、报错原文或附截图；隐去密钥和个人数据]
期望结果：[填写实际目标]
请先检查：列出设备、登录、数据保存、公开访问和预算要求。
处理方向：要求最多两套方案，逐项比较能否满足要求、维护工作和迁移代价；已有项目优先沿用，先做一条小流程证明可行。
请先说明证据和原因，再执行最小范围修复；保留已有改动，不扩展功能。需要我操作时，一次给出一个位置明确的动作，并说明应当看到什么。
验证标准：选择记录有理由和限制，并有最小可运行验证。
最后列出实际验证结果、未验证项和下一步。查证依据Lovable · Prompting best practices ↗npm · Install Node.js and npm ↗
订阅了 AI 仍被要求充值
看到的现象：以为工具月费包含模型 API、数据库和部署全部费用。
- 先检查哪些地方？
分别查看工具订阅、模型/API、托管、数据库及外部服务的计费页面。
- 接着处理
列出本项目会用到的收费账户、免费额度及超额行为；先用测试数据做最小验证，未同意不启用付费升级。
- 这样才算解决
每项服务有费用归属、预算上限或提醒；不把提醒误当强制封顶。
先在模板中补充实际材料，确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”，示例可以自行替换。
已确认 · 以下是本次专属内容，可一键复制
我在【订阅了 AI 仍被要求充值】这一步遇到问题。
项目与工具：[填写名称、版本和项目路径]
实际现象：[填写操作步骤、报错原文或附截图；隐去密钥和个人数据]
期望结果：[填写实际目标]
请先检查：分别查看工具订阅、模型/API、托管、数据库及外部服务的计费页面。
处理方向：列出本项目会用到的收费账户、免费额度及超额行为；先用测试数据做最小验证，未同意不启用付费升级。
请先说明证据和原因，再执行最小范围修复；保留已有改动，不扩展功能。需要我操作时，一次给出一个位置明确的动作，并说明应当看到什么。
验证标准：每项服务有费用归属、预算上限或提醒；不把提醒误当强制封顶。
最后列出实际验证结果、未验证项和下一步。本节点可查的资料
遇到对应问题再查，资料不是额外必做步骤。
- 怎么选技术，不被名词绕晕？
范围与关键交互明确，需要确认实现方式时。
- 如何描述界面，需要哪种组件？
已知道用户要做的动作，需要安排界面时。
我的项目材料与备份
材料只存于这台设备的当前浏览器；不是项目文件，也不会自动发给 AI。中英文模板分别保存，项目选择和学习进度共用。不要在这里填写密码或 API Key。
包括想法、进度、各步模板、人工核对记录及选型条件；不包含你的真实项目代码。恢复会建立一个新草稿，不覆盖已有项目。
下载或导入不工作？复制备份文本恢复
草稿与进度只保存在当前浏览器。
按顺序完成本页操作，遇到问题时展开对应的检查和处理方法。