第 36 课 老师也能用的设计工作流：Figma、Stitch 和 Codex 怎样串起来逐页 PPT 正文

第 1 页 封面

• 标题：第 36 课 老师也能用的设计工作流：Figma、Stitch 和 Codex 怎样串起来
• 副标题：把设计草图、页面结构和代码生成串成老师能理解、能操作的流程。

第 2 页 本课为什么重要

不是所有老师都需要从空白页开始写，而是可以先把页面想清楚、画出来，再让 Codex 开工。

第 3 页 今天要带走什么

• 看懂设计到代码的最小流程
• 知道 Figma 和 Stitch 适合帮老师解决什么
• 能把页面草图变成网页课件

第 4 页 先看一个真实情境

老师最适合的设计工作流

纸面草图 → 页面框架 → 关键页面说明 → 交给 Codex 实现

第 5 页 这类任务最容易在哪儿失手

设计工具不是增加负担，而是帮助老师先把页面关系想清楚。

• 老师最适合用设计工具整理页面结构，而不是追求精细视觉稿。

第 6 页 讲师示范模板

帮我把草图整理成页面说明

我现在已经把一节英语互动课件的大致页面画在纸上了。

页面有：
1. 封面页
2. 单词卡页
3. 拼写闯关页
4. 情景对话页
5. 总结页

请你直接帮我把这套草图整理成更清楚的页面说明，方便我下一步直接生成网页。

第 7 页 学员跟做模板

帮我把页面说明变成可直接开工的代码请求

我已经有一套课件页面说明了。

请你帮我把它整理成一段可直接开始做网页课件的文字。我要的是：
1. 页面顺序清楚
2. 每一页作用清楚
3. 哪一页先做最稳也写出来

第 8 页 本课产出

• 一份《设计到课件实现流程稿》

第 9 页 课后任务

• 用纸面或 Figma 草图整理 3 页课件结构。
• 挑出最先要做的一页。