[开源] 一个数据结构与算法可视化的 Skill, 提炼自 Claude Desktop Visualize

本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：

• 我的帖子已经打上 开源推广 标签： 是


• 我的开源项目完整开源，无未开源部分： 是


• 我的开源项目已链接认可 LINUX DO 社区： 是


• 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是


• 以上选择我承诺是永久有效的，接受社区和佬友监督： 是

以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出

项目链接与安装方式

npx skills add L0dyv/claude-algo-visualize

这是啥, 有什么用?

这是一个 可以将遇到的算法题和对应题解 可视化、按步骤拆解, 制作 交互式web页面 的skill.

也可用于复习某类数据结构/算法: 将对应的PDF(单个知识点)传给LLM, LLM 会生成相应的复习页面.

示意图:

1. 
   

   建堆 push/pop 的基本操作交互动画demo
   
   

   
   


2. 
   

   特定题目题解的动图. 能够同步代码执行位置与动图动画效果.
   
   

   
   


3. 
   

   一个堆排序的 live demo(仓库的live demo, GitHub pages部署)
   
   堆 · 全景梳理

   
   

适合谁用?

学算法, 刷LeetCode, 准备408

为啥不直接用 Claude desktop?

Claude pro 用 visualize 烧 token 太快了, 烧不起

可以给别的agent使用

可搭配的模型

1. Claude Subscription (Opus/Sonnet)


2. GLM-5.1 (Agent: OpenCode)


3. SOTA级别国模即可, 可以充分利用各家 Coding Plan. 能力不够的模型容易出现大量的逻辑错误.

不建议使用 GPT-5.4 来生成 HTML, 经常会有小问题. GPT 比较适合适合用于 review 生成的 HTML 是否有逻辑错误

第一次写skill, 希望能帮到各位正在学习/备考的佬友们

也欢迎给本项目star​^-^