# Edu Sci Viz > 科学可视化科普技能：把任何数学或科学概念（日食、月食、太阳系、四季、月相、潮汐、 卫星轨道、板块运动、光的折射、彩虹、时区、极昼极夜、氧化还原、铝热反应……）做成一页 "单文件互动科普 HTML"。采用编辑部科学手册风（暖米白纸底 + 深海军蓝实验区 + 红/琥珀强调 + 宋体大标题 + 等宽参数）。核心流程：事实核验→直觉模型→正式定义→互动实验（滑杆+实时反馈）→ 边界说明→来源追溯→单文件组装→自检交付。三维用 Three.js（CDN importmap），二维用 HTML Canvas；每个主题交付一个可直接在浏览器打开的自包含 .html。触发词：科学可视化, 可视化科普, 互动科学实验, 科学交互演示, 把XX做成互动页面, 像挂谷猜想那样做个科普页, 科学科普页; 主题词: 日食, 月食, 潮汐, 卫星轨道, 板块运动, 光的折射, 折射, 全反射, 太阳系, 四季, 月相, 彩虹, 氧化还原, 配平, 化学方程式, 化学反应, 铝热反应, 燃烧, 镁条燃烧, 镁, 厄尔尼诺, 拉尼娜, ENSO, 气候, 洋流; English: interactive science visualization, science experiment page, science popularization page. - Skill: `liangdabiao/edu-sci-viz` (Agent Skill, multi-file: 8 files) - Install (CLI): `npx skillmds@latest add liangdabiao/edu-sci-viz` - Raw SKILL.md: https://api.skillmd.com/api/skills/liangdabiao/edu-sci-viz/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: liangdabiao (https://skillmd.com/u/liangdabiao) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/liangdabiao/edu-sci-viz --- # edu-sci-viz：单文件互动科普页 ## 定位 把任何数学/科学概念变成"电脑手机都能打开的单页互动实验"，产出自包含的单个 `.html`。 不从一串定义和公式开始，而是让读者通过拖滑杆、旋转、缩放先建立直觉，再进入正式定义、边界说明和权威来源。只要问题里存在**空间关系、时间变化、尺度变化或参数影响**，互动实验就有发挥空间。参考蓝本：sci-viz-lab（挂谷猜想 / 日食 / 潮汐 / 光的折射 等 10 个场景）。化学主题经验见 [references/chemistry.md](references/chemistry.md)。地理·气候主题可用"hero 深色剖面 + 直觉区浅色时间序列"双场景（蓝本 `enso.html`：厄尔尼诺太平洋剖面 + Niño 3.4 序列）。 ## 与现有技能的边界 完全独立，不并入任何现有 edu-* 技能。领域交叉时可选联动： | 主题 | 本技能产出 | 交叉技能 | |------|-----------|---------| | 日月食 / 四季 / 月相 / 潮汐 | 科普互动页 | edu-geo（地理课程） | | 光的折射 / 全反射 / 卫星轨道 | 科普互动页 | edu-physics（物理课程） | | 板块运动 | 科普互动页 | edu-geo | 本技能做"叙事科普"，现有技能做"题面 + 分步解析 + 画板"的课件；两者不互替。 ## 依赖 无构建工具、无 Python 依赖。模板 `templates/board-sci.html` 是自包含单页：设计系统 + 页面骨架 + 通用运行时（阅读进度 / 暂停 / 渲染循环）+ importmap。Three.js 走 CDN importmap（3D 才需要），2D Canvas 场景零网络依赖。 ## 核心流程（8 步） 1. **事实核验**：先查权威来源（官方页面、原始论文、可靠综述）再动手；禁止虚构定理、数字、引文和结论 2. **直觉模型**：把抽象概念转成可操作的画面，先建立"这道题到底在问什么"的直觉 3. **正式定义**：直觉之后给出准确定义与关键概念区分 4. **互动实验设计**：参数滑杆 + 实时反馈；拖动旋转、滚轮缩放、重置视角、暂停；参数改变后立即更新模型与 readout 5. **边界说明**：明确演示只用于建立直觉；单列"这个模型简化了什么" 6. **来源追溯**：所有重要结论回到官方/原始论文/可靠综述，页面末尾列出来源链接 7. **单文件组装**：复制 `templates/board-sci.html`，替换叙事 HTML、实验台与控制区、场景模块 8. **自检交付**：浏览器实测 + 控制台 + 响应式；交付单个 `.html` 到当前工作目录 详细方法论见 [references/workflow.md](references/workflow.md)。 ## 生成方式 从 `templates/board-sci.html`（内置"光的折射"可运行示例）复制一份，替换四处： 1. `` 与 hero 文案 2. 分节叙事 HTML（直觉模型 → 正式定义 → 边界说明 → 来源） 3. hero 实验台 `lab-shell`（画布 + 滑杆 + 预设 + readout） 4. 底部「场景模块」`<script>` **保留**：`<head>` 设计系统 `<style>`、通用运行时 `<script>`、importmap。视觉风格一律继承模板，禁止另造。 三/二维选择：三维必须（如日地月几何、轨道）用 Three.js + OrbitControls；二维够用的用 Canvas 2D。 ## 场景模块接口 场景模块是底部一个 `<script>`（2D）或 `<script type="module">`（3D）： - 顶层做初始化：找画布、绑滑杆、建 Three.js 场景、算初始状态 - 暴露 `window.SciScene = { update(dt) }`，由模板运行时每帧调用 - 检查 `window.__sciPaused` 决定是否推进自动运动；3D 场景暂停时仍需 render 以保证拖动响应 - `dt`（秒）由运行时封顶 ≤0.05s；几何体初始化时创建，每帧只改变换 ## 视觉规范（继承模板，禁止另造） - 主背景暖米白 `#f3efe5`；实验区深海军蓝 `#07182d`；强调红 `#b41f24` + 琥珀 `#e5a526` - 中文大标题宋体气质；参数/编号/图注等宽字体 - 大量细线、编号、坐标网格和留白；科学、克制、现代 - 禁止大面积渐变、玻璃卡片、荧光科技风和过度圆角 ## 事实核验规则 - 只信官方页面、原始论文、可靠综述；区分相邻易混概念；写清"已确认 / 仍开放" - 禁止虚构数字、公式、引文、结论；数值采用近似时在 `source-policy` 注明口径 ## 完成标准 - 页面在 390×844、1440×900、1920×1080 下无横向滚动；控件键盘可达；遵守 prefers-reduced-motion - 所有滑杆、按钮、拖动、缩放、重置、暂停实测可用，浏览器控制台无报错 - hero 标题不溢出文字列压到右侧实验区：标题每行默认 ≤6 汉字（模板 h1 已封顶 68px）；行更长时在场景样式里覆盖 `white-space: normal` 让其折行（详见 workflow「排版陷阱」） - 边界说明与来源链接完整，无虚构内容 - 交付单一 `.html` 在当前工作目录，cwd 不留其它文件 ## 目录 - `templates/board-sci.html` — 设计系统 + 页面骨架 + 通用运行时 + 光的折射示例 - `templates/prompt-template.txt` — 主题生成提示词配方（五处替换） - `references/workflow.md` — 8 步方法论详解与场景接口约定 - `references/chemistry.md` — 化学主题经验（公式下标、配平数据模型、反应动画、画布布局） - `examples/` — 已产出、已验证的单文件范例（eclipse.html、tides.html）