学习札记 ERICLAB

COURSEWARE / 网页课件

AI 与 VibeCoding 工作流

让教师把教学想法做成可复用的小工具

用网页课件说明需求澄清、Spec、Plan、Tasks、执行、Review 与人工责任门禁。

VibeCoding教育工具开发 已发布 18 分钟阅读

POSITION

一句话定位

这节课不是教教师把代码外包给 AI，而是把教学想法组织成可执行、可审查、可复盘的 AI 协作开发流程。

适合

网页课件制作

例如把一个信息技术概念做成可点击、可投屏、可复用的解释页面。

适合

课堂小工具原型

例如选择结构练习器、编码演示页、资料整理器等低风险工具。

不适合

高风险自动系统

不直接处理真实个人数据，不自动生成评价结论，不自动接入校内系统。

WORKFLOW

从教学想法到可验证产物

成熟的 VibeCoding 不应该是“一句 Prompt 到处跑”，而是把开发流程拆成有证据、有门禁的小步骤。

VibeCoding 工作流六步

先问清楚教学问题

明确谁会使用、解决什么问题、哪些内容不做，避免 AI 一开始就朝错误方向生成。

COMPARE

只写 Prompt vs 使用 Workflow

Prompt 重要，但长期项目更依赖稳定规则、明确上下文、任务证据和人工门禁。

两种协作方式的差异

这一轮怎么问

适合一次性文案、简单查询或小范围改写，但容易跑偏，产物也难复查。

  • 产物通常是一段回答或代码
  • 边界依赖临场表达
  • AI 自评容易被误当证据

GATE

三级风险判断卡

教师可以用高、中、低三级方式判断一个 AI 协作任务能不能继续自动执行，哪里必须停下来人工确认。

低风险

低风险尝试

公开资料整理、静态网页课件原型、无真实数据的课堂演示组件。

中风险

需要教师复核

教学解释、课堂活动建议、评价量规、面向学生展示的 AI 生成内容。

高风险

必须停下来

涉及学生个人信息、高风险评价、公开发布、连接外部平台、自动部署或真实数据处理。

CASE

一个可迁移案例

把“帮我做个课堂工具”改造成可执行任务，是本课最关键的练习。

糟糕起点

帮我做个 Python 选择结构练习页

这句话没有受众、范围、交互方式、验收标准和风险边界，AI 很容易直接生成不可维护的页面。

改进方向

先写 Spec

明确学习目标、必须实现的交互、不做身份系统和数据保存、如何验证页面可用。

可复用路径

再拆 Tasks

一次只做一个任务：页面骨架、交互组件、样式、测试、审查和提交。

TEMPLATE

可复制任务信封

Task Envelope 是给 AI 的标准任务包，比“帮我做一个页面”更可靠。

Task Envelope 模板 
角色：你现在是当前任务执行者。
目标：本次只完成什么？
材料：必须读取哪些资料？
范围：允许修改哪些文件？不允许修改哪些文件？
约束：风格、技术、安全、教育场景要求是什么？
验收：完成后用什么证据证明？
输出：请给出改动摘要、验证结果和风险说明。
停顿：遇到公开边界、真实数据、发布、部署或范围变化时必须先问教师。

SOURCE

资料来源与延伸阅读

本页基于阶段 004 原始材料 Meterials/phase004-courseware/vibecoding-workflow.md 转译为公开展示版，不直接全量复制原始长稿。

  • 阶段制 VibeCoding 流程：需求澄清、Spec、Plan、Tasks、执行、Review、证据验证。

  • 教师 AI 协作开发中的 Human-in-the-loop、内容安全和人工门禁原则。
  • 面向网页课件和低风险教学工具的公开展示边界。