Tutor AI：一个小想法如何成为代码学习工具

这个项目并非源于什么宏大计划。它来自一件小而真实的事。我当时在看一个亲戚的孩子学习C语言编程——旁听他们的课程，看他们的作业——我一直在想：这种学习方式感觉过时了。老师照着教材讲课，学生记笔记做练习。这不是完全没用，但很少能帮助任何人真正培养计算思维。

我实际观察到的

真正的问题不是学生找不到答案。而是：

• 他们会盯着一段代码，完全不知道每一行在做什么

• 他们会通读一遍，感觉自己理解了，但解释不清楚各部分是如何连接的

• 最重要的是，他们不知道这段代码到底在解决什么问题

他们学到的一切都是碎片化的。我一直在回想一个想法：学习不是收集知识点——而是把它们连接起来。

这就是Tutor的起点。

https://tutor.artdance.net/

2. 我如何一步步构建它

2.1 从一个简单的代码解释器开始

最初的想法非常简单：粘贴一段代码，然后不是得到一个模糊的总结，而是看到每一行实际在做什么以及为什么要这样写。

所以Tutor的第一个核心功能是逐行解释。它能自动检测十几种编程语言，并内置经典的C/C++示例——冒泡排序、链表、二分查找——一键即可分析。

2.2 仅仅解释是不够的

理解一次某个东西并不意味着你已经学会了它。所以我添加了三个功能：

追问式问答——点击任意一行并继续提问。AI会带着完整上下文回应，所以你永远不需要重新解释背景。自由分析——粘贴任何代码片段进行单独分析和讨论。

练习题——基于当前代码自动生成选择题、填空题和编程题。需要更多？只需点击"生成更多"。

有了这些功能，它终于开始像一个学习工具了。

2.3 让知识自主生长

即使有了解释、问答和练习，一切仍然感觉像是孤立的信息块。我真正想要的是一种知识有机生长的感觉。

所以我构建了Knowledge Canvas——一个可交互的、可无限扩展的知识图谱。AI从你的代码中提取核心概念并将它们映射为连接的节点。你可以"探索"任何节点以发现相关概念，"展开"它以生成子主题，或直接在节点上提问。

不知不觉间，你回头一看，已经构建出了自己的知识地图。

2.4 代码需要运行，而不仅仅是阅读

理解代码的关键部分是看到它运行。所以我集成了在线代码执行功能，支持C、C++、Python、Java等十几种语言。用户可以运行代码、输入数据，并在页面上直接看到输出。每次执行都会被保存，你可以向AI询问任何特定运行结果。

先运行它→阅读分析→追问→做练习。这个流程比仅仅阅读解释要自然得多。

2.5 为什么构建过程如此顺利

整个过程比我预期的顺利得多，很大程度上是因为Enter平台承担了大量繁重的工作。

• UI组件开箱即用。

• 后端基础功能——用户认证、数据库存储、行级安全——都通过内置的 Supabase 集成实现。

• **AI 模型访问是统一的:**DeepSeek、Claude、GPT、Gemini、Doubao——无需分别申请密钥和适配各个 API。只需编写一个 Edge Function 并调用它。

所以我无需在基础设施上花费数周时间,从第一天起就可以专注于真正重要的事情:解释是否足够清晰?知识点是否连贯?学习路径是否合理?

3. 如何使用 Tutor

3.1 从任何地方开始

• **有代码?**粘贴进来,点击"开始分析"

• **没有代码?**使用 AI 生成一些,然后一键填充到编辑器中

• **只是浏览?**点击预设示例——两秒内就能看到完整分析

3.2 这是一条学习路径,而非功能页面

进入后,用户自然会遵循一条路径:

1. 运行代码以感受它的功能

2. 阅读逐行分析

3. 对任何不清楚的地方提出后续问题

4. 做练习题以确认理解

5. 打开知识画布并向外探索

每一步——执行结果、对话、练习分数、知识图谱——都会自动保存。随时回来,从中断的地方继续。

4. 回顾:它真正的意义

回顾起来,Tutor 表面上是一个代码解释器。但它真正在做的是帮助人们从一段代码开始,将分散的知识连接成一个整体。

粘贴代码 → 运行它 → 逐行理解 → 提出更深层次的问题 → 练习 → 打开知识画布 → 从一个节点到下一个节点 → 看着地图成长为你自己的。

这之所以有效,是因为两点。首先,产品设计——解释、问答、练习和画布不是孤立的功能;它们形成了一条连续的学习路径。其次,Enter 提供的基础——UI、数据库、AI 模型、部署——让我能把所有精力投入到"学习体验是否真正好?"而不是与基础设施搏斗。

回到最初的想法:学习不是收集点——而是连接它们。

这就是 Tutor 所做的。它帮助铺就那条道路。所以代码不只是你"见过"的东西——而是你理解、连接并拥有的东西。

不仅仅是解释代码——帮助你建立自己的知识网络