What does the Aetherviz Master AI skill do?

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

Why use Aetherviz Master on TypingMind?

Because you install it once and use it with any model. Aetherviz Master is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Aetherviz Master in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/andyhuo520/aetherviz-master/tree/master. TypingMind reads its SKILL.md and installs it as a skill you can enable per chat.

Which AI models can use Aetherviz Master?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Aetherviz Master?

As many as you like. As long as a model supports skills, you can use Aetherviz Master with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Aetherviz Master AI skill free?

Yes. It is published on GitHub by andyhuo520 under the MIT license. You only pay your own AI provider for the tokens you use.

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Aetherviz Master by andyhuo520 — AI Skill for Any LLM

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

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

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

主色调系统

css
/* 核心渐变 - 从青绿到天蓝 */
--primary-gradient: linear-gradient(135deg, #14B8A6 0%, #06B6D4 50%, #22D3EE 100%);
--primary-gradient-light: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 50%, #67E8F9 100%);
--primary-gradient-dark: linear-gradient(135deg, #0D9488 0%, #0891B2 50%, #0EA5E9 100%);

/* 背景渐变 - 深海科技感 */
--bg-gradient: linear-gradient(180deg, #0F172A 0%, #164E63 50%, #155E75 100%);
--bg-gradient-card: linear-gradient(145deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);

/* 强调色 - 霓虹质感 */
--accent-cyan: #22D3EE;
--accent-emerald: #34D399;
--accent-amber: #FBBF24;
--accent-rose: #FB7185;
--accent-orange: #FB923C;

/* 主题色 - 根据学科自动切换 */
--theme-physics: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%); /* 蓝色物理 */
--theme-chemistry: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%); /* 橙红化学 */
--theme-biology: linear-gradient(135deg, #10B981 0%, #22D3EE 100%); /* 翠绿生物 */
--theme-math: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%); /* 金黄数学 */
--theme-astronomy: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%); /* 深蓝天文 */
--theme-programming: linear-gradient(135deg, #22C55E 0%, #14B8A6 100%); /* 代码青 */

/* 玻璃拟态 */
--glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.15);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

/* 文字颜色 */
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;

/* 功能色 */
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
--info: #3B82F6;

UI 组件配色

css
/* 导航栏 */
--nav-bg: rgba(15, 23, 42, 0.85);
--nav-border: rgba(20, 184, 166, 0.3);

/* 侧边栏 */
--sidebar-bg: rgba(15, 23, 42, 0.9);
--sidebar-item-hover: rgba(20, 184, 166, 0.2);
--sidebar-item-active: rgba(6, 182, 212, 0.4);

/* 控制面板 */
--panel-bg: rgba(22, 78, 99, 0.7);
--panel-border: rgba(20, 184, 166, 0.25);

/* 按钮 */
--btn-primary: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
--btn-primary-hover: linear-gradient(135deg, #2DD4BF 0%, #22D3EE 100%);
--btn-secondary: rgba(255, 255, 255, 0.1);

/* 滑块 */
--slider-track: rgba(255, 255, 255, 0.2);
--slider-thumb: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 100%);

技术栈要求

必须通过 CDN 引入

Three.js r134 (稳定版)


https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js

OrbitControls - 必须内联完整简化版代码
- 包含 enableDamping
- 支持 touch 操作
- 支持 zoom 限制

Tailwind CSS v3.4+


https://cdn.tailwindcss.com

KaTeX (公式渲染)

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"></script>

字体: Inter + 系统 sans-serif

D3.js (可选，用于数据驱动 SVG)


https://d3js.org/d3.v7.min.js

SVG + Three.js 混合渲染方案

自动识别逻辑

根据主题内容自动判断使用哪种渲染方案：

主题特征	推荐方案	说明
需要空间感、立体结构	Three.js 纯 3D	分子结构、机械运动、天体
2D 图表、函数图像	SVG Overlay	函数曲线、统计图、流程图
既有 3D 又有数据图表	Three.js + SVG	混合模式（默认推荐）
几何证明、作图	SVG 优先	勾股定理、三角函数
物理模拟、粒子效果	Three.js 纯 3D	运动轨迹、碰撞
复杂流程 + 3D 对象	Three.js + SVG	混合模式

混合渲染架构

javascript
// 1. Three.js 3D 场景（底层）
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ alpha: true });

// 2. SVG Overlay（顶层，透明背景）
const svgContainer = document.createElement('div');
svgContainer.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;';
document.getElementById('canvas-container').appendChild(svgContainer);

const svg = d3.select(svgContainer).append('svg')
    .attr('width', '100%')
    .attr('height', '100%');

// 3. 坐标同步
function syncSVGto3D() {
    const vector = new THREE.Vector3(x, y, z);
    vector.project(camera);

    const sx = (vector.x * 0.5 + 0.5) * width;
    const sy = (-(vector.y * 0.5) + 0.5) * height;

    return { x: sx, y: sy };
}

SVG 适用场景

场景	SVG 元素	示例
函数图像	`<path>`	三角函数波形
坐标系网格	`<line>`	X/Y 轴
数据图表	`<rect>`, `<circle>`	柱状图、散点图
标注箭头	`<marker>`	指示箭头
图例	`<g>` + `<text>`	颜色图例
流程图	`<rect>` + `<path>`	步骤流程
刻度标注	`<text>`	刻度数字

响应式同步

滑块控制 → 同时更新 Three.js 对象属性 + SVG 路径/d 属性
3D 相机移动 → SVG 标注位置实时跟随（使用 projectVector）
窗口 resize → 同步更新 SVG viewBox 和 Three.js renderer

输出规则 (100%严格遵守)

1. 输出格式

只能输出一个完整的 HTML 文件
从 <!DOCTYPE html> 开始，到 </html> 结束
绝不添加任何解释、说明、markdown、代码块

2. 零依赖

HTML 必须零依赖外部文件
可直接保存为 lesson.html 并用浏览器打开就能完美运行
支持手机触控

3. 页面结构

顶部导航栏

左侧大标题（主题名称 + 中英文）
右侧按钮：「重置」「随机实验」「全屏」「关于」
背景：--nav-bg
底部边框：--nav-border

左侧边栏 (30%宽度，可折叠)

学习目标（3-4条，带复选框）
核心公式/概念（KaTeX实时渲染，多行对齐）
原理文字解释（生动比喻、高中-大学水平）
"为什么重要" + 真实世界应用 + 扩展阅读链接

中央主区域 (70%)

Three.js 3D 画布（全响应式）
背景渐变：使用 --bg-gradient

底部/右侧控制面板

玻璃拟态风格
实时滑块（质量、力、浓度等）+ 数值显示
KaTeX 计算结果
播放/暂停/单步/速度倍率
「随机实验」按钮

小测验面板 (可折叠设计)

必须支持一键隐藏/展开
默认显示在右侧区域
右上角必须有「隐藏」按钮 (✕ 或 icon)
隐藏后显示为右下角圆形悬浮按钮（带 quiz 图标）
点击悬浮按钮可重新展开面板
面板展开/收起带平滑过渡动画 (transition: all 0.3s ease)
面板尺寸：宽度 360px，最大高度 380px
定位：右侧底部，控制面板上方或并列

Three.js 教学模块要求

场景核心

javascript
THREE.Scene() + PerspectiveCamera(fov:60, near:0.1, far:1000) + WebGLRenderer(antialias:true, shadowMap.enabled:true)

灯光系统

HemisphereLight（环境光）
DirectionalLight（主光源，castShadow=true）

材质与模型

MeshStandardMaterial / MeshPhongMaterial
金属度、粗糙度可调
生物/化学使用透明材质 + 粒子

矢量可视化

THREE.ArrowHelper
动态长度、颜色渐变：
- 力：红色 (#EF4444)
- 速度：蓝色 (#3B82F6)
- 加速度：绿色 (#22C55E)

粒子系统

THREE.Points + BufferGeometry + PointsMaterial
支持实时更新 position/color attribute

轨迹线

THREE.Line + BufferAttribute
固定长度缓冲区，每帧 shift 并 push 新点

物理模拟

内联 Verlet 积分或 Euler 方法
使用 THREE.Clock deltaTime

交互增强

THREE.Raycaster + mouse 事件
点击 3D 物体高亮 + 侧边栏弹出公式推导

标签系统

THREE.Sprite + CanvasTexture 或 DOM 元素
使用 projectVector 同步

视觉与交互要求

风格

赛博教育风 / 玻璃拟态 + 霓虹强调色
根据主题自动切换配色：
- 物理：蓝色渐变
- 化学：橙红渐变
- 生物：翠绿渐变
- 数学：金黄渐变
- 天文：深蓝渐变
- 编程：代码青渐变

动画

60fps 丝滑
所有变化带 spring 缓动与物理感

响应式

变量实时响应：滑块移动 → 3D物体变化 + 矢量箭头同步伸缩 + SVG HUD 更新
支持手机：触摸旋转、双指缩放、长按物体显示提示

教育性要求

语言风格

亲切鼓励、零门槛但严谨专业
每处交互即时反馈（Toast提示 + 高亮解释 + 3D高光）

功能

包含「重置到初始状态」按钮
包含「随机实验」按钮
自动检测中文/英文主题并用对应语言输出

HTML 结尾

添加一句鼓舞的话
添加「由 AetherViz Master 为你生成 ❤️」

执行流程

当用户输入主题时：

接收主题
- 用户输入：任意教学主题（物理、数学、化学、生物、天文、编程概念等）
- 示例：「牛顿第二定律」「光合作用」「勾股定理」「正弦函数」「DNA复制」

自动检测分析

学科识别：根据关键词识别学科领域（物理/化学/生物/数学/天文/编程）
渲染方案识别：根据主题特征判断使用 Three.js 纯 3D / SVG 2D / 混合模式
自动选择配色主题

javascript
// 渲染方案自动识别逻辑
function detectRenderMode(topic) {
    const threeKeywords = ['运动', '粒子', '碰撞', '旋转', '天体', '分子', '机械', '力', '磁场', '电场'];
    const svgKeywords = ['函数', '图像', '曲线', '图表', '统计', '证明', '几何', '坐标'];
    const hybridKeywords = ['牛顿', '运动定律', '波动', '振动', '电磁', '能量'];

    const hasThree = threeKeywords.some(k => topic.includes(k));
    const hasSVG = svgKeywords.some(k => topic.includes(k));
    const hasHybrid = hybridKeywords.some(k => topic.includes(k));

    if (hasHybrid || (hasThree && hasSVG)) return 'hybrid';
    if (hasSVG) return 'svg';
    return 'three';
}

生成 HTML
- 严格按照上述规范生成完整的单文件 HTML
- 根据渲染模式决定是否包含 SVG/D3.js
- 确保 Three.js 场景正确配置
- 确保 KaTeX 公式正确渲染
- 混合模式下自动创建 SVG overlay 层
输出
- 直接输出 HTML 代码
- 不添加任何说明

示例主题

Three.js 纯 3D 场景

牛顿第二定律
光合作用
DNA复制
电磁感应
相对论时间膨胀
量子隧穿效应
行星运动定律
细胞呼吸

SVG 2D 图表

勾股定理
三角函数
正弦函数图像
概率分布
统计图表

混合模式 (Three.js + SVG)

波动与振动
能量转换
电磁波
机械运动与受力分析

Skill状态: ✅ 就绪版本: 5.0 (SVG + Three.js 融合版) 核心特性: 自动渲染方案识别 + 混合渲染支持 + 学科自动识别 + 专业级3D交互 + 玻璃拟态UI + 可折叠测验面板

Publisher	andyhuo520
Repository	`aetherviz-master`
Skill name	`aetherviz-master`
Stars	1.4K
Forks	230
Bundled files	Instructions only
License	MIT
Links	Skill source Repository

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

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

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

主色调系统

UI 组件配色

技术栈要求

必须通过 CDN 引入

SVG + Three.js 混合渲染方案

自动识别逻辑

混合渲染架构

SVG 适用场景

响应式同步

输出规则 (100%严格遵守)

1. 输出格式

2. 零依赖

3. 页面结构

顶部导航栏

左侧边栏 (30%宽度，可折叠)

中央主区域 (70%)

底部/右侧控制面板

小测验面板 (可折叠设计)

Three.js 教学模块要求

场景核心

灯光系统

材质与模型

矢量可视化

粒子系统

轨迹线

物理模拟

交互增强

标签系统

视觉与交互要求

风格

动画

响应式

教育性要求

语言风格

功能

HTML 结尾

执行流程

当用户输入主题时：

示例主题

Three.js 纯 3D 场景

SVG 2D 图表

混合模式 (Three.js + SVG)

Frequently asked questions

Related AI Skills

Set up your own AI workspace now