# AI+X 探索营：九类学生网页配套 Prompt

更新时间：2026年7月15日  
适用场景：一日探索营、网页原型制作、学生课后继续迭代  
配套 Demo：打开本文件夹中的网页项目，首页可进入九类可操作 Demo

## 一、使用方式

### 课堂上

1. 学生先选最接近自己真实问题的一类页面。
2. 先填写项目卡，说清“我想回应谁、我看见什么、今天先做什么”。
3. 把“通用底座 Prompt”与对应类型的“专项模块”一起交给 AI。
4. AI 提问后，学生补充真实内容；不允许跳过核验，直接把示例当成自己的成果。
5. 第一版生成后，至少进行两轮修改：先改内容逻辑，再改视觉和交互。

### 学生需要保留的过程证据

- 第一版项目卡；
- AI 最初给出的页面方案；
- 学生删掉或改写的内容；
- 一次失败或技术卡点；
- 最终页面与 3 分钟展示稿；
- 事实来源、数据说明与授权状态。

## 二、问卷样本带来的选题方向

本批学生的兴趣集中在：作曲、绘画、表演、游戏、历史、公益、支教、托福、睡眠、物理、工程和 AI。真实困扰包括家庭物品难找、睡眠不足、蚊虫增多、学习重复劳动等。

对应建议：

| 学生兴趣或问题 | 优先尝试的 Demo |
| --- | --- |
| 作曲、绘画、表演、动画 | 社团招新页、活动宣传页、故事展示页 |
| 游戏、历史、艺术、设计 | 个人作品页、故事展示页 |
| 支教、公益 | 公益项目页、调研展示页 |
| 托福与学习重复任务 | 学习工具页 |
| 睡眠质量 | 调研展示页、数据可视化页 |
| 家庭物品总找不到 | 资源导航页 |
| 蚊虫困扰 | 数据可视化页、调研展示页 |
| 物理、工程、AI 分析 | 数据可视化页、个人作品页 |

## 三、通用底座 Prompt

将下面这段与后面的某一个专项模块一起发送给 AI：

```text
你是一名同时懂青少年项目学习、信息设计、内容编辑和前端开发的网页共创导师。请帮助一名初高中生，把一个真实兴趣或日常问题做成可以展示、可以点击、可以继续迭代的网页作品。

工作原则：
1. 不要把网页做成模板化的商业落地页，也不要使用“赋能、颠覆、改变世界”等空泛表达。
2. 网页必须从一个具体的人、具体场景或真实问题出发；AI 负责整理、生成初稿和技术实现，学生负责判断、取舍、核验和表达。
3. 如果信息不足，先提出不超过 6 个高价值问题。如果暂时得不到回答，可以使用清楚标注的示例内容继续完成 Demo，但不得把虚构数据冒充真实数据。
4. 页面必须适配手机和电脑。卡片圆角不超过 8px，颜色不超过 5 个主色，不使用装饰性渐变、漂浮色球或通用 AI 模板风。
5. 所有按钮都要有实际反馈，不能出现点击无反应的假按钮。表单可以演示本地提交状态，但不连接真实支付，不收集敏感信息。
6. 使用语义化 HTML、CSS 和必要的原生 JavaScript。输出一个双击即可运行的版本。不要使用未经授权的姓名、校名、照片、Logo 或研究数据。
7. 交付前检查：最长文字不溢出，手机端无横向滚动，交互可用，标题、数据、引用和行动入口层级清楚。

请先输出 8-12 行的“项目理解与页面策略”，再直接给出完整代码。代码后列出：学生需要替换的内容、需要核验的数据、下一步只增加的一个功能。
```

## 四、九类专项模块

### 1. 社团招新页

```text
项目主题：[填写社团名称与本学期真实任务]
目标用户：[什么样的学生最适合加入]

页面必须回答：这个社团到底在做什么、我可以承担什么角色、每周需要多少时间、零基础能否参加、下一次怎样加入。

请设计：
- 第一屏出现社团名称、本学期任务、下一次开放活动，不写宏大口号；
- 4 个可筛选的成员角色，每个角色写清当天可以完成的小任务；
- 4 周真实计划，展示从第一次尝试到公开作品的过程；
- FAQ：基础、设备、时间、协作和退出机制；
- 4 字段报名表，提交后显示下一步，不连接真实数据库；
- 一处与社团内容相关的信息视觉，例如声音波形、训练节奏或观察记录；
- 视觉像校园公告与学生工作台，不像商业招聘网站。
```

### 2. 个人作品页

```text
项目主题：[学生正在长期靠近的一个问题，不是专业头衔]
已有作品：[列出 2-4 个真实作品、笔记或进行中项目]

请把零散经历整理成一条别人可以理解、学生本人也认可的主线。

页面必须包含：
- 第一屏回答“我在研究/创作什么”，不把学生包装成专家；
- 3 个项目档案，每个写清问题、方法、证据、学生判断和下一步；
- “研究 / 创作 / 制作中”等筛选；
- 一条真实工作方法时间线；
- 每个项目可展开一条失败、修改或幕后笔记；
- 未来 30 天计划；
- 视觉应体现学生的内容气质，但正文必须清楚，不能只做氛围。
```

### 3. 公益项目页

```text
服务对象：[具体的人，不写“弱势群体”等宽泛称呼]
真实需求依据：[访谈、观察或已有合作]
当前能做的事：[限定在 2-3 项]

请把公益项目做成透明、可验证的行动页面，而不是煽情宣传页。

页面必须包含：
- 先说明服务对象和具体困境；
- “已经确认的需要 / 仍需验证的假设”并列；
- 3 个行动方向，写明负责人、时间、进度和当前缺口；
- 已完成、进行中、待核验三种状态；
- 未核验数字必须标注“示例数据”或删除；
- 志愿匹配表单提交后生成一张具体行动建议卡；
- 未成年人保护、隐私和内容授权说明；
- 不使用苦难化图片，不承诺无法验证的影响。
```

### 4. 调研展示页

```text
研究问题：[一个可调查的问题]
样本与方法：[人数、时间、问卷/访谈/观察]
已有数据：[粘贴匿名数据或明确使用示例数据]

请把调研做成学生能够讲清楚的研究展示，而不是商业驾驶舱。

页面必须包含：
- 研究问题、样本、方法、时间与局限；
- 2-4 个筛选条件，切换后更新核心数字；
- 至少两种简单可视化；
- 匿名学生原话，明确“感受不等于统计证据”；
- “我们发现 / 我们还不知道”并列；
- 明确相关不等于因果；
- 给出 2-3 个可测试的小行动和下一轮要补的变量；
- 数据来源、计算方式与示例标签可见。
```

### 5. 学习工具页

```text
学习任务：[托福口语/错题整理/单词复习等]
学生当前卡点：[不知道问题、反馈太慢、容易背模板等]

请设计一个“学生先做—AI 反馈—学生重做”的学习工具。AI 不是代答者。

页面必须包含：
- 一个具体练习任务和输入区域；
- 学生提交第一次答案后，只给一个优点、一个优先问题、一个立刻可做的动作；
- 不直接重写完整答案，不给没有依据的精确分数；
- 保存第一次和第二次版本，允许学生勾选自己修改了什么；
- 个人错误库按 3-5 个类型累计；
- 明确说明官方材料、学术诚信、隐私与考试使用边界；
- 若为托福，按当前 ETS 题型设计，并把官方 TestReady 作为校准参照。
```

### 6. 活动宣传页

```text
活动名称：[填写]
活动主题：[一句真实、具体的话]
时间地点与节目：[填写真实信息或标注 Demo]

请设计一个既能传达现场气质、又不会漏掉实际信息的校园活动页。

页面必须包含：
- 第一屏直接出现名称、日期、时间、地点和预约按钮；
- 下一屏在首屏底部可见，避免只有一张巨型海报；
- 节目按 2-4 个标签切换，每个节目写时长、学生角色和创作缘起；
- 完整时间轴、入场规则、无障碍与声音环境说明；
- 预约表单只收必要信息，提交后显示 Demo 编号；
- 作品征集入口说明格式、长度、授权和截止日期；
- 不使用闪烁动画，不把学生演出做成商业音乐节。
```

### 7. 资源导航页

```text
要整理的资源：[家庭物品/新生资源/社团资料等]
主要使用者：[谁最容易找不到]

请把隐性信息变成可以搜索、筛选和共同维护的导航。

页面必须包含：
- 首屏以搜索为主，并提供 5 个真实示例；
- 分类筛选、最近更新和搜索为空状态；
- 每条结果显示位置/来源、用途、更新时间和维护人；
- 快速新增表单，保存后立即出现在当前页面；
- 一条明确的更新规则；
- 对证件、药物、联系方式等敏感信息只保留必要程度；
- 视觉像清晰的索引卡，不像电商目录或企业知识库。
```

### 8. 数据可视化页

```text
观察问题：[例如蚊虫、睡眠、食堂浪费、运动训练]
记录字段：[地点、时间、天气、行为等]
数据状态：[真实/示例/仍待收集]

请帮助学生区分观察、假设和结论，并让数据能够被筛选和继续补充。

页面必须包含：
- 数据时间范围、样本与“示例数据”标签；
- 3-5 个筛选项，切换后数字和图表同步更新；
- 两种不依赖外部图表库的 CSS 可视化；
- “可能相关 / 还不能确定”并列；
- 新增观察表单，提交后更新至少一个页面数字；
- 一个可执行的下一步小实验，并写出控制变量；
- 不做因果夸大，不给医疗或安全结论。
```

### 9. 故事展示页

```text
故事对象：[一件作品、一次经历、一个家庭人物或一段变化]
可用素材：[日记、录音、照片、草稿、时间线]

请展示作品背后的犹豫、修改和选择，不只展示一个光滑成品。

页面必须包含：
- 一句克制的第一人称自述；
- 4-6 个可点击章节，每章包含日期、素材占位、叙事和“我当时做的选择”；
- 可操作的时间线和播放/翻页反馈；
- 两个版本的对照，并解释学生为什么修改；
- 清楚标注哪些内容由 AI 辅助，哪些判断来自学生；
- 结尾落在下一步想继续追问什么，不强行总结成获奖或申请成果；
- 视觉允许留白和节奏变化，但手机端正文不能被装饰遮挡。
```

## 五、生成后必须追问 AI 的第二轮 Prompt

第一版出来后，不要立刻结束。继续发送：

```text
请先不要改代码。像一名严格但尊重学生主体性的项目导师一样，审查刚才的网页：

1. 哪三处内容仍然像通用模板，不像这个学生？
2. 哪两处信息缺少真实依据或需要授权？
3. 哪一个交互目前只是装饰，没有帮助用户完成任务？
4. 页面在手机端最可能出现什么拥挤或溢出？
5. 如果只能保留一个最有力量的部分，应该保留什么，为什么？

先给出审查结论，等我确认后再修改代码。不要自行增加新功能。
```

## 六、最终展示前 Prompt

```text
请基于最终网页，帮助学生准备一段 3 分钟展示。不要替学生写夸张故事。

结构：
1. 我看见了谁，或者我自己正在经历什么；
2. 我把它定义成了什么问题；
3. 我今天做出了什么；
4. AI 帮了我什么；
5. 哪个判断和修改必须由我完成；
6. 如果再给我 7 天，我下一步验证什么。

请先提出 4 个问题收集学生真实过程，再生成口语化提纲。总字数控制在 500 字以内。
```