第 28 课 素材生产工作流：图片、音效、配色、插画与教学 UI
本课定位
把课件做得好看、好听、好理解，不靠临时拼素材，而是建立可持续的素材生产与管理流程。
本课技术框架
- 图片生成提示词
- 图标与配色系统
- 音效管理
- 素材命名与复用
学习目标
- 掌握教学素材的分类与生产思路
- 能生成更适合课堂的配图、插画和 UI 元素提示词
- 建立个人或教研组素材库规则
课前准备
- 准备一个现有课件，找出视觉与素材最薄弱的地方
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 对比“素材乱拼”与“统一风格课件” | 对比“素材乱拼”与“统一风格课件” |
| 10-20 分钟 | 讲图片、配色、图标、音效和素材命名的工作流 | 讲图片、配色、图标、音效和素材命名的工作流 |
| 20-40 分钟 | 用 Codex 整理素材需求并生成素材清单和提示词 | 用 Codex 整理素材需求并生成素材清单和提示词 |
| 40-55 分钟 | 学员完成一组学科专属素材提示词 | 学员完成一组学科专属素材提示词 |
| 55-60 分钟 | 沉淀进素材库模板 | 沉淀进素材库模板 |
核心讲授点
- 老师最需要的不是无限素材，而是统一风格、能复用、容易替换的素材系统
- 图片、音效和配色都应该为知识表达服务
- 素材命名和管理规则会直接影响后续备课效率
课堂案例
化学实验课件素材包与英语对话课件配色包
帮助老师看到不同学科的视觉风格如何组织。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“素材生产工作流：图片、音效、配色、插画与教学 UI”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：酸碱滴定实验课件素材包
- 素材需求：封面图、滴定装置插图、图标、按钮状态、提示音、配色方案
- 视觉方向：清爽、实验感、适合教室投屏，不要过度花哨
- 本次要做的课件：素材清单、配色建议、插画提示词和音效命名规则
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：酸碱滴定实验课件素材包
- 素材需求：封面图、滴定装置插图、图标、按钮状态、提示音、配色方案
- 视觉方向：清爽、实验感、适合教室投屏，不要过度花哨
- 本次要做的课件：素材清单、配色建议、插画提示词和音效命名规则
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：酸碱滴定实验课件素材包
- 素材需求：封面图、滴定装置插图、图标、按钮状态、提示音、配色方案
- 视觉方向：清爽、实验感、适合教室投屏，不要过度花哨
- 本次要做的课件：素材清单、配色建议、插画提示词和音效命名规则
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一套个人学科素材提示词与素材库规则
创意扩展
- 制作班级统一课件 UI Kit
- 做学科插画风格手册