学生自主学习专题网站生成器

本技能执行一个三阶段流水线：

• 阶段一：严格按 references/course-design-template.md 规范生成一份完整的课程设计方案 Markdown 文档。
• 阶段一·5：基于课程设计方案，按 references/teaching-design-template.md 生成配套的教学设计文档。
• 阶段二：基于课程设计文档，构建一个功能完善、可双击运行的学生自主学习专题网站。

阶段一必做，阶段一·5与阶段二也必做。阶段一的文档是后两个阶段的唯一需求来源；教学设计与网站内容必须与课程设计方案高度一致、互为补充。

0. 关键资源定位

所有资源文件均位于本技能目录的 references/ 下，技能可整体迁移，不依赖工作区根目录的任何文件。

执行阶段任务前，必须先 Read 对应的参考文件。 不要凭记忆复述代码模板——每次都读取最新内容。

1. 启动：需求澄清

收到用户请求后，先判断输入完整度。若用户已给出充分的课程信息（主题、对象、目标、模块大纲），可直接进入阶段一；否则询问用户课程信息（如可能则用 AskUserQuestion 询问）一次性补齐关键缺口（不要逐条追问）。

必须明确的 6 项要素：

1. 课程主题与名称（如"认识人工智能"）
2. 目标学段/对象（如"初中七至九年级"）
3. 课程定位（参赛作品 / 校本课程 / 单元教学设计 / 自主学习资源）
4. 设计依据（课标/政策文件/学情需求；有则附引用，无则用"学情背景"）
5. 模块数量与大致内容（建议 6–8 个；若用户只给主题，由你按主题合理规划并说明理由）
6. 大模型 API 信息（端点 URL、模型名；API Key 由教师配置页填入，不要硬编码。若用户暂无，用占位配置并预留配置页）

> 若用户只给出"为 X 主题做一个学习网站"这类简短需求，你应主动规划模块与学习路径，并在阶段一产出后请用户确认，再进入阶段二。

2. 阶段一：生成课程设计文档

2.1 流程

1. Read references/course-design-template.md 与 references/course-design-template-guide.md。
2. 复制模板结构，按指南逐章节填充。保留模板的七章节骨架与占位符约定（{{必填}} / {{选填|可选}}）。
3. 输出文件命名：{课程名称}-课程设计.md，保存在用户工作区根目录。
4. 填充完成后运行 references/quality-checklist.md 的"阶段一校验"，修正后再进入阶段二。

2.2 填充核心规则

结构一致性（最易出错，重点把控）：

• 第三章「模块一览表」的模块数 ＝ 第四章「模块详情」的模块数 ＝ 第六章「目录树」pages/ 文件数 ＝ 第五章「功能场景表」涉及的模块行数。
• 第二章「学习路径」的阶数 ＝ 第三章架构图 subgraph 数 ＝ 各模块"阶段标签"的类别数。
• 第一章 1.2「设计目标」维度数 ＝ 第七章 7.1「评价维度」行数。
• 正文 ^[编号]^ 引用 ＝ 末尾参考资料编号一一对应。

内容质量：

• 每个模块必须有：学习目标 + 2–5 个活动 + 分层任务（基础挑战 / 进阶探索）。
• 活动描述要具体可实现：写明呈现形式、学生操作、反馈机制、所用技术（原生 JS / Canvas / 大模型 API / 拖拽）。这是阶段二的直接施工依据，模糊描述会导致网站无法落地。
• 涉及大模型的活动，在活动描述中点明调用场景与系统提示词策略，并汇总到第五章 5.2 功能场景表。
• 学习阶段数 3–6 阶均可，模块数 6–8 为宜；短期微课可用三阶，完整单元四阶以上。
• 删除所有 {{占位符}} 残留与 [示例文字] 引导语；可选部分按需保留或整段删除。

2.3 第五、六章（技术章节）必填

本技能面向的是带大模型的在线学习网站，第五、六章不可删除：

• 第五章：给出 callLLM() 封装代码（与 references/core-infrastructure.md 一致）、功能场景表（行数随模块动态调整）、四重安全保障。
• 第六章：项目文件结构（pages/ 文件名按 m{编号}-{英文简称}.html 命名，与模块一致）、关键技术实现、实现依据。

2.4 交付确认

阶段一完成后，向用户展示生成文档的章节大纲与关键指标（模块数、阶段数、维度数），请用户确认后再进入阶段一·5。若用户要求调整，回到 2.1 修订。

2.5 阶段一·5：生成教学设计文档

课程设计方案回答"教什么、为什么这样教"，教学设计回答"怎么教、怎么评"。两者互为补充，共同构成完整的课程资产。

2.5.1 流程

1. Read references/teaching-design-template.md。
2. 从阶段一的课程设计方案中提取：素养维度、学情信息、模块活动、学习路径、评价维度、课时安排。
3. 按模板九章节结构填充，直接引用课程设计方案中的对应内容（标注 ↗），不重新发明。
4. 输出文件命名：{课程名称}-教学设计.md，保存在用户工作区根目录。
5. 填充完成后运行 references/quality-checklist.md 的"教学设计校验"，修正后再进入阶段二。

2.5.2 填充核心规则

与课程设计方案的一致性（最关键）：

• 第一章「教学目标」的维度数 ＝ 课程设计方案 1.2「设计目标」维度数，且维度名称一一对应。
• 第五章「教学过程」每个课时的"网站模块"列 ＝ 课程设计方案第四章对应模块的页面文件。
• 第六章「教学评价」的评价维度 ＝ 课程设计方案第七章 7.1「评价维度」。
• 课时总数 ＝ 课程设计方案 1.3「课时安排」。
• 每个课时的"分层任务"引用课程设计方案对应模块的基础/进阶任务，不另起炉灶。

内容质量：

• 教学目标使用可观察的行为动词（"能辨认""能分析""能设计"），不用"了解""理解"等内部动词。
• 每条目标包含"行为 + 内容 + 标准"三要素。
• 教学过程表格每个环节写明：教师活动、学生活动、网站操作、设计意图、时间。
• 网站操作列必须具体到页面和活动名称（如"打开 m1-cell.html，完成翻牌墙活动"）。
• 差异化策略需覆盖三种学生水平（基础较弱 / 中等 / 学有余力）。
• AI 学习伙伴的使用提示嵌入相关课时，说明引导学生使用的时机与方式。

2.5.3 交付确认

阶段一·5 完成后，向用户展示教学设计的关键指标（课时数、维度对应、网站模块引用），请用户确认后再进入阶段二。

3. 阶段二：构建学习网站

3.1 技术约束（硬性）

• 纯 HTML + 原生 JavaScript（ES6+），零框架：不依赖 React/Vue，不使用 Node.js 或任何构建工具。
• 双击 index.html 即可运行：可部署于静态空间或本地。
• 第三方库仅允许通过单文件 CDN/本地引入：ECharts（雷达图）、可选 Mermaid（架构图）。字体用 Google Fonts CDN + 系统字体回退。
• 大模型通过浏览器 fetch 调用兼容 OpenAI 格式的 API。

3.2 流程

1. Read references/design-system.md、references/core-infrastructure.md、references/module-patterns.md。
2. 从阶段一文档解析：模块清单、阶段映射、目标维度、活动清单、大模型场景、评价维度。
3. 按下述顺序生成文件（每生成一个模块页即自检与全局一致性）：

{项目目录名}/
├── index.html              # 首页：学习地图 + 进度追踪 + 导航
├── pages/
│   ├── m1-{slug}.html      # 各学习模块（数量与阶段一一致）
│   ├── m2-{slug}.html
│   └── ...
├── css/
│   └── style.css           # 全站统一样式（设计系统）
├── js/
│   ├── config.js           # LLM 配置 + 系统提示词字典
│   ├── llm.js              # callLLM 统一封装（流式）
│   ├── progress.js         # 进度/徽章/雷达数据管理
│   ├── nav.js              # 导航高亮 + 路径指示器
│   ├── buddy.js            # AI 学习伙伴（悬浮常驻）
│   └── modules/            # 各模块专属脚本
│       ├── m1.js
│       └── ...
└── assets/                 # 图片、图标等静态资源

4. 共享基础设施先行（css/style.css + js/ 下 config/llm/progress/nav/buddy）：这些是所有页面的依赖，必须先就位。
5. 首页 index.html：学习地图（按学习阶段分组展示模块卡片）、进度可视化、路径导览、AI 伙伴入口、配置入口。
6. 各模块页：套用 references/module-patterns.md 的页面骨架，按活动清单实现交互组件。
7. 评价模块：知识闯关（题库+即时判分）、四维素养雷达图（ECharts）、徽章墙。
8. 资源模块：资源卡片、可搜索术语词典。
9. 全站完成后运行 references/quality-checklist.md 的"阶段二校验"。

3.3 核心功能实现要求

① 大模型集成（贯穿核心模块）

• 统一封装 callLLM(messages, onChunk, opts) 在 js/llm.js，所有模块复用，禁止在各模块重复实现 fetch 逻辑。
• 流式输出：fetch + ReadableStream 逐块读取 SSE，onChunk 回调实时渲染到对话气泡，营造"AI 正在打字"的真实感。
• 每个调用场景的系统提示词集中存于 js/config.js 的 SYSTEM_PROMPTS 字典，按模块/场景键取用。
• 教育引导型默认提示词：以引导者身份作答，开放性问题先启发后给参考，拒绝不当内容。
• 四重安全保障必须全部落地：系统提示词约束 / 单次输入 ≤500 字 / 前端敏感词检测 / API Key 存 localStorage 且由教师配置页填入（学生端不接触密钥）。

② AI 学习伙伴（悬浮常驻）

• 右下角悬浮圆形按钮（🤖 图标），常驻所有页面（通过 buddy.js 注入，无需每页手写）。
• 点击展开聊天面板：对话气泡区 + 输入框 + 快捷引导问题 + 流式响应。
• 采用苏格拉底式引导系统提示词：学生提问时先用反问/提示启发，不直接给完整答案。
• 面板可最小化、可拖动（可选）、移动端全屏展开。
• 保留对话历史到 localStorage（按会话），跨页面续接。

③ 视觉设计（明亮活泼、现代）

• 严格遵循 references/design-system.md：明亮色板（靛蓝/青/珊瑚/暖黄/薄荷）、渐变封面、圆角卡片、柔和阴影、阶段配色映射。
• 设计风格新颖现代：大圆角、柔和阴影、微动效（hover 上浮、过渡）、清晰的层级与留白。
• 保持教育内容的专业性与可读性：正文行高 1.7+、字号 ≥16px、对比度达标（WCAG AA）。
• 每个学习阶段一种主题色，模块卡片左侧色条、徽章、路径指示器按阶段配色。

④ 学习资源展示

• 资源中心模块：系统化呈现学习材料，支持分类（阅读/视频/工具/术语）。
• 资源卡片含标题、简介、适学年级、类型标签；可搜索术语词典（实时过滤）。
• 资源格式：文字、外链视频、工具清单等。

⑤ 互动学习模块（可视化原理展示）

• 按阶段一活动清单实现，常见模式见 references/module-patterns.md：翻牌卡片、判断游戏、可点击时间轴、拖拽演示、Canvas 分类实验、神经网络可视化、对话实验室、项目式学习引导卡、闯关游戏、对比辨别、投票组件等。
• 原理可视化优先用原生 Canvas API；素养画像用 ECharts 雷达图。
• 互动组件必须有即时反馈（得分、解析、动效），照顾差异化（基础/进阶分层）。

⑥ 进度追踪系统

• js/progress.js 统一管理 localStorage 读写：模块完成状态、测验成绩、徽章解锁、学生作品、素养四维数据。
• 首页学习地图读取进度渲染完成状态（未开始/进行中/已完成）。
• 支持学习目标设定与达成度监控：徽章墙、雷达图前后对比、错题解析。
• 数据键名统一加项目前缀，避免冲突。

3.4 用户体验与工程质量

• 导航：顶部导航栏全站共享，nav.js 高亮当前模块；每个模块页顶部显示"你在哪一阶"路径指示器。
• 响应式：CSS 媒体查询适配桌面/平板/手机；移动端隐藏侧栏 TOC、网格降为单列、Canvas 监听 resize 重绘、拖拽降级为点击选择。
• 性能：CSS/JS 外联复用、图片懒加载、Canvas 重绘节流、大模型调用加 loading 态与超时处理。
• 可访问性：语义化 HTML、按钮带 aria-label、键盘可达、对比度达标。
• 代码质量：ES6+ 模块化、async/await、注释清晰、命名一致、无内联硬编码配置。每个 JS 文件顶部注释说明职责。

4. 交付与收尾

1. 在项目根目录生成 README.md：说明项目结构、运行方式（双击 index.html）、大模型配置方法（教师配置页）、技术栈、教学设计文档使用说明。
2. 运行 references/quality-checklist.md 全部校验，向用户报告通过项与遗留项。
3. 向用户说明：如何在教师配置页填入 API Key、如何使用"测试连接"验证配置、如何部署、如何扩展模块。
4. 不要自行为用户提交 git commit 或推送，除非用户明确要求。

5. 常见陷阱（务必规避）

• ❌ 阶段一模块数与阶段二 pages/ 文件数不一致。
• ❌ 模块页里重复实现 fetch 调用，而非复用 callLLM。
• ❌ AI 学习伙伴只在部分页面出现（必须 buddy.js 全站注入）。
• ❌ 把 API Key 硬编码进前端代码。
• ❌ 用了 React/Vue/构建工具，破坏"双击即运行"约束。
• ❌ 互动活动描述空泛，导致网站无处下手——回到阶段一补具体。
• ❌ 评价维度数与设计目标维度数对不上。
• ❌ 移动端 Canvas 实验不可用（未处理 resize 与触摸坐标）。
• ❌ 模板字符串内三元运算符引号未闭合——id==='m7?'贯穿' 会导致整段 <script> 解析失败，首页地图空白、按钮无响应。正确写法：id==='m7'?'贯穿'。详见 references/core-infrastructure.md 第 9.1 节。
• ❌ 导航链接路径不考虑上下文——首页（根目录）和模块页（pages/）对同一文件的相对路径不同。必须使用 resolveNavLinks() 动态解析，不可硬编码。详见 references/core-infrastructure.md 第 9.2 节。
• ❌ ECharts CDN 离线导致页面崩溃——m7 评价页引入 ECharts CDN，离线时 echarts 未定义会中断后续脚本。必须检测 typeof echarts === 'undefined' 并回退。详见 references/core-infrastructure.md 第 9.4 节。
• ❌ buddy.js 对话历史使用 role:'bot' 导致 400 错误——OpenAI 兼容 API 只接受 system/user/assistant 三种角色，'bot' 是无效值。内部存储可用 'bot'，但发送前必须映射为 'assistant'。详见 references/core-infrastructure.md 第 9.5 节。
• ❌ API URL 缺少 /v1/ 路径前缀——DeepSeek 等服务的正确端点为 /v1/chat/completions，用户常误填为 /chat/completions。llm.js 的 normalizeApiUrl() 会自动补全，配置页保存时也需调用。详见 references/core-infrastructure.md 第 9.6 节。
• ❌ 教学设计的教学目标维度与课程设计方案不一致——教学设计第一章维度数与名称必须与课程设计方案 1.2 一一对应，不能增减或改名。
• ❌ 教学过程的网站模块引用与课程设计方案脱节——每个课时的网站操作必须引用课程设计方案第四章对应模块的具体页面和活动，不能写模糊描述。
• ❌ 教学目标使用内部心理动词——"了解""理解""掌握"不可观察检测，必须改为"能辨认""能分析""能设计"等行为动词，并附达成标准。

6. 执行准则

• 先读后写：每进入一个阶段/子任务，先 Read 对应模板与参考文件，不凭记忆复述。
• 一致性优先：任何数量型决策（模块数、阶段数、维度数）改动，必须同步所有相关章节与文件。
• 具体优于抽象：活动描述、代码注释、用户提示都写具体可执行的内容。
• 分步交付：阶段一完成→用户确认→阶段一·5→用户确认→阶段二；阶段二按"基础设施→首页→模块→评价/资源"顺序推进，每步自检。
• 保留可运行性：任何时刻生成的网站都应能双击运行，不依赖未生成的文件。