我把科学可视化做成了可复用的AI Skill，开源了

上周让 Codex 帮我搞了个挂谷猜想的互动实验，做完发现一件事：把抽象科学概念变成可拖可调的交互页面，这套流程其实是标准化的——查资料、建直觉模型、设计交互参数、加边界说明、打包上线，每一步都能写进模板反复用。

于是我把这整套东西从脑子里拆出来，做成一个可复用的 Skill，取名 z-sci-viz-lab，直接开源了。

• GitHub：github.com/tjxj/z-skills
• 线上体验：sci-viz-lab.pages.dev

Skill 就是一组固化的工作流加上配套的提示词模板和代码样板。下次你说「像挂谷猜想那样做个科普页，主题是 XX」，它就能自动跑完 8 步流程，从事实核验一路走到上线发布，速度起码快 10 倍。

这 8 步分成两层。前 6 步是内容质量把关：先查官方资料和原始论文，禁止虚构定理；然后建直觉模型，让读者先旋转拖动再给正式定义；接着写严格表述、设计交互反馈、明确免责边界、追溯权威来源。后 2 步是资产化：用 Vite 打成一个单文件，一条命令部署到 Cloudflare Pages，手机电脑都能打开。

为了试试这套东西能不能覆盖不同领域，我一口气加了 9 个新场景——日食、月食、太阳系、四季、月相、潮汐、卫星轨道、板块运动、光的折射。从天文到地理到基础物理，正好看骨架稳不稳。

效果比预想的好。卫星轨道那个场景有一个发射速度滑杆，从 0 拉到 13 km/s，能依次看到坠落、圆轨道、椭圆轨道和逃逸四种结局，第一宇宙速度不再是一个需要背的数字。月食场景里还解释了血月为什么是红的——地球大气把红光折射进了影子里，这个细节很多科普文都懒得提。四季场景用地轴倾角加太阳直射点移动，直接治好了「夏天是因为离太阳近」这个经典误解。

技术栈选得也轻：Vite + Three.js 做 3D，原生 Canvas 做 2D，配合 vite-plugin-singlefile 打包成单文件。10 个场景挤在一个 HTML 里还能流畅切换，靠的是懒加载架构——点到哪个 Tab 才 init 哪个场景，切走立即 dispose，全局只维护一个渲染循环。

这个 Skill 有两种用法。不会写代码的人用方式 A：拿模板里的完整提示词，替换五处内容（主题对象、核心变量、运动规则、时间线、权威资料），丢给 AI 就能生成一个独立科普页。会一点 JavaScript 的用方式 B：复制场景样板，实现 init、update、dispose 三个接口，注册一下就行。本地跑起来只需要 npm install && npm run dev。

坦白说，这 10 个演示单独拿出来，每一个都比不上专业科普网站。但真正让我想写这篇的，不是演示本身，而是这个模式：一次 AI 辅助的实践，被抽象成可复用的工作流，然后批量产出成果。这才是 AI 工具在工作流层面的价值，而不只是每次从零写提示词。

下一步我准备往物理、化学、生物方向继续加场景。家里孩子正放暑假，正好拿这些当教具。各位如果有想看到的具体概念，评论区告诉我。