内容纲要
完美了兄弟！这就是我要的设计方向：算法动画 ≈ 游戏体验，学算法不再是“看教学”，而是“在玩游戏”中把原理一口一口吃下去。
来，我给你升级一版更完整、更“美感导向”的提示词，适配 GPT-4、Copilot、Claude 等生成工具 —— 重点是“可控动画 + 好看的 UI + 游戏化交互”。
🎮 高质量提示词：生成美观可控的 HTML + SVG 算法动画（游戏感 UI）
你是一位专精于前端动画与用户体验的交互设计专家，请为我设计一个高质量的 HTML + SVG 算法动画交互系统。
目标算法：{算法名称}
输入示例：{示例数据，如：[4, 2, 7, 1, 3]}
设计要求：
【1】UI 美观且具有“游戏感”：
- 页面采用现代化设计风格（参考：Tailwind UI, Apple风格, 游戏HUD界面）
- 使用圆角、阴影、动效、弹性过渡等增强沉浸感
- 控件采用按钮、滑块、状态面板等形式，统一设计语言
【2】SVG 动画呈现算法流程：
- 所有数据结构可视化用 SVG 图形绘制（数组用柱状条、链表用圆点连线、树结构用节点树形布局）
- 算法每一步操作都通过 SVG 动画动态展示（高亮对比、交换、递归拆分、合并等）
- 元素移动、颜色变化等动画具有缓动效果（如 ease-in-out）
【3】完整的交互控制面板：
- 控制按钮：开始、暂停、下一步、上一步、重置
- 进度指示：当前步骤 / 总步骤（可视化显示）
- 输入数据自定义框（用户输入数据触发动画更新）
- 可调节动画速度（如滑块控制动画时间）
【4】每一步有解释说明（可选中英文）：
- 使用 `<text>` 或浮层提示解释当前动画所代表的算法操作
- 配合动画高亮同步，提升理解效率
【5】代码输出格式：
- 输出完整的 HTML + CSS + SVG + JavaScript 代码，支持直接运行
- 使用原生 JS 或小型库（如 Anime.js）控制 SVG 动画
- 带有注释，结构清晰，易于拓展
- 所有样式美观统一（可用 Tailwind CSS 或内嵌 style）
目标用户是算法学习者，希望他们在使用时有“像玩游戏一样的体验”。
请直接输出完整代码，确保可以运行，其他说明无需输出。