| name | math-interactive-visualizer |
| description | 用户给出任何数学公式（LaTeX 或文字描述），AI 生成一个专业、美观、响应式的单文件交互网页。页面使用现代设计（深色/浅色模式、流畅动画、Tailwind + Glassmorphism）、MathJax 渲染公式、Plotly.js/Chart.js 实时绘图、参数滑块、动画演示、自测小测验，让学生通过拖拽、滑动、点击直观理解公式。 |
| license | MIT |
| compatibility | opencode |
| metadata | {"category":"education","tags":"math visualization interactive learning"} |
What I do
- 解析用户提供的公式（支持 LaTeX、方程、函数、几何、微积分、三角等）
- 自动判断最佳可视化方式（曲线图、单位圆、3D 曲面、向量动画、参数方程等）
- 生成一个完整的、单文件
math-viz/index.html，无需安装任何依赖（全部使用 CDN）
- 页面必须专业美观：采用 Tailwind CSS（via CDN）+ Glassmorphism + 流畅 CSS 动画 + 深色/浅色自动切换
- 核心交互功能：
- 公式实时编辑（MathJax + 简单输入框）
- 参数滑块（a、b、c、θ 等变量）
- 实时绘图（Plotly.js 或 Chart.js）
- 动画演示（函数轨迹、极限逼近、导数切线等）
- 关键性质高亮（零点、对称性、极值）
- 简短中文解释 + 英文术语对照
- 3-5 道互动小测验（即时反馈）
- 输出后自动打开浏览器预览（使用
open 或提示用户）
When to use me
当用户说「把这个公式做成交互网页」「帮我可视化 sin(x) + cos(2x)」「生成二次函数教学页面」「微积分极限演示」等场景时立即激活。
如果用户未明确目标年级/重点，主动询问：「是高中还是大学？重点想展示哪个性质（图形、极限、导数、积分）？需要包含测验吗？」
How to execute
- 在当前目录创建
math-viz/ 文件夹
- 在里面生成
index.html（完整单文件，< 300KB）
- 使用以下技术栈（全部 CDN）：
- 代码必须干净、带注释、可直接部署到 GitHub Pages 或 Vercel
- 页面结构：顶部导航 + 左侧公式面板 + 中间大可视化区 + 右侧解释/测验面板（移动端自动折叠）
- 始终使用中文界面（标题、按钮、解释），英文公式符号保留
Best Practices
- 视觉：深色模式默认，玻璃拟态卡片，微光阴影，60fps 动画
- 交互：所有参数实时更新，无延迟；添加「重置」「分享链接」按钮
- 可访问性：键盘支持、屏幕阅读器友好、高对比度
- 性能：不超过 3 个外部 CDN，懒加载 Plotly
- 教育性：每张图都有「为什么这样动」的文字提示
- 避免：不要用 React/Vue（保持单文件简单），不要嵌入后端
Examples
示例1 用户输入：y = x² - 4x + 3
→ 生成二次函数网页：a/b/c 滑块、抛物线实时变化、顶点坐标、与 x 轴交点、拖动顶点动画、5 道测验
示例2 用户输入：lim_{x→0} (sin x)/x
→ 生成极限逼近动画：x 滑块、sinx/x 曲线 + 单位圆同步动画、表格数值逼近
示例3 用户输入：sin(2θ) 的图像
→ 生成单位圆 + 正弦波联动动画，θ 滑块，显示双角公式推导
