第 36 课 老师也能用的设计工作流：Figma、Stitch 和 Codex 怎样串起来
本课定位
不是所有老师都需要从空白页开始写，而是可以先把页面想清楚、画出来，再让 Codex 开工。
学习目标
- 看懂设计到代码的最小流程
- 知道 Figma 和 Stitch 适合帮老师解决什么
- 能把页面草图变成网页课件
阅读方式
建议按下面的“60 分钟顺序”往下阅读。每个时间段里，都已经把本段任务、参考资料、可直接使用的模板和阶段成果编排在一起，方便老师顺着一节课的节奏阅读，不必在不同板块之间来回查找。
学习目标拆开来看
看懂设计到代码的最小流程
这一项目标放在本课里，主要是帮助老师把“看懂设计到代码的最小流程”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
知道 Figma 和 Stitch 适合帮老师解决什么
这一项目标放在本课里，主要是帮助老师把“知道 Figma 和 Stitch 适合帮老师解决什么”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
能把页面草图变成网页课件
这一项目标放在本课里，主要是帮助老师把“能把页面草图变成网页课件”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
课前准备
- 带一个想做但结构较复杂的课题
- 准备几张草图或纸面分镜
- 想清楚这套课件最重要的 3 页
按 60 分钟顺序展开
0-10 分钟
本段任务
用《老师最适合的设计工作流》开场，让老师先进入 老师也能用的设计工作流：Figma、Stitch 和 Codex 怎样串起来 这个具体教学场景。
本段重点
- 关联目标：看懂设计到代码的最小流程
- 关键提醒：设计工具不是增加负担，而是帮助老师先把页面关系想清楚。
教学意图
开头先把课堂情境和真实需求立住。只要老师先看见“这和我的课堂有什么关系”，后面的页面和技术动作就不会显得漂浮。
本段参考资料
老师最适合的设计工作流
纸面草图 → 页面框架 → 关键页面说明 → 交给 Codex 实现先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。
阶段成果
- 老师已经能说清楚：这节课真正要解决的课堂问题是什么。
10-20 分钟
本段任务
把本课最关键的判断线讲清楚，先帮助老师看见这一类课件最容易做偏在哪里。
本段重点
- 关联目标：知道 Figma 和 Stitch 适合帮老师解决什么
- 关键提醒：老师最适合用设计工具整理页面结构，而不是追求精细视觉稿。
教学意图
这一段的重点不是堆知识点，而是把“该先抓哪一条主线”讲清楚。只有先把判断线立起来，后面的执行模板和页面实现才更容易稳住。
本段参考资料
最适合先画出来的内容
页面顺序、主分区、互动区、老师讲解区、总结区先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。
阶段成果
- 老师已经知道：这类课件最值得先抓住的主线和最容易失手的地方。
20-35 分钟
本段任务
讲师现场示范一轮，把老师最关心的这一页或这一组页面先做出来。
本段重点
- 关联目标：能把页面草图变成网页课件
- 关键提醒：Stitch 和 Figma 的价值，都是帮助你更快进入可实现状态。
教学意图
示范段的意义是让老师看见第一版通常怎样开工、怎样收住，而不是看一个远离自己课堂的完美案例。
本段可直接使用的模板
帮我把草图整理成页面说明
我现在已经把一节英语互动课件的大致页面画在纸上了。
页面有：
1. 封面页
2. 单词卡页
3. 拼写闯关页
4. 情景对话页
5. 总结页
请你直接帮我把这套草图整理成更清楚的页面说明，方便我下一步直接生成网页。正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。
阶段成果
- 老师已经完整看过一轮示范，知道第一版通常怎样跑起来。
35-50 分钟
本段任务
老师拿自己的课题或材料跟做一轮，先做出一版可继续修改的结果。
本段重点
- 关联目标：能把页面草图变成网页课件
- 关键提醒：Stitch 和 Figma 的价值，都是帮助你更快进入可实现状态。
教学意图
真正形成能力的关键，往往就在这一段。先做出第一版，再回头调整页面、素材和老师说法，通常比一开始就求全更稳。
本段可直接使用的模板
帮我把页面说明变成可直接开工的代码请求
我已经有一套课件页面说明了。
请你帮我把它整理成一段可直接开始做网页课件的文字。我要的是：
1. 页面顺序清楚
2. 每一页作用清楚
3. 哪一页先做最稳也写出来正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。
阶段成果
- 老师已经拿自己的材料做出一版结果，并知道接下来优先改哪里。
50-60 分钟
本段任务
快速点评、收束方法，并把本课成果收成 一份《设计到课件实现流程稿》。
本段重点
- 关联目标：能把页面草图变成网页课件
- 关键提醒：Stitch 和 Figma 的价值，都是帮助你更快进入可实现状态。
教学意图
最后这一段不再加新东西，而是把今天的方法收回到老师自己的工作里，知道哪些成果值得带走、哪些地方下次还要继续打磨。
阶段成果
- 老师已经带走本课产出：一份《设计到课件实现流程稿》
关键讲授点
讲授点 1
设计工具不是增加负担，而是帮助老师先把页面关系想清楚。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
讲授点 2
老师最适合用设计工具整理页面结构，而不是追求精细视觉稿。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
讲授点 3
Stitch 和 Figma 的价值，都是帮助你更快进入可实现状态。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
本课最容易踩的坑
最常见的误区
这类任务最常见的问题，不是完全不会做，而是容易一上来就做太满、做太散，或者把应该由老师自己最后判断的部分也一起丢掉了。老师也能用的设计工作流：Figma、Stitch 和 Codex 怎样串起来 这一课的关键，就是把这条界线和处理顺序重新拉清楚。
更稳妥的做法
- 先从自己最熟的一页或一个场景开始，不要一上来就做完整大项目。
- 先把第一版跑出来，再逐项检查课堂节奏、知识点准确度和页面可用性。
- 如果需要升级技术，先确认课堂价值和设备条件，再决定要不要继续往上加。
本课产出
- 一份《设计到课件实现流程稿》
课后任务
- 用纸面或 Figma 草图整理 3 页课件结构。
- 挑出最先要做的一页。
自学阅读顺序
- 先顺着 60 分钟顺序快速读一遍，先建立本课节奏感。
- 第二遍回看本课两段可直接使用的模板，把其中的年级、课题、页面要求换成自己的真实内容。
- 最后只保住一个最值得先做的页面或一个最小版本，先把它跑通。
讲师提醒
- 这节课要帮老师理解“设计是为了更快开工”。
- 不要把设计工具讲得太专业。
下一课衔接
下一课会继续推进到 第 37 课 图片、音效、插画和配色：老师自己的素材工作台怎么搭，把今天形成的结果往下一步课程里接起来。