第 27 课 设计师工作流给老师用：Figma / Stitch / Codex 联动做课件
本课定位
降低教师做课件视觉稿的门槛，让老师会用 Figma、Stitch 等工具先搭结构，再让 Codex 落成网页。
本课技术框架
- Figma
- Google Stitch
- 设计到代码流程
- Codex 页面实现
学习目标
- 理解设计草图到网页课件的工作流
- 会把教学页面用卡片、区块和信息层次先设计出来
- 减少“老师边写代码边想布局”的压力
课前准备
- 准备一个想重做视觉的课件主题
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示设计草图对课件开发的帮助 | 展示设计草图对课件开发的帮助 |
| 10-20 分钟 | 讲 Figma、Stitch、Codex 三者如何分工 | 讲 Figma、Stitch、Codex 三者如何分工 |
| 20-40 分钟 | 把一节课页面先画成信息结构图或草图 | 把一节课页面先画成信息结构图或草图 |
| 40-55 分钟 | 用 Codex 按草图还原课件页面 | 用 Codex 按草图还原课件页面 |
| 55-60 分钟 | 整理自己的设计到代码工作流 | 整理自己的设计到代码工作流 |
核心讲授点
- 老师不一定要先学专业 UI 设计，但要先学会分信息层级
- 先有页面草图，会显著降低生成代码时的模糊性
- Stitch 特别适合把课程页面快速变成低门槛的设计原型
课堂案例
语文阅读批注台的设计稿到网页落地
展示老师如何先用草图整理布局，再交给 Codex 快速实现。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“设计师工作流给老师用：Figma / Stitch / Codex 联动做课件”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中语文八年级
- 课题：阅读理解批注台
- 页面结构：标题区、原文区、问题区、批注区、教师提示区
- 工作流：先用 Figma 或 Stitch 画结构草图，再交给 Codex 生成网页
- 本次要做的课件：设计到代码的工作流说明和页面骨架
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中语文八年级
- 课题：阅读理解批注台
- 页面结构：标题区、原文区、问题区、批注区、教师提示区
- 工作流：先用 Figma 或 Stitch 画结构草图，再交给 Codex 生成网页
- 本次要做的课件：设计到代码的工作流说明和页面骨架
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中语文八年级
- 课题：阅读理解批注台
- 页面结构：标题区、原文区、问题区、批注区、教师提示区
- 工作流：先用 Figma 或 Stitch 画结构草图，再交给 Codex 生成网页
- 本次要做的课件：设计到代码的工作流说明和页面骨架
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一套教师可复用的设计到代码工作流笔记
创意扩展
- 做一套班级统一课件视觉模板
- 按学科建立配色与图标规则