GitHubDaily

一个 Skill,快速上手开源项目!

自从有了 Claude Code、Codex 等 AI 编程工具后,人人都在 Vibe Coding 项目。

有部署上线的网站,有自动化的脚本,甚至做出一个可商业化的产品。

可这些项目底层用了什么技术、怎么实现的,多数时候我们都说不出来。

一旦出现 Bug,完全不懂技术的朋友,有时候很难快速解决问题。

这种「造得出,却看不懂」的情况,相信大部分只靠 AI 写代码的朋友都深有体会。

直到最近,我在 GitHub 上发现一个开源技能:Codebase to Course,已斩获 4700+ Star。

image-20260617164709870

装上这个 Skill,能够把任意一个代码仓库,变成一份精美、可交互的 HTML 学习课程。

不只是跟我们讲理论知识,而是带着我们一步步了解项目里每个代码作用。

而且不依赖任何环境,生成的交互式课程,离线也能打开学习查看。

对于技术小白,它里面提供的代码对照功能颇为实用。

左边是项目实打实的代码,右边则使用通俗易懂的大白话,给我们解释这段代码具体作用。

值得留意的是,左边的代码没经过任何简化,不像有些教程会改简单了再给我们看。

image-20260617164052065

光是了解项目里代码的作用还不够,我们还需要了解具体的数据请求、组织架构等。

一份数据从哪里进来,经过哪些模块处理,最后流到哪里去,通过一个动图了解清楚。

还有项目里各个组件之间是怎么协作的,会通过类似群聊对话的形式为我们演示出来。

567537261-20fb403e-7dfd-4a47-989b-bbae86ca8041

还有一个互动测验环节的设计,考核我们对项目里的每一个模块每一个文件的了解。

比如它会询问,当要给应用添加一个收藏功能,涉及到哪些文件需要修改?

还有当我们遇到看不懂的专业技术术语,把鼠标悬停在上去,就能看到一句大白话的解释。

不用单独打开一个对话,让 AI 给我们进行解释,从而不会打断我们阅读学习项目的节奏。

image-20260617164234744

codebase-to-course 作为一个技能,能够安装到任何一个支持 Skill 的 Agent 工具里。

比如想装到 Claude Code,把项目克隆到本地,再复制到 ~/.claude/skills/ 即可。

git clone https://github.com/zarazhangrui/codebase-to-course.gitcp -r codebase-to-course ~/.claude/skills/

然后在 Claude Code 里打开任意一个项目,说一句「把这个仓库变成一门课」。

就会触发这个 Skill,对项目代码分析,生成HTML 交互式课程,打开浏览器就能学习。

image-20260617164159943

不过也实话实说,生成的课程质量,取决于项目的复杂程度,以及代码量。

如果是比较大的复杂项目,可能生成的课程并不是很好,而且会消耗大量的 Token。

它比较擅长跟我们讲清楚代码的作用「是什么」,适合简单的项目,对初学者比较友好。

写在最后

往深的来看,这个 Skill 其实跟传统学习编程的路线是相反的。

过去在没有 AI 之前,我们会花费几个月的时间学习基础的开发理论知识,然后再动手。

现在我们是先用 AI 把项目实现了出来,然后再回头学习搞懂项目具体的技术实现原理。

这种学习方式,我觉得更符合和贴近现在上手学习编程的路线。

目前 AI 已让任何普通人都能把自己想法,变成能运行的代码,能落地的产品。

但是「造得出」和「看得懂」之间,始终隔着一层窗户纸,这个项目帮我们捅破了它。

不是为了把谁培养成工程师,而是让 AI 写出来的代码,慢慢变成我们能掌控住的能力。

GitHub 项目地址:https://github.com/zarazhangrui/codebase-to-course

今天的分享到此结束,感谢大家抽空阅读,我们下期再见,Respect!