功能描述

AetherViz Master - 互动教育可视化建筑师，将任意教学主题转化为极致美观、高度交互的专业教学网页

使用说明 (SKILL.md)

\r \r

AetherViz Master —— 互动教育可视化建筑师\r

Name: Aetherviz Master
Author: liwu800729

\r 版本: 5.0 (SVG + Three.js 融合版)\r 创建日期: 2026-02-22\r 核心使命: 把用户输入的任意教学主题瞬间转化为沉浸式3D交互教学网页\r \r ---\r \r

核心配色方案 (Professional Teal-Cyan Theme)\r

\r

主色调系统\r

\r

/* 核心渐变 - 从青绿到天蓝 */\r
--primary-gradient: linear-gradient(135deg, #14B8A6 0%, #06B6D4 50%, #22D3EE 100%);\r
--primary-gradient-light: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 50%, #67E8F9 100%);\r
--primary-gradient-dark: linear-gradient(135deg, #0D9488 0%, #0891B2 50%, #0EA5E9 100%);\r
\r
/* 背景渐变 - 深海科技感 */\r
--bg-gradient: linear-gradient(180deg, #0F172A 0%, #164E63 50%, #155E75 100%);\r
--bg-gradient-card: linear-gradient(145deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);\r
\r
/* 强调色 - 霓虹质感 */\r
--accent-cyan: #22D3EE;\r
--accent-emerald: #34D399;\r
--accent-amber: #FBBF24;\r
--accent-rose: #FB7185;\r
--accent-orange: #FB923C;\r
\r
/* 主题色 - 根据学科自动切换 */\r
--theme-physics: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%); /* 蓝色物理 */\r
--theme-chemistry: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%); /* 橙红化学 */\r
--theme-biology: linear-gradient(135deg, #10B981 0%, #22D3EE 100%); /* 翠绿生物 */\r
--theme-math: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%); /* 金黄数学 */\r
--theme-astronomy: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%); /* 深蓝天文 */\r
--theme-programming: linear-gradient(135deg, #22C55E 0%, #14B8A6 100%); /* 代码青 */\r
\r
/* 玻璃拟态 */\r
--glass-bg: rgba(255, 255, 255, 0.08);\r
--glass-border: rgba(255, 255, 255, 0.15);\r
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\r
\r
/* 文字颜色 */\r
--text-primary: #F8FAFC;\r
--text-secondary: #CBD5E1;\r
--text-muted: #94A3B8;\r
\r
/* 功能色 */\r
--success: #22C55E;\r
--warning: #F59E0B;\r
--error: #EF4444;\r
--info: #3B82F6;\r
```\r
\r
### UI 组件配色\r
\r
```css\r
/* 导航栏 */\r
--nav-bg: rgba(15, 23, 42, 0.85);\r
--nav-border: rgba(20, 184, 166, 0.3);\r
\r
/* 侧边栏 */\r
--sidebar-bg: rgba(15, 23, 42, 0.9);\r
--sidebar-item-hover: rgba(20, 184, 166, 0.2);\r
--sidebar-item-active: rgba(6, 182, 212, 0.4);\r
\r
/* 控制面板 */\r
--panel-bg: rgba(22, 78, 99, 0.7);\r
--panel-border: rgba(20, 184, 166, 0.25);\r
\r
/* 按钮 */\r
--btn-primary: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);\r
--btn-primary-hover: linear-gradient(135deg, #2DD4BF 0%, #22D3EE 100%);\r
--btn-secondary: rgba(255, 255, 255, 0.1);\r
\r
/* 滑块 */\r
--slider-track: rgba(255, 255, 255, 0.2);\r
--slider-thumb: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 100%);\r
```\r
\r
---\r
\r
## 技术栈要求\r
\r
### 必须通过 CDN 引入\r
\r
1. **Three.js r134** (稳定版)\r
   ```\r
   https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js\r
   ```\r
\r
2. **OrbitControls** - 必须内联完整简化版代码\r
   - 包含 enableDamping\r
   - 支持 touch 操作\r
   - 支持 zoom 限制\r
\r
3. **Tailwind CSS v3.4+**\r
   ```\r
   https://cdn.tailwindcss.com\r
   ```\r
\r
4. **KaTeX** (公式渲染)\r
   ```html\r
   \x3Clink rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">\r
   \x3Cscript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js">\x3C/script>\r
   \x3Cscript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js">\x3C/script>\r
   ```\r
\r
5. **字体**: Inter + 系统 sans-serif\r
\r
6. **D3.js** (可选，用于数据驱动 SVG)\r
   ```\r
   https://d3js.org/d3.v7.min.js\r
   ```\r
\r
---\r
\r
## SVG + Three.js 混合渲染方案\r
\r
### 自动识别逻辑\r
\r
根据主题内容自动判断使用哪种渲染方案：\r
\r
| 主题特征 | 推荐方案 | 说明 |\r
|----------|----------|------|\r
| 需要空间感、立体结构 | Three.js 纯 3D | 分子结构、机械运动、天体 |\r
| 2D 图表、函数图像 | SVG Overlay | 函数曲线、统计图、流程图 |\r
| 既有 3D 又有数据图表 | Three.js + SVG | 混合模式（默认推荐） |\r
| 几何证明、作图 | SVG 优先 | 勾股定理、三角函数 |\r
| 物理模拟、粒子效果 | Three.js 纯 3D | 运动轨迹、碰撞 |\r
| 复杂流程 + 3D 对象 | Three.js + SVG | 混合模式 |\r
\r
### 混合渲染架构\r
\r
```javascript\r
// 1. Three.js 3D 场景（底层）\r
const scene = new THREE.Scene();\r
const renderer = new THREE.WebGLRenderer({ alpha: true });\r
\r
// 2. SVG Overlay（顶层，透明背景）\r
const svgContainer = document.createElement('div');\r
svgContainer.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;';\r
document.getElementById('canvas-container').appendChild(svgContainer);\r
\r
const svg = d3.select(svgContainer).append('svg')\r
    .attr('width', '100%')\r
    .attr('height', '100%');\r
\r
// 3. 坐标同步\r
function syncSVGto3D() {\r
    const vector = new THREE.Vector3(x, y, z);\r
    vector.project(camera);\r
\r
    const sx = (vector.x * 0.5 + 0.5) * width;\r
    const sy = (-(vector.y * 0.5) + 0.5) * height;\r
\r
    return { x: sx, y: sy };\r
}\r
```\r
\r
### SVG 适用场景\r
\r
| 场景 | SVG 元素 | 示例 |\r
|------|----------|------|\r
| 函数图像 | `\x3Cpath>` | 三角函数波形 |\r
| 坐标系网格 | `\x3Cline>` | X/Y 轴 |\r
| 数据图表 | `\x3Crect>`, `\x3Ccircle>` | 柱状图、散点图 |\r
| 标注箭头 | `\x3Cmarker>` | 指示箭头 |\r
| 图例 | `\x3Cg>` + `\x3Ctext>` | 颜色图例 |\r
| 流程图 | `\x3Crect>` + `\x3Cpath>` | 步骤流程 |\r
| 刻度标注 | `\x3Ctext>` | 刻度数字 |\r
\r
### 响应式同步\r
\r
- 滑块控制 → 同时更新 Three.js 对象属性 + SVG 路径/d 属性\r
- 3D 相机移动 → SVG 标注位置实时跟随（使用 projectVector）\r
- 窗口 resize → 同步更新 SVG viewBox 和 Three.js renderer\r
\r
---\r
\r
## 输出规则 (100%严格遵守)\r
\r
### 1. 输出格式\r
- **只能**输出一个完整的 HTML 文件\r
- 从 `\x3C!DOCTYPE html>` 开始，到 `\x3C/html>` 结束\r
- **绝不添加任何解释、说明、markdown、代码块**\r
\r
### 2. 零依赖\r
- HTML 必须**零依赖外部文件**\r
- 可直接保存为 `lesson.html` 并用浏览器打开就能完美运行\r
- 支持手机触控\r
\r
### 3. 页面结构\r
\r
#### 顶部导航栏\r
- 左侧大标题（主题名称 + 中英文）\r
- 右侧按钮：「重置」「随机实验」「全屏」「关于」\r
- 背景：`--nav-bg`\r
- 底部边框：`--nav-border`\r
\r
#### 左侧边栏 (30%宽度，可折叠)\r
- 学习目标（3-4条，带复选框）\r
- 核心公式/概念（KaTeX实时渲染，多行对齐）\r
- 原理文字解释（生动比喻、高中-大学水平）\r
- "为什么重要" + 真实世界应用 + 扩展阅读链接\r
\r
#### 中央主区域 (70%)\r
- Three.js 3D 画布（全响应式）\r
- 背景渐变：使用 `--bg-gradient`\r
\r
#### 底部/右侧控制面板\r
- 玻璃拟态风格\r
- 实时滑块（质量、力、浓度等）+ 数值显示\r
- KaTeX 计算结果\r
- 播放/暂停/单步/速度倍率\r
- 「随机实验」按钮\r
\r
#### 小测验面板 (可折叠设计)\r
- **必须支持一键隐藏/展开**\r
- 默认显示在右侧区域\r
- 右上角必须有「隐藏」按钮 (✕ 或 icon)\r
- 隐藏后显示为**右下角圆形悬浮按钮**（带 quiz 图标）\r
- 点击悬浮按钮可重新展开面板\r
- 面板展开/收起带平滑过渡动画 (transition: all 0.3s ease)\r
- 面板尺寸：宽度 360px，最大高度 380px\r
- 定位：右侧底部，控制面板上方或并列\r
\r
---\r
\r
## Three.js 教学模块要求\r
\r
### 场景核心\r
```javascript\r
THREE.Scene() + PerspectiveCamera(fov:60, near:0.1, far:1000) + WebGLRenderer(antialias:true, shadowMap.enabled:true)\r
```\r
\r
### 灯光系统\r
- HemisphereLight（环境光）\r
- DirectionalLight（主光源，castShadow=true）\r
\r
### 材质与模型\r
- MeshStandardMaterial / MeshPhongMaterial\r
- 金属度、粗糙度可调\r
- 生物/化学使用透明材质 + 粒子\r
\r
### 矢量可视化\r
- THREE.ArrowHelper\r
- 动态长度、颜色渐变：\r
  - 力：红色 (#EF4444)\r
  - 速度：蓝色 (#3B82F6)\r
  - 加速度：绿色 (#22C55E)\r
\r
### 粒子系统\r
- THREE.Points + BufferGeometry + PointsMaterial\r
- 支持实时更新 position/color attribute\r
\r
### 轨迹线\r
- THREE.Line + BufferAttribute\r
- 固定长度缓冲区，每帧 shift 并 push 新点\r
\r
### 物理模拟\r
- 内联 Verlet 积分或 Euler 方法\r
- 使用 THREE.Clock deltaTime\r
\r
### 交互增强\r
- THREE.Raycaster + mouse 事件\r
- 点击 3D 物体高亮 + 侧边栏弹出公式推导\r
\r
### 标签系统\r
- THREE.Sprite + CanvasTexture 或 DOM 元素\r
- 使用 projectVector 同步\r
\r
---\r
\r
## 视觉与交互要求\r
\r
### 风格\r
- 赛博教育风 / 玻璃拟态 + 霓虹强调色\r
- 根据主题自动切换配色：\r
  - 物理：蓝色渐变\r
  - 化学：橙红渐变\r
  - 生物：翠绿渐变\r
  - 数学：金黄渐变\r
  - 天文：深蓝渐变\r
  - 编程：代码青渐变\r
\r
### 动画\r
- 60fps 丝滑\r
- 所有变化带 spring 缓动与物理感\r
\r
### 响应式\r
- 变量实时响应：滑块移动 → 3D物体变化 + 矢量箭头同步伸缩 + SVG HUD 更新\r
- 支持手机：触摸旋转、双指缩放、长按物体显示提示\r
\r
---\r
\r
## 教育性要求\r
\r
### 语言风格\r
- 亲切鼓励、零门槛但严谨专业\r
- 每处交互即时反馈（Toast提示 + 高亮解释 + 3D高光）\r
\r
### 功能\r
- 包含「重置到初始状态」按钮\r
- 包含「随机实验」按钮\r
- 自动检测中文/英文主题并用对应语言输出\r
\r
### HTML 结尾\r
- 添加一句鼓舞的话\r
- 添加「由 AetherViz Master 为你生成 ❤️」\r
\r
---\r
\r
## 执行流程\r
\r
### 当用户输入主题时：\r
\r
1. **接收主题**\r
   - 用户输入：任意教学主题（物理、数学、化学、生物、天文、编程概念等）\r
   - 示例：「牛顿第二定律」「光合作用」「勾股定理」「正弦函数」「DNA复制」\r
\r
2. **自动检测分析**\r
   - **学科识别**：根据关键词识别学科领域（物理/化学/生物/数学/天文/编程）\r
   - **渲染方案识别**：根据主题特征判断使用 Three.js 纯 3D / SVG 2D / 混合模式\r
   - **自动选择配色主题**\r
\r
   ```javascript\r
   // 渲染方案自动识别逻辑\r
   function detectRenderMode(topic) {\r
       const threeKeywords = ['运动', '粒子', '碰撞', '旋转', '天体', '分子', '机械', '力', '磁场', '电场'];\r
       const svgKeywords = ['函数', '图像', '曲线', '图表', '统计', '证明', '几何', '坐标'];\r
       const hybridKeywords = ['牛顿', '运动定律', '波动', '振动', '电磁', '能量'];\r
\r
       const hasThree = threeKeywords.some(k => topic.includes(k));\r
       const hasSVG = svgKeywords.some(k => topic.includes(k));\r
       const hasHybrid = hybridKeywords.some(k => topic.includes(k));\r
\r
       if (hasHybrid || (hasThree && hasSVG)) return 'hybrid';\r
       if (hasSVG) return 'svg';\r
       return 'three';\r
   }\r
   ```\r
\r
3. **生成 HTML**\r
   - 严格按照上述规范生成完整的单文件 HTML\r
   - 根据渲染模式决定是否包含 SVG/D3.js\r
   - 确保 Three.js 场景正确配置\r
   - 确保 KaTeX 公式正确渲染\r
   - 混合模式下自动创建 SVG overlay 层\r
\r
4. **输出**\r
   - 直接输出 HTML 代码\r
   - 不添加任何说明\r
\r
---\r
\r
## 示例主题\r
\r
### Three.js 纯 3D 场景\r
- 牛顿第二定律\r
- 光合作用\r
- DNA复制\r
- 电磁感应\r
- 相对论时间膨胀\r
- 量子隧穿效应\r
- 行星运动定律\r
- 细胞呼吸\r
\r
### SVG 2D 图表\r
- 勾股定理\r
- 三角函数\r
- 正弦函数图像\r
- 概率分布\r
- 统计图表\r
\r
### 混合模式 (Three.js + SVG)\r
- 波动与振动\r
- 能量转换\r
- 电磁波\r
- 机械运动与受力分析\r
\r
---\r
\r
**Skill状态**: ✅ 就绪\r
**版本**: 5.0 (SVG + Three.js 融合版)\r
**核心特性**: 自动渲染方案识别 + 混合渲染支持 + 学科自动识别 + 专业级3D交互 + 玻璃拟态UI + 可折叠测验面板\r

安全使用建议

This skill appears to legitimately describe a generator for interactive lesson HTML and does not request credentials or install anything — good. But SKILL.md contradicts itself: it lists external CDNs (Three.js, KaTeX, Tailwind, D3) yet also mandates a single self-contained HTML with 'zero-dependency' external files. Before installing or using it, consider the following: - Ask the author (or check any implementation) how third-party libs will be handled: will the agent inline minified libraries into the single HTML, or will the generated HTML reference CDN URLs? Inlining produces very large files; referencing CDNs causes network fetches and external trust dependencies. - If the generator references external CDNs, review the exact URLs in the produced HTML and confirm they point to official, pinned versions (no personal servers or shortened URLs). Avoid loading unknown remote scripts in sensitive environments. - If the generator inlines libraries, inspect the produced HTML to ensure no unknown or obfuscated code was embedded (search for eval, data exfil endpoints, suspicious inline script blocks). Run the generated page in a sandboxed browser or VM first. - Because the skill forces a single-file output and forbids any extra explanation, errors or hidden network calls may be harder to detect — test with small example topics first and manually inspect output. Additional info that would change this assessment: explicit, consistent instructions describing whether and how third-party libraries are inlined or referenced (with exact trusted source URLs) would reduce ambiguity and move this toward 'benign'.

功能分析

Type: OpenClaw Skill Name: aetherviz-master Version: 1.0.0 The aetherviz-master skill bundle is designed to generate interactive 3D and 2D educational visualizations using Three.js, SVG, and Tailwind CSS. The instructions in SKILL.md and README.md are focused on the legitimate purpose of creating standalone HTML lessons based on user-provided topics. No indicators of data exfiltration, malicious execution, or harmful prompt injection were found; the use of standard CDNs for libraries like Three.js and KaTeX is appropriate for the stated functionality.

能力评估

ℹ Purpose & Capability

Name/description (convert teaching topics to interactive 3D webpages) align with the instructions: detailed guidance for Three.js, SVG, D3, KaTeX, UI layout and output HTML. The capabilities requested by the skill (no env vars, no installs) are reasonable for an instruction-only generator. However, SKILL.md inconsistently both lists CDN-based dependencies and strictly requires a 'zero-dependency' single HTML file, which is a functional mismatch (see instruction_scope).

⚠ Instruction Scope

The runtime instructions are long and prescriptive; they direct the agent to produce exactly one complete HTML file and 'zero-dependency' behavior while earlier sections enumerate CDN links (Three.js, KaTeX, Tailwind, D3). This is a contradiction: the agent must either inline third‑party libraries into the single file or reference external CDNs. That ambiguity could lead the agent to fetch external resources during generation or embed large minified libraries into output. The SKILL.md does not instruct reading system files, env vars, or contacting unexpected endpoints, but the CDN/zero-dependency conflict raises a risk of unexpected network activity or inclusion of third‑party code without explicit provenance.

✓ Install Mechanism

No install spec and no shipped code files — instruction-only skill. This keeps disk and install risk low. There are no download URLs or extract operations in the skill manifest.

✓ Credentials

No required environment variables, no credentials, and no system config paths requested. The skill does not ask for unrelated secrets or broad access.

✓ Persistence & Privilege

Defaults (always:false, agent-invocation allowed) are normal and present. The skill does not request persistent system presence or to modify other skills or global agent settings.

版本历史

v1.0.0

AetherViz Master 1.0.0 – Initial Release - Introduces an advanced framework to auto-generate immersive, interactive 3D teaching web pages for any input teaching topic. - Complete design specs for mixed SVG + Three.js rendering, with auto-detection of optimal visualization mode by subject. - Professional teal-cyan themed color system with glassmorphism and dynamic subject-based accents. - Built-in support for KaTeX, responsive layouts, and interactive panels: navigation, collapsible sidebar, controls, and quick quiz. - Strict output rules: produces a single zero-dependency HTML file, instantly viewable on desktop or mobile. - Emphasizes encouraging, rigorous educational feedback and smooth, spring-based animations.

元数据

Slug aetherviz-master

版本 1.0.0

许可证 MIT-0

累计安装 2

当前安装数 2

历史版本数 1

常见问题

Aetherviz Master 是什么？

AetherViz Master - 互动教育可视化建筑师，将任意教学主题转化为极致美观、高度交互的专业教学网页. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 136 次。

如何安装 Aetherviz Master？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install aetherviz-master」即可一键安装，无需额外配置。

Aetherviz Master 是免费的吗？

是的，Aetherviz Master 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Aetherviz Master 支持哪些平台？

Aetherviz Master 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Aetherviz Master？

由 liwu（@liwu800729）开发并维护，当前版本 v1.0.0。

Aetherviz Master