1. 摘要
用 TRAE SOLO 从零打造了两个递归算法可视化动画——sum(4) 线性递归树和 fib(5) 二叉递归树，支持逐步动画播放、暂停、单步调试、速度调节，并自动导出为 GIF 动图。原本需要手写数百行 HTML/CSS/JS 代码的前端交互项目，全程通过自然语言对话完成，零手写代码。
2. 背景
我是一名编程教育工作者，在讲解递归算法时，学生最常问的问题是：“递出去和归回来到底是怎么执行的？” 传统的文字讲解和静态图很难让学生直观理解递归的调用栈展开与回溯过程，尤其是 fib 函数的重复计算问题，用嘴讲十遍不如让学生看一遍动画。但我并非前端开发者，手写交互动画对我来说门槛很高，希望用 SOLO 快速实现。
3. 实践过程
任务拆解
我把整个任务拆成三个递进的阶段：
静态递归树 → 先把树的结构画出来，确认布局正确
交互动画 → 加上逐步播放、暂停、高亮等交互能力
导出 GIF → 把动画转为可分享的动图
关键 Prompt 与操作过程
第一步：静态递归树
“sum(4) 的递归树，画好这个递归树”
SOLO 生成了基础版 HTML，但"递出去"和"归回来"的逻辑不够清晰。
“没有把递出去和归回来的逻辑清晰地画出来”
SOLO 重新设计，用蓝色↓箭头表示递出去、红色↑箭头表示归回来，左右分栏布局。
“递出去放到箭头左边，箭头挨着 sum(4) 这个框，归回来在箭头右边，箭头挨着从下往上返回的框”
SOLO 精确调整了箭头位置，让"从谁调用出去"和"返回给谁"一目了然。
第二步：fib(5) 递归树 + 动画
“fib(5) = 5 的完整计算过程，画这个的递归树动画”
SOLO 一次性生成了完整的二叉递归树动画，包含 30 步逐步演示、播放/暂停/单步/速度调节，还用紫色和绿色标记了重复计算的节点。
“请给出一个自动播放版，第四第五层的框再隔开一些，不碰到”
SOLO 调整了画布尺寸和节点间距，页面加载后自动播放动画。
第三步：导出 GIF
“把这个动画转为 gif 图片”
SOLO 编写了 Playwright 截图脚本 + Pillow 合成脚本，自动逐帧截图并合成 GIF 动图。
踩过的坑
Excel 处理：最初用 pandas 读写 Excel 会破坏原始格式（合并单元格、标题行丢失），后来改用 openpyxl 直接操作单元格，完美保留原格式
Playwright 安装：首次运行时 Chromium 未下载成功，改用系统已安装的 Chrome 路径解决
节点间距：fib 树底层节点密集，框会重叠，通过加大画布宽度和调整 left/top 坐标解决
4. 成果展示
sum(4) 线性递归树
清晰的"递出去 ↓"和"归回来 ↑"双向箭头，左侧蓝色箭头从上层框出发，右侧红色箭头返回到上层框，底部附完整执行流程表。
fib(5) 二叉递归树动画
递出去阶段 — 蓝色高亮，逐层深入调用：
到达停止条件 — fib(1) 和 fib(0) 红色边框，直接返回：
归回来阶段 — 红色高亮，逐层返回计算结果：
重复计算警告 — fib(3) 第2次出现，紫色标记 + 橙色提示"又算了一遍！"
最终结果 — fib(5) = fib(4) + fib(3) = 3 + 2 = 5
GIF 动图
fib(5) 递归树动画已导出为 GIF，36 帧，约 947KB，无限循环播放。
5. 效果与总结
提效多少？
原本我需要学习前端动画开发（HTML/CSS/JS/SVG），预估至少需要 2-3 天学习和编码时间。使用 SOLO，从提出需求到最终导出 GIF，全程约 30 分钟，提效 90%+。
SOLO 在流程中做了什么？
代码生成：从零生成完整的 HTML/CSS/JS 交互动画，包括 SVG 连线、CSS 动画、JS 状态机
布局调整：根据反馈精确调整节点坐标、间距、箭头位置
工具链整合：编写 Playwright 截图脚本 + Pillow GIF 合成脚本，打通"动画→动图"的全流程
问题修复：自动排查 Excel 格式丢失、浏览器驱动缺失等问题
可复用的方法
递进式开发：先静态 → 再交互 → 再导出，每步确认效果后再推进
精确描述布局：用"箭头挨着哪个框""放在左边还是右边"这类空间描述，SOLO 能精准理解并实现
可视化优先：遇到抽象概念，直接让 SOLO 做成交互动画，比文字解释有效 10 倍
动画转 GIF：Playwright 逐帧截图 + Pillow 合成的方案可复用于任何网页动画的导出
