Workshop · 窗口诗人 · 教学版
第 四 阶 段 · 实 施
前三阶段完成了"理解 baseline"、"共建 spec"、"共建 plan"。
这一阶段,50 分钟内,把 plan 变成每人一份能跑的代码和一张截图。
核心动作只有五个:读 · Scope · 负约束 · 读 diff · 拒绝。
这一阶段,50 分钟内,把 plan 变成每人一份能跑的代码和一张截图。
核心动作只有五个:读 · Scope · 负约束 · 读 diff · 拒绝。
开阶段前 60 秒检查
- 所有人的
window-poet-edu/index.html在本地浏览器能打开、摄像头能亮灯 - 所有人的 DSCC 已经填好短期 API key,在
window-poet-edu/目录下能跑 - 所有人能访问
handouts/bailout-prompt.txt和handouts/bailout-button.html - 老师投影切到"终端 + 浏览器"左右分屏
硬门槛
上面任何一项没过,不要开始。宁可延迟 5 分钟,不要让学生在摄像头失败的地方消耗心气。
A
大屏同步改
15 min
老师在大屏上用 DSCC 真实走一遍第一刀。学生跟着做,不自由发挥。15 分钟结束时,全班所有人都应该有一个能跑的毕业赠言版本。
0
开场一句话 · 30″
"接下来 15 分钟我在大屏上用 DSCC 真实走一遍第一刀。你们跟着做,完全不要自由发挥。15 分钟结束时所有人都要有一个能跑的毕业赠言版本。有问题随时喊停。"
关键是 不要自由发挥 这句要重读。这 15 分钟是同步跟做,不是并行创作。
1
第一刀 · 改 prompt(6-7')
目标:把窗口诗 prompt 换成毕业赠言诗 prompt。代码其它部分一字不动。
动作 1 · read before write——故意不是改代码:
读 index.html,找到发送给 LLM 的 prompt 字符串。
不要改代码,先告诉我这个 prompt 现在让模型做什么。
教学点
这是 workshop 的第一次"read before write"。学生要看到——老师没有让 agent 立刻动手。DSCC 读完后,老师把它的 summary 念给全班听。如果 DSCC 理解错了什么,指出来。
动作 2 · 带 scope 的改:
把这个 prompt 改成写给毕业生的赠言诗。要求:
- 看到的是一张毕业照(单人或合影都可能)
- 写一首 6-10 行现代汉语自由诗,温柔、克制、不滥情
- 必须提到画面里能看见的至少一个具体细节(衣服/姿态/光线/背景)
- 最后一行是祝福,但不要用"愿你..."套话开头
- 禁用:前程似锦、鹏程万里、山高水长、"你会..."预言式口吻
只改这一个 prompt 字符串,其它一概不动。改完后把 diff 给我看。
关键句
"只改这一个 prompt 字符串,其它一概不动。"
念这句话时要停顿一下,然后继续念后半句。学生要听到这个停顿——scope 刀是整个工作流里最重要的一刀。
念这句话时要停顿一下,然后继续念后半句。学生要听到这个停顿——scope 刀是整个工作流里最重要的一刀。
动作 3 · 读 diff。老师一行一行念给学生听。两种情况:
情况 α · 理想
diff 只改了 prompt 字符串 → 接受,浏览器刷新验证。
情况 β · 现实
diff 除了 prompt 还顺手"优化"了旁边代码 → 立刻停下,当着学生说:"停。它改多了。只保留 prompt 的改动,其它回滚。" 让 DSCC 撤销。
这 10 秒是整场 workshop 最关键的 10 秒。学生要看到"拒绝"长什么样,听到"停"这个字,理解这是日常操作不是事故。
这 10 秒是整场 workshop 最关键的 10 秒。学生要看到"拒绝"长什么样,听到"停"这个字,理解这是日常操作不是事故。
如果 DSCC 第一次恰好改得很干净,老师可以故意假装它改多了,演一遍"停"——这是值得的表演。
动作 4 · 验证。浏览器刷新,老师对着自己或一个学生拍一下,出诗。念给全班听。如果诗里出现了禁用词,就进入下一个循环——再走一遍 read / scope / diff。
读·Scope·读 diff
第一刀结束,老师在黑板/大屏上写下这三个词。
2
第二刀 · 加按钮(7-8')
目标:把"每 5 分钟自动生成"改成"点按钮才生成"。
动作 1 · plan before build:
现在我想把"定时自动生成"改成"点一个按钮才生成"。
读代码,告诉我需要改哪些地方。不要写代码。
教学点
又一次 read before write,但这次更严格——明确禁止写代码。这是在练"plan before build"的习惯。DSCC 说得不对或漏了,当场指出。
动作 2 · 带负约束的改:
按你说的改。要求:
- 按钮极简,圆形,底部居中,里面是一个"拍"字或一个圆点
- 不要污染诗的主视觉
- 现有的三击保存功能不能坏
改完给 diff。
关键句 · 负约束
"不要污染诗的主视觉" "三击保存不能坏"
这是 Phase 1 锚点四"上线前的加固"的活学活用。老师可以引用一下:"还记得锚点四吗?每条需求后面都要跟一句'但是不要……'。"
这是 Phase 1 锚点四"上线前的加固"的活学活用。老师可以引用一下:"还记得锚点四吗?每条需求后面都要跟一句'但是不要……'。"
动作 3 · 读 diff + 三重验证:
- 基本功能:点按钮出诗
- 负约束 1 · 诗出现时按钮是否吵 → 吵就让 DSCC 当场改淡
- 负约束 2 · 三击保存是否还能用
如果三击保存坏了
当场停下,让 DSCC 排查。这是真正的教学黄金时刻——这就是"没读 diff 会付出的代价"的现场演示。
读·Scope·负约束·读 diff·拒绝
第二刀结束,把三个词补成五个词。指着它们说:
"接下来 25 分钟你们自己推进的时候,每次让 DSCC 改东西之前,心里过一遍这五个词。少了任何一个,后面都会来找你。"
B
学生自由推进
25 min
每人选一个方向往前推一步。不是五个方向都做一点。
1
Twist 菜单
| 难度 | 选项 | 估时 | 练的技能 |
|---|---|---|---|
| ★ | 调 prompt 风格(俳句 / 十四行 / 口语 / 双语) | 5-10' | prompt 工程 · 快速反馈 |
| ★ | 让诗里出现收件人姓名(加一个输入框) | 10-15' | UI 状态 + prompt 插值 |
| ★★ | 给三击分享图加"届别 / 日期"装饰文字 | 15-20' | 读 html2canvas 渲染逻辑 |
| ★★ | "连拍 3 帧融合一首"(一次拍 3 张发给 LLM) | 15-25' | 给 agent 讲清楚多步流程 |
| ★★★ | 检测人脸数量,按人数调整诗的语气 | 25-30' | 多能力融合 · 可能完不成 |
2
规则(写在黑板上)
- 选一个。不要贪。
- 卡住 5 分钟 → 切兜底方案
- 有"能看的"版本就截图——截图是你的存档
- 每次让 DSCC 改东西,都要念完五个词:读 · Scope · 负约束 · 读 diff · 拒绝
- 不许重写 baseline。只许在 baseline 上加 diff
3
老师巡回 · 捕捉黄金时刻
不要坐下。重点捕捉这三类教学黄金时刻,见到就大声喊停,把个体故事变成集体教材:
黄金时刻 ①
没划 scope,diff 爆炸——学生让 DSCC 改 prompt,DSCC 顺手"优化"了 50 行。喊停,让全班看这份 diff。"这就是不念 Scope 会发生的事。"
黄金时刻 ②
没读 diff,旧功能坏了——学生闭眼接受 diff,三击保存坏了。喊停,让全班复现。"这就是不读 diff 会发生的事。"
黄金时刻 ③
误会——学生说"加个按钮",DSCC 理解成"加 3 个按钮";学生说"改小按钮",DSCC 把整个页面缩小了。喊停,念对话。"这就是今晚分享环节的好素材。"
每次喊停的演示不超过 2 分钟。演完立刻放回。
4
时间提醒
- 第 10 分钟 → 黑板上写"还有 15 分钟"
- 第 20 分钟 → 黑板上写"还有 5 分钟 · 开始截图"
- 第 25 分钟 → 所有人停手。截图是硬 deadline
C
兜底方案
随时可切换
触发条件:学生卡住 5 分钟以上 / 老师判断走不完 / 时间快不够。兜底 scope 只有两件事——改 prompt、加按钮。
1
兜底的 scope
- 把原 prompt 换成
handouts/bailout-prompt.txt的内容 - 把定时触发换成
handouts/bailout-button.html的按钮
不碰:UI 样式 · 字体 · 颜色 · 三击保存 · 合成海报样式。
2
卡住学生的一键 prompt
直接复制这段话粘贴到 DSCC,学生不需要自己写:
读 window-poet-edu/index.html。
我把新 prompt 放在 handouts/bailout-prompt.txt,
新按钮片段放在 handouts/bailout-button.html。
请:
1. 把 index.html 里发送给 LLM 的 prompt 字符串替换成 bailout-prompt.txt 的内容
2. 按 bailout-button.html 里的 HTML / CSS / JS 整合一个"拍"按钮到页面里
3. 移除原来的定时触发(setInterval 或类似)
4. 按钮的 click 事件要调用原来的"生成诗"函数(函数名你读代码后确认)
5. 现有的三击保存功能不能坏
6. 其它一律不动
改完给 diff。
注意
兜底学生仍然完整走过了"划 scope → 读 diff"的循环,这才是 Phase 4 真正要教的东西。他们做到了最重要的那一半。
D
回聚 · 误会分享
10 min
每人 60 秒,只讲一件事——"我和 DSCC 之间出过的最有意思的一个误会"。
1
开场 · 30″
"最后 10 分钟我们回聚。每人 60 秒以内,只讲一件事——
我和 DSCC 之间出过的最有意思的一个误会。
不是讲'我做了什么',是讲——
'我以为 DSCC 懂了我,但它没懂',
或者 '我以为它做错了,但它是对的'。
成功故事没有信息量,误会才有。"
我和 DSCC 之间出过的最有意思的一个误会。
不是讲'我做了什么',是讲——
'我以为 DSCC 懂了我,但它没懂',
或者 '我以为它做错了,但它是对的'。
成功故事没有信息量,误会才有。"
2
为什么只问误会
- 成功故事等于没说("我让它改 prompt,它改了")
- 误会才是教材("我说加一个按钮,它加了三个——原来我没说清楚单数"就是一整节课)
- 误会让学生回忆起自己没念五个词里的哪一个——这是自动的知识点复盘
3
最后 2 分钟 · 串讲
指着黑板上记下的 5-7 条误会说:
"注意看——你们每个人的误会几乎都发生在同一个地方:没划 scope、或没写负约束、或没读 diff。这就是你们今天 50 分钟练的东西。它现在还是一个需要念出来的 checklist,但只要你继续这样用 DSCC,它会变成肌肉记忆。
出 workshop 之后,你们会忘掉窗口诗人的代码细节。但希望你们记得:和 agent 合作时,scope 刀和负约束是你的两只手。少一只都不行。"
出 workshop 之后,你们会忘掉窗口诗人的代码细节。但希望你们记得:和 agent 合作时,scope 刀和负约束是你的两只手。少一只都不行。"
⌂
兜底材料
handouts/
两个文件在 workshop 开始前 10 分钟必须已经放到学生可访问的共享目录 / 共享链接里。下面是它们的当前内容(已随本 runbook 一起落盘)。
handouts/bailout-prompt.txt
你是一位写给毕业生的赠言诗人。
看到的是一张毕业照——可能是单人,也可能是合影。
任务:
- 写一首 6-10 行的现代汉语自由诗,语气温柔、克制、不滥情
- 必须提到画面里能看见的至少一个具体细节(衣服、姿态、光线、背景、物件)
- 最后一行是一个祝福或一个愿望,但不要用"愿你……"这种套话开头
禁用:
- "前程似锦"、"鹏程万里"、"山高水长"等成语
- "你会……"这种预言式口吻
- 说教
- 为了押韵硬凑
输出格式:
- 只输出诗本身,不加标题、不加说明、不加标点修饰
- 换行用单个回车
handouts/bailout-button.html · 核心片段
<!-- ① HTML -->
<button id="shoot-btn" type="button" aria-label="拍摄并生成赠言诗">拍</button>
<!-- ② CSS -->
#shoot-btn {
position: fixed;
bottom: max(3.5rem, calc(env(safe-area-inset-bottom) + 2rem));
left: 50%;
transform: translateX(-50%);
width: 3.4rem; height: 3.4rem;
border-radius: 50%;
border: 1px solid #6e5f3d;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
color: #e8e0d0;
font-family: 'Noto Serif SC', serif;
opacity: 0.72;
transition: opacity 0.5s, transform 0.2s, background 0.4s;
z-index: 100;
}
#shoot-btn:active { transform: translateX(-50%) scale(0.94); }
body.has-poem #shoot-btn { opacity: 0.35; } /* 诗出现后隐入 */
<!-- ③ JS -->
document.getElementById('shoot-btn').addEventListener('click', async () => {
// 调用原有的生成函数(名字由 DSCC 读代码后确认)
await /* TODO: 原生成函数 */();
document.body.classList.add('has-poem');
});
完整文件见
handouts/bailout-button.html,包含注释、disabled 状态处理、以及给 DSCC 的集成说明。
— 第四阶段结束,进入 Phase 5 · 出品与反思 —