一份给零基础同学的项目教案
一个真实的制作故事：我们如何和 Codex 对话，把不够清楚的想法，慢慢做成能玩、能测试、能分享的作品。
不用先会写代码。
先学会表达、观察、反馈和验证。
01 / 项目成品封面从这里开始 ↘
BEFORE WE START / 这堂课
01说清楚想做什么、给谁用。
02看懂真实反馈怎样变成修改。
03写出需求，并列出一项测试方法。
适合零基础
可在浏览器中离线阅读
FIRST, THE IDEA
这是一个把自我探索放进故事里的免费小程序。用户选择一段旅程，在情景中回答问题，最后得到一份结果报告。
认识自己的性格偏好
发现自己的工作动力
探索应对压力与恢复的方式
请给我现在3个游戏的定位
一个产品可以有很多内容，但每一部分都需要回答：它是给谁用的？用户能从中得到什么？
这两张图来自准备提审时的开发者工具截图，展示三个旅程入口和海岛答题画面。
这一站学到：先把目标讲明白，不用一开始就说出所有技术细节。
MAKE IT VISIBLE
有了三段旅程，接下来要让它们看起来像三个真实的地方。场景、人物、文字和动作，都需要一起考虑。
气泡挡住人脸、有人物说话时一直闭眼。于是继续调整气泡位置，并检查人物的待机和说话表情。
团队逐帧查看人物的睁眼、眨眼和说话姿势，避免把眨眼帧当作默认表情。下面是实际检查用的表情对照图。
这一站学到：把“看起来不对”说具体：哪里、什么时候、希望变成什么样。
WRITE BEFORE VOICE
画面出来后，创作者发现另一个更重要的问题：题目之间接不上，人物说话也不够连贯。
THE TURNING POINT / 一次方向调整
“整个游戏问答，在剧情上不够连贯，很多问题前言不搭后语。”
接着，创作者提出先整理文案和题目，语音合成先不做。这让大家能够先专心检查故事，而不是反复给还在变化的文字配音。
人物为什么相遇、这一站要做什么。
前后是否衔接，选择是否自然。
文案确定后，再合成并检查配音。
正式配音完成后，人物对白会朗读，已经读过的文字逐渐变红。用户还能跳过或重听。正文始终保留，声音暂时不可用也能继续阅读。
这句话促成了字幕显示方式的调整：读过的部分保留红色，而不是只突出正在读的字。
浏览器联调画面中，已经朗读过的文字呈红色。它用于检查文字显示，真实手机听感仍需要单独测试。
这一站学到：先确认内容本身，再投入时间制作声音和其他包装。
LISTEN, THEN IMPROVE
有时候，用户感觉到的问题并不是一句“修复一下”能说明白的。真正有用的信息，来自具体的操作过程。
WHAT CHANGED / 调整后的答题节奏
每个阶段都有明确反馈，用户知道自己选了什么，也知道什么时候会前进。
A REAL SCREEN / 过程截图
这张图展示的是浏览器联调中的选项画面。实际微信效果还需要在手机上亲自确认。
截图：测试样例创作者觉得“暂不填写”的选项比较粗糙。后来，领取页换成更清楚的选填提示和建议标签；报告操作按钮也分成两行。
这一站学到：一次反馈不必解决所有问题；先修逻辑，再根据体验继续打磨。
TEST IT FOR REAL
电脑上的预览能帮助检查画面，但声音、触摸、相册和微信分享，还需要在真实设备上体验。
没声音，卡顿，没弹出框，反正哪里都不对，请你做一次全面测试
这不是一个单独的问题。接下来的工作是把它拆开：声音、流畅度、选项、设置和报告，分别检查。
用自动检查和浏览器预览，确认画面、按钮和基础流程。
在微信开发者工具里编译，观察小程序运行和控制台提示。
扫码运行，听声音、点选项，查看相册和分享是否正常。
创作者发现，关闭 iPhone 的实体静音开关后，小程序又能发声。随后根据平台的音频设置调整播放方式，并再次使用手机预览检查。
这个例子提醒我们：同一个现象可能与设备、系统设置或程序有关，先复现和缩小范围，再决定怎么改。
这一站学到：自动测试、模拟器和真人手机测试互相补充，不能用其中一种代替全部。
FROM PROJECT TO PRODUCT
作品从电脑走到微信，需要准备小程序账号、资料和可运行的版本。上传代码只是其中一步。
名称、头像、服务类目等信息，要与实际功能一致。
按实际情况完成备案、域名和隐私相关设置，并进行真机检查。
使用微信开发者工具上传准备好的代码。
在微信后台提交审核，通过后再发布。
不同主体与功能对应的具体要求，请以当时微信后台显示为准。案例中用户后来反馈小程序已上线；后续更新的开发版上传记录不等于已审核发布。
NAME & AVATAR / 名称与头像
创作者希望名称容易被搜索，也为头像挑选了更直观的插画。名称审核遇到问题后，又根据平台反馈调整。
这里展示的是创作者选用的头像素材。AND THEN / 上线后继续完善
后来为首页和三个场景分别准备分享封面；在报告页分享时，封面会读取用户本次的真实结果。下面是一个测试报告生成的分享效果。
首页和三个场景的分享封面 · 点击图片可放大
这一站学到：作品上线不是终点；真实使用后的反馈，会带来下一轮改进。
YOUR TURN
你不需要先想出一个很大的项目。从一个身边的小问题开始，试着把想法说清楚。
选择一个你认为最清楚的表达。
A LITTLE PROMPT LAB
填完下面三项，就能生成一段可以发给 Codex 的起步描述。
也可以选中上面的文字，手动复制。
THE NEXT STEP IS YOURS
说出想法，看看结果，再用具体的反馈把它一点点变好。
用户对话摘录来自本次项目交流，Codex 的处理步骤根据项目记录整理，并非逐字回复。图片来自项目留存的模拟器、浏览器测试截图及分享素材；带“测试样例”的结果由模拟答案生成。
本教案为独立静态项目。页面不连接原小程序的账号、后台或用户数据，也不收集练习内容。
课前准备：每位学生准备一台能打开浏览器的设备；课堂中的需求生成练习可离线完成，后续与 Codex 实际交流需自行确认账号及使用条件。
45 分钟示例：5 分钟认识作品；10 分钟看需求与画面；10 分钟讨论剧情和交互；10 分钟理解测试与上线；10 分钟填写需求并分享。
练习成果：请学生提交一段需求描述、一条针对初版的具体反馈，以及一项自己会执行的测试。看是否写清使用者、功能、操作位置和预期结果。
项目中保留了图片来源及校验记录，详见随教案附带的 素材与事实说明.md。由于部分早期聊天截图未留存，教案采用文字摘录和可核对的项目截图。