我把可视化科普做成了Skill，一口气上线10个互动实验，开源了。

文中我提到，这是一个可复用的流程，可以把复杂科学问题变成可操作的互动实验

最近我把整个"用交互把科学概念变直观"的过程抽象成了一个可复用的 skill，叫 z-sci-viz-lab，下次任何数学或科学概念想变成交互演示，我不用再从零写提示词和代码，直接复用这套系统，速度起码快 10 倍，你拿走用也一样

有想学习 Skills 的同学，可以看看：skills-course·zhanglearning·com

直达：github·com/tjxj/z-skills

我用它一口气给实验室加了 9 个新场景：日食、月食、太阳系、四季、月相、潮汐、卫星轨道、板块运动、光的折射，点开链接就能拖动、旋转、调参数

线上体验：sci-viz-lab·pages·dev

Skills 简介

我设计 z-sci-viz-lab 最核心目的是把任何数学或科学概念变成单页互动实验

它的核心思路和普通"做个科普网页"有本质区别——不从一串定义和公式开始，而是让读者先旋转、拖动、调参数建立直觉，再进入正式定义、结论边界和权威来源

skill 内部固化了 8 步流程：

1. 事实核验：先查官方页面、原始论文、可靠综述，禁止虚构定理、数字和引文

2. 直觉模型：把抽象概念转成可以操作的画面，三维模型或二维画布

3. 正式定义：直觉建立后再给严格表述和关键概念区分

4. 互动实验设计：参数滑杆 + 实时反馈，拖动旋转、滚轮缩放、重置视角、暂停动画

5. 边界说明：明确页面演示只用于建立直觉，不能充当数学证明

6. 来源追溯：所有重要结论都能回到权威资料，页面末尾列出来源链接

7. Vite 单文件构建：vite-plugin-singlefile 打包成单个 dist/index.html

8. Cloudflare Pages 发布：一条命令上线，得到电脑手机都能访问的地址

这 8 步分成两层：

前 6 步是内容质量把关——查证事实、建立直觉、严格定义、设计交互、明确边界、追溯来源，目的是保证一个科普页既有严谨的科学基础，又不会被误当成数学证明；

后 2 步是资产化——打成单文件、一条命令发布，把成果变成随时能分享的在线页面

这套方法论是从挂谷猜想那次实践里榨出来的，只要问题里存在空间关系、时间变化、尺度变化或参数影响，它就有发挥空间

skill 的目录结构就四个文件：

z-sci-viz-lab/
├── SKILL.md                     # 触发词、8 步流程、两种使用方式、完成标准
├── README.md
├── templates/
│   ├── prompt-template.txt      # 完整提示词模板（可替换主题复刻）
│   └── scene-template.js        # 场景模块样板（registry 接口）
└── references/
    └── workflow.md              # 方法论详解

这个 skill 有两种用法：

方式 A：提示词模板

方式 B：场景插件

适用场景

全新主题，独立做一个单页

给现有实验室加场景

用到的模板

prompt-template.txt

scene-template.js

产出

独立项目 + 单文件页面

实验室里多一个 Tab

上手门槛

会跟 AI 对话就行

需要一点 JavaScript 基础

方式 A：全新主题，生成完整单页

如果你想做一个全新的主题，比如"波动方程"或"DNA 双螺旋"：拿 templates/prompt-template.txt 这份完整提示词，替换五处内容后直接丢给 AI

• 主题对象：比如日食就换成太阳、月球、地球、光线、本影、半影

• 核心变量：比如轨道倾角、时间、相对位置、食分

• 运动规则：比如轨道运动、影锥变化、周期

• 时间线：该主题的关键历史节点

• 权威资料：官方页面、原始论文、可靠综述

模板里的事实核验、直觉模型、互动实验、边界说明、响应式检查和来源追溯要求原样保留，这些是质量底线，动了就容易产出一眼假的科普页

方式 B：场景插件，扩展现有实验室

如果你想给现有实验室添加新场景，比如"火星轨道"或"光学衍射"，不用新建项目，直接写一个场景模块丢进去，系统会自动懒加载和集成——这次 9 个新 demo 用的就是这条路：

1. 复制 templates/scene-template.js 到src/scenes/ .js

2. 实现场景接口

// 每个场景就是一个实现了统一接口的模块
export default {
  id: "my-scene",          // 与 index.html 中 Tab 的 data-scene 一致
  name: "示例场景",
  getDefaultParams() {      // 滑杆初值等默认参数
    return { sampleCount: 200, delta: 0.05 };
  },
  init(container) {},       // 激活时写入 DOM、创建渲染器、绑定事件
  update(params) {},        // 每帧调用，params 含 delta 和 time
  dispose() {},             // 切走时释放 WebGL 资源，防内存泄漏
};

1. 在src/main.js中registerScene(myScene)注册

2. 在 index.html 的.scene-tabs加一个 Tab

3. npm run dev本地验证，然后构建发布

场景由 scene-loader 懒加载：点到哪个 Tab 才 init 哪个场景，切走立即 dispose，全局只维护一个渲染循环

10 个场景挤在一个单文件 HTML 里还能保持流畅，靠的就是这个架构

本地跑起来只需要：

npm install       # Node.js >= 20
npm run dev       # 本地开发
npm run build     # 构建，产出单文件 dist/index.html
npm run deploy    # 发布到 Cloudflare Pages

技术栈是 Vite + Three.js（三维）+ HTML Canvas（二维），之所以这么选：Vite 迭代快，配合 vite-plugin-singlefile 直接输出单文件；Three.js 处理 3D 够用又不至于过重；二维交互用原生 Canvas，最轻

实测：9 个新场景逐个看

下面的 9 个新场景每一个都遵循同样的 8 步流程，但应用场景完全不同，从天文到地理再到基础物理，正好检验这套方法论的覆盖面

① 日食

日地月三球几何，本影和半影区分得清清楚楚，拖动相对位置就能看到日全食、日环食、日偏食分别是怎么发生的

日食场景：三球几何与本影半影

② 月食

月球穿过地球本影的完整过程，还解释了血月为什么是红的——地球大气把红光折射进了影子里，这个细节很多科普文都懒得讲

月食场景：月球穿过地球本影

③ 太阳系

八大行星轨道与公转周期对比，时间流速可调，把一年压缩成几秒，水星和海王星的速度差异一眼就看出来了

太阳系场景：八大行星轨道与周期

④ 四季

地轴倾角与太阳直射点移动，看完你会彻底明白季节和昼夜长短的变化根源在哪，顺便治好"夏天是因为离太阳近"这个经典误解

四季场景：地轴倾角与直射点移动

⑤ 月相

月球公转与日地月相对位置联动，从新月到满月的周期直接拖着看，比课本上那张静态八宫格图直观太多

月相场景：新月到满月的周期演示

⑥ 潮汐

月球与太阳引潮力叠加，有个太阳开关可以单独打开对比，大潮小潮和每日两次涨落的成因一目了然

潮汐场景：引潮力叠加与大潮小潮

⑦ 卫星轨道

我个人最喜欢的一个，以真实物理量模拟：发射速度滑杆从 0 拉到 13 km/s，能依次看到坠落、圆轨道、椭圆轨道和逃逸四种结局，第一宇宙速度不再是一个需要背的数字

卫星轨道场景：发射速度决定轨道形状

⑧ 板块运动

地球板块分布、运动矢量与三类板块边界的交互演示，时间轴一拉就是几百万年尺度，大陆漂移从假说变成了眼前的动画

板块运动场景：板块边界与运动矢量

⑨ 光的折射

入射角和两侧介质折射率都可调，还有介质快捷预设，慢慢加大入射角能亲眼看到全反射发生的那个临界瞬间

光的折射场景：折射定律与全反射

它们都长在同一副骨架上：先查官方资料确保不出错 → 用交互把抽象变直观 → 给严格定义让懂行的人也满意 → 明确说明这只是直觉不是证明 → 页面末尾贴上来源链接

总结

这个 Skills 诞生于我的肌肉记忆，只要是可复用的工作流，我第一想法就是把它做成 Skills，下次任何主题，说一句"像挂谷猜想那样做个科普页，主题是 XX"就能触发全流程

大家的需求可能不太一样：

• 如果你是学生或家长：直接打开下面的线上体验链接玩这 10 个实验，下次孩子问"为什么会有四季""为什么会涨潮"，拖动演示给他看，胜过千言万语

• 如果你是教育工作者或内容创作者：两种使用方式都给你铺好了，基于这套方法论给自己的领域做交互科普，比从零做网页快好几倍，还能持续复用

• 如果你是开发者：实验室仓库有 10 个场景的完整源码，skill 仓库有提示词模板和场景样板，想做类似的交互可视化，叉走改改参数就行

我家孩子正暑假，准备给他好好科普一下。下一步我准备多上点物理、化学、生物、经济学方面的内容。大家有哪些感细跟你去的评论区告诉我