Vibe GuideBETA

按计划分步开发并测试

预览是打开正在开发的作品,看看真实页面和功能是什么样。

做完这一节点,你会得到什么?
每条必做流程都有实际结果。
为什么要有这一节点?

从任务表第一项开始制作,每次亲手看完结果再继续。

开始操作共 4 个步骤 · 按顺序完成

0104打开第一张属于自己的页面待核对展开这一步收起这一步
让 AI 完成任务表中的第一项
打开实际入口
亲手检查本次制作的功能
操作示意 · 非工具截图

01开始前准备什么,做完后留下什么?

开始前需要准备什么?

能够运行的最小项目和任务表中的第一项。

做完后要留下什么?

任务表记录真实进度,可以继续下一项。

这一步要让 AI 读取和保存哪些文件?

在所选工具的项目对话中,让它先打开下面的文件。找不到时,点击下方链接回到创建文件的步骤。

先让 AI 读取这些材料:docs/requirements.md · docs/stories.md · docs/design.md · tasks/todo.md · README.md

让 AI 将结果保存到:tasks/todo.md · docs/checks.md

缺少这些材料?回到创建它们的步骤 →

02这一步要帮你解决什么问题?

从任务表第一项开始制作,每次亲手看完结果再继续。

弄懂原理,再试着自己判断

这个概念是什么意思?

预览是打开正在开发的作品,看看真实页面和功能是什么样。

换个情况,你会怎样判断?

关闭启动窗口后,为什么地址可能打不开?

查看参考答案

本地网址通常由该窗口运行的服务提供。关闭进程后它停止响应,按README重启即可,不需要重新开发。

试着用自己的话回答;拿不准时先对照上面的解释,再用自己的项目举例核对。

03这一步具体怎么做?

展开收起

AI 给出的预览地址或 HTML 文件

每次只发送当前这一项的提示词:选中框内文字复制(Mac 按 ⌘C,Windows 按 Ctrl+C),切到所选工具的项目对话,粘贴后把【】替换成自己的内容,再点发送。等工具回复并核对“完成后应该看到”的结果,再做下一项。

  1. 让工具先读任务表,只做下一项尚未完成的任务。展开收起

    建议提示词:

    请读 tasks/todo.md,找出下一项已经具备开始条件的任务。告诉我这次做什么,再只完成这一项。保留其他文件,完成后给我打开作品的方法和测试结果。

    完成后应该看到:得到这次修改的说明和能打开的作品入口。

  2. 打开作品,亲自操作这一项功能。不要只读工具的“完成”回复。展开收起

    完成后应该看到:实际结果与任务表中写的相同,或能指出哪里不同。

  3. 把实际结果告诉工具,再决定做下一项还是先修问题。展开收起

    建议提示词:

    我的实际操作和结果是:【填写】。请更新 tasks/todo.md 和 docs/checks.md;只有已经检查通过的任务才标完成。保存本次已确认修改的本地版本,不推送。

    完成后应该看到:任务表记录真实进度,可以继续下一项。

跟练:个人学习记录(前端 + 后端 + 数据库)

选择这个示例时,沿用同一个 learning-journal 项目逐步完成。已有自己的项目时,对照检查相关要求即可,不必另建项目。

让 Codex 只做第一项页面任务,点击回复里的实际 http 网址。此时能看见输入框和列表占位,不要求保存成功。

做完这一步,应该看到什么?
浏览器地址以 http 开头;页面明确未接数据库,不显示假的保存成功。
做不下去时,先怎么办?
双击 index.html 打开的 file 地址不用于本全栈练习;回到服务给出的实际网址。

04不会具体操作?逐项跟着做

展开收起
  1. 让工具先读任务表,只做下一项尚未完成的任务。

    操作后应该看到什么?
    得到这次修改的说明和能打开的作品入口。
    没有看到这个结果时,怎么办?
    工具一次做了很多无关功能时,先让它说明改动,回到已确认任务。
  2. 打开作品,亲自操作这一项功能。不要只读工具的“完成”回复。

    操作后应该看到什么?
    实际结果与任务表中写的相同,或能指出哪里不同。
    没有看到这个结果时,怎么办?
    打不开就把网址和报错发给工具;没有测试条件就先记未测试。
  3. 把实际结果告诉工具,再决定做下一项还是先修问题。

    操作后应该看到什么?
    任务表记录真实进度,可以继续下一项。
    没有看到这个结果时,怎么办?
    失败就保留现象,按后面的反馈和修复步骤处理。

05这一步出现的词

展开收起

迭代 ↗

根据反馈完成一轮改进。

先卖早餐,再根据顾客意见调整菜单。

提交 ↗

一次可追踪的版本变化记录。

给一版图纸编号并写修改说明。

06遇到问题时,应该怎么处理?

展开收起

地址打不开或一直加载

先检查哪里,确认问题的原因?
确认使用完整地址;询问 AI 当前服务是否还在运行。
按下面的方法处理问题
把地址和浏览器报错一起交给 AI,要求实际检查启动结果和端口;保持启动窗口运行。不要仅更换一个猜测的端口。
恢复后应该看到
重新打开同一个已核验地址,可以看到项目标题。

问题不在列表里?请 AI 排查

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

07本步材料(填写或复制)

展开收起

上面已经逐项发送并完成的,不必再发下面整段模板。需要整理本步材料时再使用;替换【】后确认,再复制到项目对话。

这一步的提示词模板

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

跟练个人学习记录:本步怎么填写/补充提示词

仅当你选择本页全栈跟练时使用:使用下面已合并本步要求的提示词,填好空白后复制发送;不必重复发送上方通用模板。它不授权跳到后续步骤。

全栈跟练:本步提示词

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

08看到这个结果才算完成

浏览器里出现自己的项目页面,能够说明是从哪里打开的。

09没有看到预期结果,接下来怎么办?

展开收起

工具一次做了很多无关功能时,先让它说明改动,回到已确认任务。

看结果对照(教学示意,不是你的项目结果)
T01入口:已检查;T02报名:待做;T03取消:待做 → 当前还不能进入“全部功能验收通过”。
记录本次核对结论与版本

这是本人的记录,不是网站自动检测。改动项目后旧结论不能证明新版本通过;未测试或失败时先补测/反馈。

0204只调整眼前这一页待核对展开这一步收起这一步
指出页面上要修改的位置
说明这处希望改成什么样
打开修改后的页面对照检查
操作示意 · 非工具截图

01开始前准备什么,做完后留下什么?

开始前需要准备什么?

已经打开的项目页面,以及一处你想改进的地方。

做完后要留下什么?

页面清楚可用,原功能没有被改坏。

这一步要让 AI 读取和保存哪些文件?

在所选工具的项目对话中,让它先打开下面的文件。找不到时,点击下方链接回到创建文件的步骤。

先让 AI 读取这些材料:docs/design.md · tasks/todo.md

让 AI 将结果保存到:docs/checks.md

缺少这些材料?回到创建它们的步骤 →

02这一步要帮你解决什么问题?

让使用者看得懂文字,找得到输入框和按钮。

弄懂原理,再试着自己判断

这个概念是什么意思?

界面就是使用者看到和操作的页面;这里先改一处具体问题。

换个情况,你会怎样判断?

这次调整让哪个具体操作更容易了?

查看参考答案

应能指出具体改善,例如更容易找到报名入口、错误原因可见;只说“更漂亮”不足以判断操作是否改善。

试着用自己的话回答;拿不准时先对照上面的解释,再用自己的项目举例核对。

03这一步具体怎么做?

展开收起

刚打开的项目页面与 AI 对话

每次只发送当前这一项的提示词:选中框内文字复制(Mac 按 ⌘C,Windows 按 Ctrl+C),切到所选工具的项目对话,粘贴后把【】替换成自己的内容,再点发送。等工具回复并核对“完成后应该看到”的结果,再做下一项。

  1. 打开自己的作品,指出一处用户找不到或看不懂的位置,例如输入框没有名字、按钮挡住文字。展开收起

    完成后应该看到:知道具体要改哪个页面、哪个位置。

  2. 把这一处问题和希望的效果告诉工具。展开收起

    建议提示词:

    请只修改【页面和具体位置】:现在是【实际样子】,我希望【清楚的结果】。保留其他已确认页面和功能,修改后给我查看地址。

    完成后应该看到:能打开修改后的页面。

  3. 再操作一次这项功能,然后缩窄窗口,确认文字、输入框和按钮仍能使用。展开收起

    完成后应该看到:页面清楚可用,原功能没有被改坏。

跟练:个人学习记录(前端 + 后端 + 数据库)

选择这个示例时,沿用同一个 learning-journal 项目逐步完成。已有自己的项目时,对照检查相关要求即可,不必另建项目。

对照原型核对标题、内容、按钮和提示是否看得懂;手机窄屏也能填写。

做完这一步,应该看到什么?
输入框有名字;保存按钮和结果提示可见,文字不被截断。
做不下去时,先怎么办?
界面已符合设计就记录通过,不为了走步骤强行改颜色。

04不会具体操作?逐项跟着做

展开收起
  1. 打开自己的作品,指出一处用户找不到或看不懂的位置,例如输入框没有名字、按钮挡住文字。

    操作后应该看到什么?
    知道具体要改哪个页面、哪个位置。
    没有看到这个结果时,怎么办?
    先解决妨碍使用的地方,不用一句“整体优化”让工具重做全部页面。
  2. 把这一处问题和希望的效果告诉工具。

    操作后应该看到什么?
    能打开修改后的页面。
    没有看到这个结果时,怎么办?
    结果不对就描述具体差别,继续只改这一处。
  3. 再操作一次这项功能,然后缩窄窗口,确认文字、输入框和按钮仍能使用。

    操作后应该看到什么?
    页面清楚可用,原功能没有被改坏。
    没有看到这个结果时,怎么办?
    发现遮挡或点击失效就记录位置和画面,再请工具修这一处。

05这一步出现的词

展开收起

组件 ↗

可以独立描述或复用的一块界面与行为。

积木块可组合,但还要规定怎样连接。

状态 ↗

决定程序或界面当前表现的数据与条件。

同一窗口有营业、排队、暂停等状态。

无障碍 ↗

让不同能力与使用方式的人能使用产品。

楼梯旁提供坡道,不只是装饰。

06遇到问题时,应该怎么处理?

展开收起

改外观后其他功能也变了

先检查哪里,确认问题的原因?
对照上一份可用版本,指出一个具体变化。
按下面的方法处理问题
让 AI 比较改动,只修复受影响行为;恢复版本前先说明影响,不覆盖新写的内容。
恢复后应该看到
外观符合要求,原保存流程仍能使用。

问题不在列表里?请 AI 排查

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

07本步材料(填写或复制)

展开收起

上面已经逐项发送并完成的,不必再发下面整段模板。需要整理本步材料时再使用;替换【】后确认,再复制到项目对话。

这一步的提示词模板

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

跟练个人学习记录:本步怎么填写/补充提示词

仅当你选择本页全栈跟练时使用:使用下面已合并本步要求的提示词,填好空白后复制发送;不必重复发送上方通用模板。它不授权跳到后续步骤。

全栈跟练:本步提示词

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

08看到这个结果才算完成

适用的界面调整已核对,原功能仍可用;无界面项目记录不适用。

09没有看到预期结果,接下来怎么办?

展开收起

先解决妨碍使用的地方,不用一句“整体优化”让工具重做全部页面。

看结果对照(教学示意,不是你的项目结果)
位置:活动页报名按钮。处理中禁重复提交;失败说明原因并可重试;成功显示实际报名结果。
看示例或查资料

把“保存记录”按钮放在输入框下面,保留保存行为和历史列表不变。

不知道控件叫什么?按用途查找 →

记录本次核对结论与版本

这是本人的记录,不是网站自动检测。改动项目后旧结论不能证明新版本通过;未测试或失败时先补测/反馈。

0304让“保存”真正留下内容待核对展开这一步收起这一步
输入内容
点击保存
刷新查看
操作示意 · 非工具截图

01开始前准备什么,做完后留下什么?

开始前需要准备什么?

已经可以填写内容的页面,以及需求中约定的保存方式。

做完后要留下什么?

记录在设计约定的位置保留,内容与保存时相同。

这一步要让 AI 读取和保存哪些文件?

在所选工具的项目对话中,让它先打开下面的文件。找不到时,点击下方链接回到创建文件的步骤。

先让 AI 读取这些材料:docs/requirements.md · docs/design.md · tasks/todo.md

让 AI 将结果保存到:docs/checks.md

缺少这些材料?回到创建它们的步骤 →

02这一步要帮你解决什么问题?

让用户填写的内容真正存下来,关掉页面后还能找回。

弄懂原理,再试着自己判断

这个概念是什么意思?

看到“保存成功”还要查记录是否真的写入;刷新、重新打开后也应读得到。

换个情况,你会怎样判断?

怎样证明保存结果不是只留在当前画面?

查看参考答案

在约定存放位置读回,再关闭并重开;共享需求还需另一用户/设备检查。仅当前界面显示不证明持久保存。

试着用自己的话回答;拿不准时先对照上面的解释,再用自己的项目举例核对。

03这一步具体怎么做?

展开收起

项目的输入框、保存按钮和历史列表

每次只发送当前这一项的提示词:选中框内文字复制(Mac 按 ⌘C,Windows 按 Ctrl+C),切到所选工具的项目对话,粘贴后把【】替换成自己的内容,再点发送。等工具回复并核对“完成后应该看到”的结果,再做下一项。

  1. 先建立真正存放记录的地方。数据库就像项目的登记本,页面关闭后记录还在里面。先看设计文件:不用保存的项目跳过本步;只保存在浏览器的项目按原方案检查,不增加后端或数据库。下面的数据库操作用于已经选择数据库的项目。展开收起

    建议提示词:

    请读需求,检查本项目的数据应该保存在哪里。需要数据库时,先检查已有内容,再建立缺少的表,告诉我实际位置、每条记录保存哪些字段。不要清空已有数据。

    完成后应该看到:知道数据位置和每条记录会保存的内容。

  2. 已选择后端的项目:让后端能够保存和读取记录。后端是收到页面请求后实际处理事情的程序。展开收起

    建议提示词:

    请实现或检查保存一条记录和读取列表的后端接口。接口就是页面发送或索取内容的入口。用测试记录检查保存结果,告诉我记录编号,再核对数据库中同一条记录。空白内容应被拒绝。

    完成后应该看到:合法内容有真实编号,数据库里能找到,空白内容没有写入。

  3. 已选择后端的项目:把页面按钮连接到刚才的保存功能。展开收起

    建议提示词:

    请把页面的保存按钮连接到已检查的后端。保存期间避免重复点击,失败保留输入并解释原因,真正保存成功后再显示成功。告诉我打开哪个地址来试。

    完成后应该看到:点一次保存后,能在列表里找到刚才的内容。

  4. 保存一条容易辨认的测试内容,例如“保存测试 001”,刷新并重新打开页面查找它。设计要求数据在后端共享时,再用另一个浏览器打开同一网址;只存在浏览器里的资料应在原浏览器检查。展开收起

    完成后应该看到:记录在设计约定的位置保留,内容与保存时相同。

跟练:个人学习记录(前端 + 后端 + 数据库)

选择这个示例时,沿用同一个 learning-journal 项目逐步完成。已有自己的项目时,对照检查相关要求即可,不必另建项目。

按上方“03 你要做的”,依次准备数据库、检查后端、连接页面,再重新打开查看记录。每完成一项,核对实际结果再向所选工具发送下一项。

做完这一步,应该看到什么?
输入“练习 A”保存后有真实记录编号;第二浏览器访问同一服务也能读到。
做不下去时,先怎么办?
只有页面出现一行还不够;要求核对真实 SQLite 文件中的同一编号,禁止清库重建来修复。
对照具体报错,找到下一步

保存显示 404,或返回一段 HTML

先检查哪些地方?
核对 /api/entries 是否打到了正在运行的 Flask 服务。
按下面的方法处理问题
把实际网址、请求路径和后端日志交给 Codex 对照路由;本例页面和接口用同一服务,不另开静态文件。
问题解决后,应该看到什么?
GET 返回列表,POST 合法内容返回记录编号。

提示 CORS 或跨域

先检查哪些地方?
先核对页面是否从 file:// 或另一个端口打开。
按下面的方法处理问题
本例打开 Flask 提供的 http 地址,页面使用相对 /api/entries。不要关闭浏览器安全检查;不同服务的项目请按设计设置指定来源。
问题解决后,应该看到什么?
页面请求同一服务,不再出现跨域阻拦。

no such table: entries

先检查哪些地方?
数据库文件存在不代表里面已经建好表;先核对完整路径。
按下面的方法处理问题
让 Codex 在正确文件上执行已确认的非破坏性建表,不能删除数据库或复制会清空表的示例命令。
问题解决后,应该看到什么?
entries 表存在,原有记录未被清除。

database is locked

先检查哪些地方?
检查是否有另一测试服务、数据库编辑器或未结束的写入占着同一文件。
按下面的方法处理问题
只结束确认属于本练习的占用,让 Codex 检查事务与连接是否及时关闭;不要删除锁文件或原数据库。
问题解决后,应该看到什么?
写入恢复,已保存记录仍可读取。

保存提示成功,刷新后记录不见了

先检查哪些地方?
记下唯一测试标题、页面网址和记录编号;请工具核对是否只更新了页面或浏览器缓存。
按下面的方法处理问题
请工具只读对照保存请求结果、数据库中的同一编号和读取列表结果,先找出在哪一步丢失。页面须等后端实际保存成功才显示成功,不用固定成功提示掩盖问题。
问题解决后,应该看到什么?
真实数据库、读取接口和刷新后的页面显示同一条测试记录。

打不开网址,提示连接被拒绝

先检查哪些地方?
核对地址是否与本项目启动输出一致,以及服务是否仍在运行。端口就是网址中冒号后的服务编号。
按下面的方法处理问题
把网址和最近的启动错误交给工具,让它检查本项目进程。未启动就按该项目说明启动;端口被占用时先查归属,再选择空闲端口并更新打开地址,不结束不认识的进程。
问题解决后,应该看到什么?
服务持续运行,使用实际启动地址能打开页面;然后再检查保存功能。

保存失败,但列表里已经出现记录

先检查哪些地方?
服务器可能已保存,只是返回结果途中断开;先按唯一测试标题查看列表和数据库。
按下面的方法处理问题
暂不再次提交。把已存在的编号与失败提示交给工具,核对响应处理与重复提交保护;同一次操作是否重复要按编号和内容检查,不能直接删除所有相同标题。
问题解决后,应该看到什么?
确认该次提交是否已保存,界面给出准确反馈;旧记录保留。
  1. 建表:让 Codex 报告数据库完整路径、entries 表和字段;重复启动不清空旧数据。
  2. 接口:GET 是读取,POST 是提交。先用测试内容验证接口保存和返回编号,再试全空格输入应被拒绝。
  3. 连接页面和后端:在网页点击保存,页面请求同一个服务的 /api/entries。只有后端保存成功才提示成功;失败保留输入。
  4. 读回:复制正在运行的实际网址到另一浏览器,查看同一编号。由 Codex 只读核对数据库记录;你不必先学会 SQL。
参考项目实测截图:通过后端保存到数据库后,页面显示编号 1 和历史记录。
参考项目的实际运行截图。用于对照现象,不是你的项目验收结果。点击可放大。

Flask 安装依据 · SQLite 与后端连接依据

04不会具体操作?逐项跟着做

展开收起
  1. 先建立真正存放记录的地方。数据库就像项目的登记本,页面关闭后记录还在里面。先看设计文件:不用保存的项目跳过本步;只保存在浏览器的项目按原方案检查,不增加后端或数据库。下面的数据库操作用于已经选择数据库的项目。

    操作后应该看到什么?
    知道数据位置和每条记录会保存的内容。
    没有看到这个结果时,怎么办?
    工具只说“完成”时,追问实际位置和表名;别删库重建。
  2. 已选择后端的项目:让后端能够保存和读取记录。后端是收到页面请求后实际处理事情的程序。

    操作后应该看到什么?
    合法内容有真实编号,数据库里能找到,空白内容没有写入。
    没有看到这个结果时,怎么办?
    保存失败就把错误原文保留,请工具查请求是否到达后端。
  3. 已选择后端的项目:把页面按钮连接到刚才的保存功能。

    操作后应该看到什么?
    点一次保存后,能在列表里找到刚才的内容。
    没有看到这个结果时,怎么办?
    只在页面多出一行还不够;请工具用编号核对数据库。
  4. 保存一条容易辨认的测试内容,例如“保存测试 001”,刷新并重新打开页面查找它。设计要求数据在后端共享时,再用另一个浏览器打开同一网址;只存在浏览器里的资料应在原浏览器检查。

    操作后应该看到什么?
    记录在设计约定的位置保留,内容与保存时相同。
    没有看到这个结果时,怎么办?
    找不到先核对网址、账号和数据库位置,保留原数据。

05这一步出现的词

展开收起

数据库 ↗

按规则保存、查找和更新数据的系统。

能按条件查找的账房。

应用程序接口 ↗

程序之间按约定调用能力和交换数据的接口。

菜单规定能点什么和需要填哪些信息。

授权/权限 ↗

决定某身份可以进行哪些操作。

身份确认后仍要看门卡能开哪些门。

06遇到问题时,应该怎么处理?

展开收起

保存不了,或刷新后记录不见了

先检查哪里,确认问题的原因?
先比较两次打开的完整地址和浏览器。localhost 与 127.0.0.1、不同端口、隐私窗口可能不是同一份保存空间。
按下面的方法处理问题
回到原来的浏览器和完整地址再查。仍找不到时保留输入和错误,发送本页求助材料,让 AI 核对实际写入和读取;不要清空浏览器资料。
恢复后应该看到
在同一位置保存新测试记录,刷新后仍能找到;旧记录恢复情况单独说明。

问题不在列表里?请 AI 排查

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

07本步材料(填写或复制)

展开收起

上面已经逐项发送并完成的,不必再发下面整段模板。需要整理本步材料时再使用;替换【】后确认,再复制到项目对话。

这一步的提示词模板

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

跟练个人学习记录:本步怎么填写/补充提示词

仅当你选择本页全栈跟练时使用:使用下面已合并本步要求的提示词,填好空白后复制发送;不必重复发送上方通用模板。它不授权跳到后续步骤。

全栈跟练:本步提示词

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

08看到这个结果才算完成

需求中的保存与读取结果已实际验证;不需要保存的项目明确记录不适用。

09没有看到预期结果,接下来怎么办?

展开收起

工具只说“完成”时,追问实际位置和表名;别删库重建。

看结果对照(教学示意,不是你的项目结果)
两人抢最后1个名额:只能1人成功;另一人看到已满。重复请求不能多占名额。
按我的项目类型,展开具体操作

只选择项目实际需要的分支。每次只做一项,使用该项下面的提示词;已逐项完成时,不必再发送末尾的完整模板。命令、配置值由AI读取当前项目确定;账号和渠道条件以当前官方说明为准。

多人共享与名额规则

需求要求多人查看或修改同一份数据时。

  1. 先让工具说明:多人要共同查看哪些记录。

    建议提示词:

    我正在做“多人共享与名额规则”。现在只做这一项:先让工具说明:多人要共同查看哪些记录。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  2. 用两个测试账号打开同一条记录,检查修改后两边是否都能看到。

    建议提示词:

    我正在做“多人共享与名额规则”。现在只做这一项:用两个测试账号打开同一条记录,检查修改后两边是否都能看到。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  3. 如果有人数限制,再试一次争抢最后一个名额。

    建议提示词:

    我正在做“多人共享与名额规则”。现在只做这一项:如果有人数限制,再试一次争抢最后一个名额。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。

怎样检查这个分支已经完成?两个用户能看到应该共享的结果;不会超额、重复计数或越权。

本分支提示词

多人共享与名额规则

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

登录与权限

需求明确有账号或不同角色时。

  1. 先打开需求文档,确认哪些人能看哪些内容。

    建议提示词:

    我正在做“登录与权限”。现在只做这一项:先打开需求文档,确认哪些人能看哪些内容。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  2. 按工具说明创建两个只用于测试的账号,分别登录。

    建议提示词:

    我正在做“登录与权限”。现在只做这一项:按工具说明创建两个只用于测试的账号,分别登录。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  3. 用账号 A 尝试打开账号 B 的私人记录,再退出账号试一次。

    建议提示词:

    我正在做“登录与权限”。现在只做这一项:用账号 A 尝试打开账号 B 的私人记录,再退出账号试一次。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。

怎样检查这个分支已经完成?各角色允许的动作可用,不允许的动作确实被拒绝。

本分支提示词

登录与权限

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

API或AI能力接入

项目确实需要调用外部服务时。

  1. 打开所选服务的官网,先看清费用和测试额度。

    建议提示词:

    我正在做“API或AI能力接入”。现在只做这一项:打开所选服务的官网,先看清费用和测试额度。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  2. 让工具指出填写密钥的具体位置,再由自己填写。

    建议提示词:

    我正在做“API或AI能力接入”。现在只做这一项:让工具指出填写密钥的具体位置,再由自己填写。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  3. 先测试一次请求,成功后再让页面调用;失败时看看页面怎么提示。

    建议提示词:

    我正在做“API或AI能力接入”。现在只做这一项:先测试一次请求,成功后再让页面调用;失败时看看页面怎么提示。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。

怎样检查这个分支已经完成?真实最小调用成功;密钥不在网页或仓库;失败不会伪装成功。

本分支提示词

API或AI能力接入

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

文件导入、处理与导出

整理器、转换器等读写用户文件的项目。

  1. 复制一份文件用于测试,保留原件。

    建议提示词:

    我正在做“文件导入、处理与导出”。现在只做这一项:复制一份文件用于测试,保留原件。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  2. 选择测试副本,试一次导入、处理和导出。

    建议提示词:

    我正在做“文件导入、处理与导出”。现在只做这一项:选择测试副本,试一次导入、处理和导出。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。
  3. 再次导出同名文件,检查是否提示重名,并确认原件还在。

    建议提示词:

    我正在做“文件导入、处理与导出”。现在只做这一项:再次导出同名文件,检查是否提示重名,并确认原件还在。请先查看我的项目,告诉我在哪里操作、具体怎么做、完成后应看到什么。需要我操作账号时,一次只说明一个动作,等我完成再继续。不要跳到下一项或正式发布。

怎样检查这个分支已经完成?输出可打开且内容正确,原文件保留,失败说明原因。

本分支提示词

文件导入、处理与导出

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

看示例或查资料

需要共享数据?查看另一条保存路径 →

记录本次核对结论与版本

这是本人的记录,不是网站自动检测。改动项目后旧结论不能证明新版本通过;未测试或失败时先补测/反馈。

0404从开始到结束走通一次待核对展开这一步收起这一步
填写一条测试内容
点击完成任务所需的按钮
检查是否得到预期结果
操作示意 · 非工具截图

01开始前准备什么,做完后留下什么?

开始前需要准备什么?

已经能保存并读回内容的项目,以及用户操作步骤。

做完后要留下什么?

每条必做流程都有实际结果。

这一步要让 AI 读取和保存哪些文件?

在所选工具的项目对话中,让它先打开下面的文件。找不到时,点击下方链接回到创建文件的步骤。

先让 AI 读取这些材料:docs/requirements.md · tasks/todo.md

让 AI 将结果保存到:docs/checks.md

缺少这些材料?回到创建它们的步骤 →

02这一步要帮你解决什么问题?

像使用者一样从头做一遍,检查每个步骤能不能接着往下走。

弄懂原理,再试着自己判断

这个概念是什么意思?

完整流程包括打开、输入、提交和看到结果,不能只试一个按钮。

换个情况,你会怎样判断?

从第一次打开项目开始,你能独自完成需求里约定的那件事吗?

查看参考答案

从普通用户入口按步骤操作,不能借助管理员后台补数据或依赖未写出的口头说明;缺任何一步就补入流程。

试着用自己的话回答;拿不准时先对照上面的解释,再用自己的项目举例核对。

03这一步具体怎么做?

展开收起

实际预览页面

每次只发送当前这一项的提示词:选中框内文字复制(Mac 按 ⌘C,Windows 按 Ctrl+C),切到所选工具的项目对话,粘贴后把【】替换成自己的内容,再点发送。等工具回复并核对“完成后应该看到”的结果,再做下一项。

  1. 让工具写一份从打开作品到完成任务的操作清单。展开收起

    建议提示词:

    请读需求和 tasks/todo.md,列一条普通用户完整使用过程。一步只写一个动作,说明输入什么、点击哪里、应该看到什么。没有准备好的功能先标出来。

    完成后应该看到:得到能照着做的清单。

  2. 打开作品,照清单逐项做一遍。每次写下自己真正看到的结果。展开收起

    完成后应该看到:能从开始走到结束,或准确指出停在哪一步。

  3. 把记录交给工具保存,再检查其他必须完成的使用过程。展开收起

    建议提示词:

    请把以下本人测试记录保存到 docs/checks.md:【粘贴操作、预期、实际结果】。通过、失败和没测试的项目分开写,不代替我填写通过。

    完成后应该看到:每条必做流程都有实际结果。

跟练:个人学习记录(前端 + 后端 + 数据库)

选择这个示例时,沿用同一个 learning-journal 项目逐步完成。已有自己的项目时,对照检查相关要求即可,不必另建项目。

从页面输入“练习 B”,点一次保存,看成功提示与列表,再刷新和换浏览器读同一编号。

做完这一步,应该看到什么?
页面、接口和数据库三处的记录编号及内容一致。
做不下去时,先怎么办?
某层查不到先记录断在哪:按钮、请求、写入还是读取;交给反馈步骤,不在测试里顺手改代码。
参考项目实测截图:通过后端保存到数据库后,页面显示编号 1 和历史记录。
参考项目的实际运行截图。用于对照现象,不是你的项目验收结果。点击可放大。

04不会具体操作?逐项跟着做

展开收起
  1. 让工具写一份从打开作品到完成任务的操作清单。

    操作后应该看到什么?
    得到能照着做的清单。
    没有看到这个结果时,怎么办?
    出现没建过的账号或页面时,先回相应步骤准备。
  2. 打开作品,照清单逐项做一遍。每次写下自己真正看到的结果。

    操作后应该看到什么?
    能从开始走到结束,或准确指出停在哪一步。
    没有看到这个结果时,怎么办?
    卡住就停,保留输入、网址和错误,不连续乱点。
  3. 把记录交给工具保存,再检查其他必须完成的使用过程。

    操作后应该看到什么?
    每条必做流程都有实际结果。
    没有看到这个结果时,怎么办?
    有失败先记反馈,修好后重走同一条流程。

05这一步出现的词

展开收起

端到端测试 ↗

从用户入口到结果检查一条完整流程。

从下单到收到货走完一次。

测试用例 ↗

包含准备、动作和预期结果的一项检查。

打开水龙头,看是否出水及是否漏水。

06遇到问题时,应该怎么处理?

展开收起

按钮能点,但没有结果

先检查哪里,确认问题的原因?
观察是没有提示,还是提示成功却没有记录。
按下面的方法处理问题
把具体文字和操作交给 AI,要求比较输入、事件和保存结果,不要只改按钮颜色。
恢复后应该看到
同一操作得到真实结果,不只出现动画。

问题不在列表里?请 AI 排查

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

07本步材料(填写或复制)

展开收起

上面已经逐项发送并完成的,不必再发下面整段模板。需要整理本步材料时再使用;替换【】后确认,再复制到项目对话。

这一步的提示词模板

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

跟练个人学习记录:本步怎么填写/补充提示词

仅当你选择本页全栈跟练时使用:使用下面已合并本步要求的提示词,填好空白后复制发送;不必重复发送上方通用模板。它不授权跳到后续步骤。

全栈跟练:本步提示词

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

08看到这个结果才算完成

本项目核心流程有逐步检查记录,失败和未执行项没有被记为通过。

09没有看到预期结果,接下来怎么办?

展开收起

出现没建过的账号或页面时,先回相应步骤准备。

看结果对照(教学示意,不是你的项目结果)
R01 / 版本abc / 输入测试姓名 / 预期确认+余位减1 / 实际一致 / 证据截图路径 / 通过。
记录本次核对结论与版本

这是本人的记录,不是网站自动检测。改动项目后旧结论不能证明新版本通过;未测试或失败时先补测/反馈。

本节点出现的词按出现顺序排列,点开可查完整解释

更多问题与排障资料

遇到卡点,从现象开始查

2 种情况

以下路径整理自官方文档与公开求助,不代表发生频率。先按现象检查,再核对处理结果。

连续“修复”却越来越坏

看到的现象:同一报错来回出现,还不断改动别的页面。

  1. 先检查哪些地方?

    保留完整报错、复现步骤及首次出错前后的差异。

  2. 接着处理

    暂停大改;让 AI 提出一个可验证原因,先复现,再只改相关位置;失败记录结果后换假设,不盲目重复同一操作。

  3. 这样才算解决

    原步骤通过,相关原有流程仍可用,改动原因可解释。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据Lovable · Project chat and debugging ↗

一次修改影响了多个地方

看到的现象:只要求改按钮,布局、数据或依赖也被重写。

  1. 先检查哪些地方?

    查看 Git 差异,区分本次必要改动与无关改动。

  2. 接着处理

    保留已有用户改动;只撤回本次造成的无关部分,不能整仓库强制重置。随后按明确范围重新修改并检查关联页面。

  3. 这样才算解决

    差异能逐项解释,未要求的页面和行为保持原样。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据Lovable · Project chat and debugging ↗Git · git init ↗

遇到卡点,从现象开始查

2 种情况

以下路径整理自官方文档与公开求助,不代表发生频率。先按现象检查,再核对处理结果。

只说“高级感”,结果不符合预期

看到的现象:不断换颜色但仍说不出哪里不对。

  1. 先检查哪些地方?

    先确定阅读任务、信息优先级与实际参考图。

  2. 接着处理

    提供页面目的、主要操作、疏密、字体层级、颜色和参考图中具体借鉴点;不确定时只做两张代表性小样再选方向。

  3. 这样才算解决

    选定一个方向,有可重复应用的样式记录。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据MDN · Plan a first website ↗MDN · Common web layouts ↗

局部修改变成全站改版

看到的现象:无法准确描述组件位置,AI 猜错了对象。

  1. 先检查哪些地方?

    用页面地址、可见标题和标注截图确定目标,检查是否共享组件。

  2. 接着处理

    按“位置→现在→期望→不变→范围”描述;要求先圈定或复述目标,再只修改该区域;同时检查手机与桌面显示。

  3. 这样才算解决

    指定区域达到目标,其他使用同一组件的页面经过检查。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据MDN · Common web layouts ↗

遇到卡点,从现象开始查

2 种情况

以下路径整理自官方文档与公开求助,不代表发生频率。先按现象检查,再核对处理结果。

数据库有数据,页面却是空的

看到的现象:查询没有明显报错,却返回空数组。

  1. 先检查哪些地方?

    先确认连接的项目、表名、筛选条件和当前登录身份,再查读取策略。

  2. 接着处理

    用测试身份复现;检查查询条件及对应角色的读取权限,按业务补最小权限策略。不要通过关闭 RLS 或把管理密钥放前端解决。

  3. 这样才算解决

    允许的账号能读到应有记录,另一账号仍看不到私有记录。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据Supabase · Empty query results ↗Supabase · Row Level Security ↗Supabase · Original empty-query report ↗

提交显示成功,刷新后数据消失

看到的现象:表单清空了,但记录只存在当前页面。

  1. 先检查哪些地方?

    确认请求是否真正成功,数据写到本地状态、浏览器存储还是服务器数据库。

  2. 接着处理

    只有服务器确认保存后才显示成功;失败保留输入并给重试入口。用测试记录提交,再刷新或重新登录查询。

  3. 这样才算解决

    记录跨刷新仍存在,失败时不会误显示成功。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据Supabase · Row Level Security ↗Playwright · Testing best practices ↗

遇到卡点,从现象开始查

2 种情况

以下路径整理自官方文档与公开求助,不代表发生频率。先按现象检查,再核对处理结果。

重复点击产生多条记录

看到的现象:网络慢时点了多次,出现重复订单或重复操作。

  1. 先检查哪些地方?

    检查按钮等待状态、请求次数和服务端是否防重复。

  2. 接着处理

    提交期间显示处理中并防止重复触发;对需要保证唯一的业务由服务端验证唯一请求,失败允许明确重试。

  3. 这样才算解决

    快速连点和重试测试不会造成不应出现的重复结果。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据Playwright · Testing best practices ↗

跳转或失败后不知道去哪

看到的现象:提交后停在空白页,返回又丢失已填内容。

  1. 先检查哪些地方?

    画出入口、操作、等待、成功、失败和返回六种状态。

  2. 接着处理

    逐段连线,每个状态写一个下一步;成功显示结果入口,失败保留可恢复信息;检查返回与直接打开链接。

  3. 这样才算解决

    从任一状态都有合理出口,主流程和失败恢复都能走通。

把这段发给 AI 协助处理

先在模板中补充实际材料,确认生成后再复制到当前项目的 AI 对话。不确定项写“尚未确定”,示例可以自行替换。

查证依据MDN · Common web layouts ↗Playwright · Testing best practices ↗

本节点可查的资料

遇到对应问题再查,资料不是额外必做步骤。

按本节点查术语 →
我的项目材料与备份

材料只存于这台设备的当前浏览器;不是项目文件,也不会自动发给 AI。中英文模板分别保存,项目选择和学习进度共用。不要在这里填写密码或 API Key。

包括想法、进度、各步模板、人工核对记录及选型条件;不包含你的真实项目代码。恢复会建立一个新草稿,不覆盖已有项目。

下载或导入不工作?复制备份文本恢复

草稿与进度只保存在当前浏览器。

按顺序完成本页操作,遇到问题时展开对应的检查和处理方法。

寻找起点

板块快捷入口

大家在做什么 · AI收益调研 · 50个方向 · GitHub项目完整路线图 · 从想法到上线先记下自己的想法只有“想做一个网站”,不知道写什么整理成可以交给 AI 的项目描述不知道第一版的流程怎么写打开一个能制作文件的 AI 工具无法安装、登录,或界面不一样给项目建一个自己的文件夹侧栏没有“文稿”或找不到文件夹让 AI 打开刚才的文件夹AI 说的是另一个项目建立 Git 仓库,写好项目说明和规则提交失败或要求填写姓名邮箱亲手核对 AI 创建的文件找不到上一步的文件一次回答一个问题AI 问的技术词看不懂确认这版只做哪几件事删减以后只剩外观把约定留成看得懂的说明说明太长,不知道该确认哪句把用户怎样使用写清楚AI 只列功能名,没有使用过程先看关键页面,再决定怎么开发原型看起来能用,但不清楚哪些是假数据把实际条件交给 AI 选做法我不知道“本机”和“共享”怎么选让 AI 列出下一小步第一项只有“完成前端”检查运行环境,启动最小项目安装或启动失败,不知道停在哪里打开第一张属于自己的页面地址打不开或一直加载只调整眼前这一页改外观后其他功能也变了让“保存”真正留下内容保存不了,或刷新后记录不见了从开始到结束走通一次按钮能点,但没有结果试试空白和连续点击出现空记录或重复记录关掉以后,还能重新打开第二天地址打不开对照最初想法,确认真的能用AI 说全部完成,但我仍不会用把试用结果记录成反馈问题偶尔出现,不能稳定重现先确定怎么修、怎样算修好AI 没给计划就开始修改按计划修复,再交给本人复测AI 说修好了,同样的操作仍失败先决定:自己用,还是分享发给别人后打不开检查是否具备交付条件评估说可上线,却没有证据准备交付物,并实际试运行安装包打不开或部署后启动失败确认交付,再检查实际入口自己的电脑能开,其他人打不开可选:把简单网页放到 GitHub Pages正式网址显示 404下次继续时,不用从头讲换对话后 AI 要重新做选择工具 · Codex Claude Cursor Qoder TRAE Kimi 价格首页项目分类和 Agent 沟通 · 提示词与排查技术栈选择前端与 UI · 组件词典术语库 · AI与项目开发 · 生活例子与图解打开工具,确认能操作项目把项目、版本记录和 AI 规则准备好把想要的界面风格说清楚只修改一个地方,让 AI 找准目标后端:保存资料与访问规则测试:亲手检查是否能用部署上线:交付一个真实入口运维:让产品继续可用Web 网站与应用 · 把想法变成一个网址。小程序 · 在用户熟悉的地方,做一个小工具。手机 App · 让一个好想法,成为日常习惯。桌面 App · 把重复的电脑工作,交给自己的工具。

一个面向零基础的实践指南

这是面向零基础的双语实践指南,按 6 个阶段、18 个节点、31 个动作组织。页面中的应用画面是示意图;项目完成情况由使用者核对。