智学工坊——主题网站生成器

要解决的问题

给一个主题（比如“认识人工智能”）做一个学生自主学习网站，看起来只是写几个 HTML 页面，实际上会把人拖进三个互相纠缠的坑：

• 设计文档和代码脱节：模块清单改了，pages/ 里的文件没跟着改，或者评价维度数和设计目标维度数对不上，最后只能到处打补丁。
• LLM 集成各自为战：每个页面自己写一遍 fetch，密钥被硬编码进前端，提示词散落在组件里，改一处要翻半个项目。
• “双击即运行”被框架破坏：一旦引入 React/Vue 或构建工具，交付物就不再是双击 index.html 就能用的东西，教师和学生都得先装环境。

这个技能怎么工作

它执行一条三阶段流水线，前一阶段的文档是后一阶段的唯一需求来源：

1. 阶段一：按 references/course-design-template.md 填出七章节的课程设计文档，模块数、阶段数、维度数在各章节之间强制对齐；活动描述必须写明呈现形式、学生操作、反馈机制和所用技术（原生 JS / Canvas / LLM API / 拖拽），否则阶段二无从落地。
2. 阶段一·5：按九章节模板生成教学设计文档，教学目标用“能辨认”“能分析”这类可观察动词，教学过程里每节课的网站操作直接引用具体页面与活动。
3. 阶段二：共享基础设施先行（llm.js、progress.js、nav.js、buddy.js），再建首页、模块页、评价与资源模块。大模型调用统一走 callLLM(messages, onChunk, opts) 并支持流式渲染，系统提示词集中在 config.js 的 SYSTEM_PROMPTS 中。

适用边界与注意点

• 需要兼容 OpenAI 格式的端点和模型名；API Key 由教师配置页存入 localStorage，学生端不接触密钥。若暂时没有，会生成占位配置并预留配置页。
• 站点按纯 HTML + 原生 ES6+ 构建，第三方依赖只有 ECharts（雷达图）和可选的 Mermaid，离线时需做 typeof echarts === 'undefined' 回退，否则评价页脚本会中断。
• 移动端交互需要显式处理：Canvas 监听 resize 与触摸坐标，拖拽降级为点击选择。
• 模块数建议 6–8 个，学习阶段 3–6 阶；短期微课可用三阶，完整单元建议四阶以上。
• 使用前要先读 references/ 下的模板与指南，不要凭记忆复述代码；每个阶段的 quality-checklist.md 校验都要跑完再进入下一步。