Menu
AetherViz Master - 互动教育可视化建筑师，将任意教学主题转化为极致美观、高度交互的专业教学网页 Use when this capability is needed.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/tomevault-io/skills-registry --skill aetherviz-masterThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | aetherviz-master |
| description | AetherViz Master - 互动教育可视化建筑师，将任意教学主题转化为极致美观、高度交互的专业教学网页 Use when this capability is needed. |
| metadata | {"author":"andyhuo520"} |
版本: 5.0 (SVG + Three.js 融合版) 创建日期: 2026-02-22 核心使命: 把用户输入的任意教学主题瞬间转化为沉浸式3D交互教学网页
/* 核心渐变 - 从青绿到天蓝 */
--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;
/* 导航栏 */
--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%, );
: (, , , );
: (, , , );
: (, , );
Three.js r134 (稳定版)
https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js
OrbitControls - 必须内联完整简化版代码
Tailwind CSS v3.4+
https://cdn.tailwindcss.com
KaTeX (公式渲染)
<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
根据主题内容自动判断使用哪种渲染方案：
| 主题特征 | 推荐方案 | 说明 |
|---|---|---|
| 需要空间感、立体结构 | Three.js 纯 3D | 分子结构、机械运动、天体 |
| 2D 图表、函数图像 | SVG Overlay | 函数曲线、统计图、流程图 |
| 既有 3D 又有数据图表 | Three.js + SVG | 混合模式（默认推荐） |
| 几何证明、作图 | SVG 优先 | 勾股定理、三角函数 |
| 物理模拟、粒子效果 | Three.js 纯 3D | 运动轨迹、碰撞 |
| 复杂流程 + 3D 对象 | Three.js + SVG | 混合模式 |
// 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) + ) * height;
{ : sx, : sy };
}
| 场景 | SVG 元素 | 示例 |
|---|---|---|
| 函数图像 | <path> | 三角函数波形 |
| 坐标系网格 | <line> | X/Y 轴 |
| 数据图表 | <rect>, <circle> | 柱状图、散点图 |
| 标注箭头 | <marker> | 指示箭头 |
| 图例 | <g> + <text> | 颜色图例 |
| 流程图 | <rect> + <path> | 步骤流程 |
| 刻度标注 | <text> | 刻度数字 |
<!DOCTYPE html> 开始，到 </html> 结束lesson.html 并用浏览器打开就能完美运行--nav-bg--nav-border--bg-gradientTHREE.Scene() + PerspectiveCamera(fov:60, near:0.1, far:1000) + WebGLRenderer(antialias:true, shadowMap.enabled:true)
接收主题
自动检测分析
// 渲染方案自动识别逻辑
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.(k));
(hasHybrid || (hasThree && hasSVG)) ;
(hasSVG) ;
;
}
Skill状态: ✅ 就绪 版本: 5.0 (SVG + Three.js 融合版) 核心特性: 自动渲染方案识别 + 混合渲染支持 + 学科自动识别 + 专业级3D交互 + 玻璃拟态UI + 可折叠测验面板
Source: andyhuo520/aetherviz-master — distributed by TomeVault.
生成 HTML
输出