# demo 生成提示词

用途：
把一个题目灵感、设计角度或课堂切入点，先变成一个适合演示的 demo 页面。

## 目标

你现在不是在先整理 JSON。
你要做的是：
**先把灵感做成一个看得见的 __demo__.html 页面。**

## 为什么先做 demo

因为 demo 是后续流程的起点：
- demo 出来后，学生页内容更容易整理
- demo 出来后，教师 JSON 也更容易提炼
- demo 能帮助快速判断这个题目有没有意思、能不能继续发展

## 输出要求

生成的 demo 页面要满足：
- 适合演示
- 页面不要太复杂
- 一眼能看出这个任务大概是什么
- 能作为后续 __student__.json 和 __teacher__.json 的上游参考

## 写 demo 时要注意

### 1）先突出核心效果
不要一开始把所有功能都做满。
先做出最能说明这个题目价值的那一个效果。

### 2）适合课堂抛砖引玉
这个 demo 不一定是完整作品，
但它必须足够清楚，能让人一眼看懂方向。

### 3）优先做“能看见”的页面
优先让页面可看、可点、可感受，
而不是先写很多结构化说明。

### 4）为后续 JSON 留出空间
做 demo 时，心里要有这些问题：
- 这个任务学生到底要做什么？
- 步骤会是什么？
- 评价目标会是什么？
- 老师侧会怎么看这个任务？

## 如果 demo 是多图对比练习页，要遵守这些规则

### 页面结构
- 首屏基本看完
- 尽量一屏展示核心内容
- 如果是三张图对比，必须三栏横排同时展示

### 每一栏的结构
- 上面放图片
- 下面放观察和思考提示
- 不直接写改进建议
- 不直接告诉学生答案

### 文字控制
- demo 页面优先短句
- 顶部说明必须很短
- 每张图下面只放 2 到 3 个短问题
- 不要长段落
- 不要把老师说明塞进学生首屏

### 目标
- 让学生一打开就能同时看到几张图
- 能马上开始比较
- 能先发现一个问题
- 能想一个最小修改点

### 资源命名方式
- demo 中使用的图片、音频等资源文件名，不要只用简单固定名
- 统一使用：`中文学生友好名_2位数字随机戳`
- 例如：`班级小组徽章_47.png`
- 这样可以减少浏览器缓存带来的旧图问题

### 资源路径方式
- demo 网页中的所有媒体资源，不要使用本地相对路径
- 必须使用 CDN 链接
- CDN 固定前缀写死为：`https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo`
- 后面再拼接资源相对路径
- 例如：`https://cdn.yiranlaoshi.com/yiran/workspace-ai-demo/c102_给小组作品做微调训练/班级小组徽章_47.png`

## demo 生成后的下一步

生成 demo 页面后，不要立刻结束。
下一步要继续：
1. 从 demo 中提炼 __student__.json
2. 再提炼 __teacher__.json
