Vibe Coding工具体验 / 第 1 节
D1 Vibe Coding首页生成
主案例：CSDP/ITR服务工单协同系统
本页是当天课表草案，导入自 2026-09-18 大纲。发布前请改写成可直接学习的图文教程。
第1节 · 09:00-09:45 · 45分钟 · 实践
本节主题
首页生成：先看成品：服务内容展示、服务问答和服务工单登记如何连成一条链；Vibe Coding是什么：描述、生成、预览、修改和测试
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：案例导入与看图讲解：围绕“先看成品：服务内容展示、服务问答和服务工单登记如何连成一条链”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；业务角色与任务拆解：围绕“Vibe Coding是什么：描述、生成、预览、修改和测试”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；场景判断卡：先看成品：服务内容展示、服务问答和服务工单登记如何连成一条链；任务拆解记录：Vibe Coding是什么：描述、生成、预览、修改和测试
来源课次 D1-S1、D1-S2
第2节 · 10:00-10:45 · 45分钟 · 实践
本节主题
首页生成：认识课堂工具：Codex、WorkBuddy与选用规则；打开制造企业案例模板，认识文件、预览和版本保存
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：工具示范与模板复现：围绕“认识课堂工具：Codex、WorkBuddy与选用规则”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；学员操作与版本留痕：围绕“打开制造企业案例模板，认识文件、预览和版本保存”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；工具操作记录：认识课堂工具：Codex、WorkBuddy与选用规则；当堂作品增量：打开制造企业案例模板，认识文件、预览和版本保存
来源课次 D1-S3、D1-S4
第3节 · 11:00-12:00 · 60分钟 · 实践
本节主题
首页生成：用自然语言生成第一版制造企业服务内容展示首页；运行页面、保存提示记录并复盘工具操作
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：失败样例与边界测试：围绕“用自然语言生成第一版制造企业服务内容展示首页”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；作品验收与当日复盘：围绕“运行页面、保存提示记录并复盘工具操作”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；测试与边界记录：用自然语言生成第一版制造企业服务内容展示首页；制造企业服务内容展示首页v0.1、工具操作卡、提示记录和运行截图
来源课次 D1-S5、D1-S6
第4节 · 14:00-14:45 · 45分钟 · 实践
本节主题
首页生成：拆解页面：导航、服务、服务方案、行业案例和报修问答入口；把脱敏服务与服务方案资料整理成页面需求
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：案例导入与看图讲解：围绕“拆解页面：导航、服务、服务方案、行业案例和报修问答入口”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；业务角色与任务拆解：围绕“把脱敏服务与服务方案资料整理成页面需求”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；场景判断卡：拆解页面：导航、服务、服务方案、行业案例和报修问答入口；任务拆解记录：把脱敏服务与服务方案资料整理成页面需求
来源课次 D2-S1、D2-S2
第5节 · 15:00-15:45 · 45分钟 · 实践
本节主题
首页生成：让工具生成页面结构、内容区块和基础样式；用自然语言修改布局、文案、按钮和移动端显示
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：工具示范与模板复现：围绕“让工具生成页面结构、内容区块和基础样式”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；学员操作与版本留痕：围绕“用自然语言修改布局、文案、按钮和移动端显示”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；工具操作记录：让工具生成页面结构、内容区块和基础样式；当堂作品增量：用自然语言修改布局、文案、按钮和移动端显示
来源课次 D2-S3、D2-S4
第6节 · 16:00-16:45 · 45分钟 · 实践
本节主题
首页生成：预览空内容、长文本、窄屏和链接失效情况；保存服务与服务方案页面v0.2和修改前后对照
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：失败样例与边界测试：围绕“预览空内容、长文本、窄屏和链接失效情况”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；作品验收与当日复盘：围绕“保存服务与服务方案页面v0.2和修改前后对照”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；测试与边界记录：预览空内容、长文本、窄屏和链接失效情况；服务与服务方案页面v0.2、页面需求卡、修改前后对照和窄屏测试
来源课次 D2-S5、D2-S6
第7节 · 17:00-18:00 · 60分钟 · 实践
本节主题
首页生成：看懂服务报修问答助手的界面、任务说明、输入和输出；确定助手身份、服务对象、语气和三条禁区
教学活动
使用Vibe Coding从自然语言需求生成首页，完成信息架构、首屏、导航、核心内容区和主要入口。原课程内容承接：案例导入与看图讲解：围绕“看懂服务报修问答助手的界面、任务说明、输入和输出”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。；业务角色与任务拆解：围绕“确定助手身份、服务对象、语气和三条禁区”在“CSDP/ITR服务工单协同系统”教学模板中完成生成、预览、修改或测试并保留结果；使用合成或脱敏材料，候选工具能力须开课前实测。
产出与评价证据
可运行首页v0.1、生成提示与首次预览记录；场景判断卡：看懂服务报修问答助手的界面、任务说明、输入和输出；任务拆解记录：确定助手身份、服务对象、语气和三条禁区
来源课次 D3-S1、D3-S2