核心行为

当用户希望实现以下目标时，使用此技能：

• 将算法讲解转化为交互式教学页面
• 生成可运行的 HTML 算法演示
• 构建动态的算法学习平台
• 在同一教学页面中对比多个算法
• 为任意算法创建公式驱动、图表丰富、分步详解的教学内容
• 将现有算法页面升级为更强大的教学平台
• 将一次性编写的算法页面泛化为可复用的平台级结构

本技能专用于教育类页面生成，而非生产环境部署。 默认输出应具备结构清晰、交互友好、浏览器可直接运行、且以教学为导向等特征。

工作流程

除非用户明确要求跳过规划阶段，否则请严格按以下顺序执行：

1. 识别请求类型
2. 界定算法范围
3. 明确目标受众
4. 确定页面类型
5. 设计教学结构
6. 识别必须讲解的公式
7. 识别需包含数值代入的关键步骤
8. 识别交互控件
9. 识别图表与可视化组件
10. 生成结构化内容
11. 如用户提出要求，则生成可运行的 HTML
12. 执行最终质量检查

1. 识别请求类型

将用户请求归类为以下类型之一：

• 单算法教学页面
• 多算法对比页面
• 可复用的算法学习平台
• 仅规划类请求
• 完整可运行 HTML 请求
• 对已有页面或平台的升级请求

若请求宽泛或目标宏大，应优先进行规划； 若用户明确要求提供完整代码，则在完成规划后输出完整的可运行 HTML； 若请求混合了规划、对比与生成等多种意图，请依据 references/request-routing-rules.md 判断最优输出模式。

2. 识别算法范围

判断所请求内容涉及的范畴：

• 某一个具体算法
• 一组相关联的算法族
• 多个算法之间的对比
• 一种通用、可复用于多种算法的平台架构

若用户指定了具体算法，须保留该算法特有的公式与执行流程； 若用户要求构建可复用平台，则页面架构应具备模块化与可扩展性。

随后，依据 references/algorithm-family-maps.md 将请求映射至对应算法族。

利用该映射结果决定：

• 页面应重点突出的内容
• 核心公式有哪些
• 哪些环节需要数值代入
• 哪些交互方式最具教学价值
• 哪类图表最契合该算法族
• 该请求应落地为单算法页、对比页，还是可复用平台页

3. 识别目标受众

根据用户的理解水平调整输出形式。

面向初学者时：

• 使用更通俗的语言
• 减少专业术语
• 先阐释直觉理解，再引入公式
• 始终增加数值代入频次
• 优先采用显式的、分步展开的交互方式

面向进阶用户时：

• 允许更深入的数学细节
• 加入公式间的横向对比
• 解释参数的实际含义
• 强调理论层面的关键差异

4. 确定页面类型

采用以下三种页面结构之一：

• 单算法页面
• 对比页面
• 算法学习平台

参考以下文档：

• references/page-architecture.md
• references/algorithm-page-template.md
• references/comparison-page-template.md
• references/request-routing-rules.md

若请求存在歧义、混杂或多目标倾向，优先采纳 references/request-routing-rules.md 所推荐的页面类型。

5. 设计教学结构

每个算法页面均应融合以下要素：

• 直觉理解（Intuition）
• 核心公式（Formulas）
• 符号释义（Symbol explanation）
• 公式选用原因（Why the formula is used）
• 数值代入（Numerical substitution）
• 动态交互（Dynamic interaction）
• 图表展示（Charts）
• 结果总结（Results and summary）

除非用户明确要求仅提供概念性解释，否则不得生成纯概念型页面。

6. 识别必须讲解的公式

对每个关键公式，需按四层结构进行讲解：

1. 写出公式本身
2. 逐一解释各符号含义
3. 说明为何采用该公式
4. 尽可能代入具体数值进行演示

这是所有算法教学页面的强制输出范式。

7. 识别需包含数值代入的步骤

只要算法具有实际计算流程，就应在以下至少五个阶段中实施数值代入（条件允许时）：

• 初始化阶段
• 核心更新规则
• 评分或损失计算
• 迭代中间结果
• 最终结论或排序结果

若用户未提供具体数值，应构造一个小型教学示例数据集。

8. 识别交互控件

仅在能实质性提升理解效果时引入交互功能。

适合添加交互的典型场景包括：

• 参数调节滑块
• 任务切换下拉菜单
• 多阶段计算步进按钮
• 对比页面中的算法切换开关
• 随用户输入实时更新的图表

切勿仅为装饰而添加交互； 仅在算法行为随步骤、参数或变体发生明显变化时启用交互功能。

9. 识别图表与可视化组件

图表应服务于数学逻辑的表达，优先选择清晰、具教学意义的可视化形式。

常见示例包括：

• 损失曲线（loss curves）
• 得分对比柱状图（score comparison bars）
• 概率分布曲线（probability curves）
• 雷达图（radar charts）
• 残差图（residual charts）
• 累计更新图（cumulative update charts）
• 对比表格（comparison tables）

10. 生成结构化内容

当用户仅请求规划时：

• 提供结构清晰的实施计划
• 说明页面整体架构设计
• 阐述后续可拓展的升级路径
• 若用户正在优化已有页面，需评估其当前成熟度等级
• 指出最具价值的下一步升级项

当用户请求具体内容时：

• 产出结构清晰、以教学为导向的内容
• 确保各章节模块化、边界清晰
• 保障各部分内容在数学逻辑上的一致性

在最终确认规划或页面前，须依据 references/platform-upgrade-rules.md 进行评估，判断：

• 当前输出所处的成熟度等级
• 最具教学价值的下一步升级方向
• 该页面是否应维持单算法形态，或演进为对比页/平台页
• 各项改进措施中，哪些应优先落实以最大化教学收益

11. 如用户提出请求，则生成可运行 HTML

生成 HTML 时需遵守以下规范：

• 优先采用单文件 HTML 形式
• 确保输出可在浏览器中直接运行
• 在必要时集成 Chart.js 与 MathJax
• 保持布局专业、即开即用
• 确保交互流畅且对初学者友好
• 保证最终输出完整、内部逻辑自洽
• 不得遗漏任何必需的闭合标签或脚本块

新建单文件页面时，请基于 assets/html-starter-template.html 提供的模板启动开发。

12. 执行最终质量检查

在返回任一主要输出前，须依据 references/output-quality-checklist.md 进行校验。

检查项包括：

• 结构清晰度
• 教学价值密度
• 公式讲解质量
• 数值代入完整性
• 交互实用性
• 图表相关性
• HTML 完整性
• 平台模式下的可复用性（如适用）

若上述多项指标表现薄弱，须优化后再定稿。

设计规范

请参考以下指导文档：

• references/page-architecture.md
• references/explanation-patterns.md
• references/interaction-patterns.md
• references/algorithm-page-template.md
• references/comparison-page-template.md
• references/writing-rules.md
• references/algorithm-family-maps.md
• references/platform-upgrade-rules.md
• references/request-routing-rules.md
• references/output-quality-checklist.md

输出规范

针对规划类请求

输出应包含：

• 页面目标
• 页面类型
• 教学结构设计
• 需讲解的核心公式
• 数值代入的关键节点
• 拟设交互控件
• 拟用图表清单
• 当前成熟度等级（如适用）
• 最具价值的下一步升级项
• 推荐升级路径

针对 HTML 类请求

输出应包含：

• 完整、可运行的 HTML 文件
• 所有必需的功能模块与章节
• 公式呈现及对应的数值解释
• 如有助于理解，应包含交互控件
• 如有助于理解，应包含图表
• 连贯、循序渐进的教学动线
• 公式、数据、控件、图表与结果之间高度一致、相互印证

针对升级类请求

输出应包含：

• 当前页面已实现的功能
• 当前缺失的关键能力
• 当前所处的成熟度等级
• 按优先级排序的最有价值升级项
• 推荐的目标架构形态
• 如用户提出要求，应提供更新后的内容文本或更新后的 HTML

重要边界说明

• 本技能适用于学习页面、演示页面、课程页面、算法解析器及学习工具等教育场景。
• 本技能不适用于生产级模型训练基础设施的构建。
• 本技能应优先保障清晰性、结构性与教学价值，而非工程复杂度。
• 若某请求更适合以静态大纲形式呈现，而非完整页面，则应首先交付大纲。
• 若请求存在歧义、宽泛或多目标混杂，须先依据 references/request-routing-rules.md 进行路由判断，再生成输出。

质量标准

本技能输出的优质成果，应使用户产生如下感受：

• 算法变得易于理解
• 公式不再抽象难懂
• 数值演算过程清晰可见
• 页面可直接运行并用于正式展示
• 页面结构可平滑复用于其他算法
• 当用户希望持续完善平台时，升级路径清晰明确