构建 AI Protégé：与 Kiro 的一个月规格驱动开发

Source: Dev.to

我目前在学习数据结构和算法。教材很枯燥。我可以通读章节，观看教程，感觉自己已经全部理解——但一周后全忘光了。

但每当我向别人解释某个概念时，它才真正记住。这就是费曼技巧——如果你不能把东西解释得很简单，你就没有真正理解它。还有橡皮鸭调试，你对着橡皮鸭解释代码来找 bug。

我想把这些想法结合起来。不是让 AI 教我，而是我教 AI。它有点像弗兰肯斯坦——通过教给一无所知的东西来让知识“活”起来。

我做了什么

AI Protégé 是一个学习应用，你教 AI 学生，而不是相反。

• 你提供一个 URL 或 PDF，内容是你想学习的东西。
• 它提取 5 个关键概念。
• 你逐一教学——在画布上绘图，写解释。
• 完成后，AI 会提问，检查你的解释是否清晰，并使用 RAG 根据源材料进行事实核查。
• 最后，AI 总结它学到的内容。如果摘要错误，那说明你的解释有问题。

AI 结合了三种输入：你的画布绘图（视觉）、你的文字解释以及来自源材料的相关片段（RAG）。这种三输入方式让 AI 同时挑战清晰度和准确性。

技术栈： Next.js 15、Convex、Excalidraw、OpenAI、Clerk、Vercel。

开发历程

版本 1：原型

即使是第一版也使用了规格。我创建了 ai-protege-learning-app 来定义最初的原型——一个简单的教学界面，你可以在画布上绘图并获得 AI 反馈。

原型可用，但用户体验很粗糙：

• 画布太小。
• 有两个独立的输入框。
• 聊天面板占据了大部分屏幕。
• 提示以普通消息形式出现，难以区分。

Excalidraw 迁移

我很喜欢 Excalidraw，于是决定迁移（tldraw 的商业许可证需要付费）。迁移比预期更困难；Excalidraw 的文档并未覆盖所有细节，我只能在它们的 GitHub 仓库里寻找合适的 TypeScript 接口。

结果值得：

• 全屏画布。
• 单一聚焦的输入区域。
• 可折叠的对话面板。
• 清晰的视觉层级。

Convex 流式问题

这是最难的部分。我在提交前的最后三天里一直在处理它，熬夜到凌晨 2 点。

目标： 在使用 RAG 对源材料进行事实核查的同时，实时流式传输 AI 的响应。

我最初给 Kiro 错误的文档——Convex Agents 流式文档。这些文档是为构建需要向数据库 以及 客户端流式发送增量的 AI 代理而写的。AI Protégé 并不是代理，它不执行代码。而且我们的模型（GPT‑4.1‑nano）响应速度极快，客户端尝试订阅时流已经标记为“已完成”。

Kiro 根据代理文档不断生成代码，导致流式失败却没有报错。建议的变通方案是使用 Vercel AI Action 进行流式，另用 Convex 调用做 RAG，这会产生两次 API 调用、增加延迟，并且在生成开始时缺失 RAG 上下文。我拒绝了。

阅读 Convex 的博客文章后，我找到了这篇关于持久文本流式的文章。解决方案更简单：直接使用带有 AI SDK streamText 的 Convex HTTP Action。HTTP Action 获取 RAG 片段，构建带源上下文的提示，并把响应流回客户端。无需代理框架。

与 Kiro 合作：真正有帮助的做法

在项目期间我创建了五个规格：

• ai-protege-learning-app — 初始原型
• ai-protege-v2 — 完全重写的多概念教学流程
• session-dashboard — 用户认证与会话管理
• convex-agent-streaming — RAG 集成
• excalidraw-redesign — 画布库迁移

以下几条实践让规格更好用：

1. 先讨论架构，再写规格。
   先进行一次“氛围会”，探索想法、讨论方案、考虑边缘情况，然后再生成规格。这样得到的规格更完整，也更容易理解。

2. 先做线框图，再做 UI。
   Claude 在设计方面不强，我在 Excalidraw 中先画线框图并在规格中引用，给 Kiro 一个视觉目标。

   

3. 提供相关文档。
   只提供你需要的特定页面。错误的 Convex 文档浪费了数小时，正确的博客文章解决了流式问题。

4. 截屏破损的 UI。
   当界面显示异常时，我会截图并放进聊天。Kiro 在有实际图片的情况下调试视觉问题效果更好。

5. 手动测试指令。
   我在每个规格的任务里都写了明确的验证步骤。AI 往往会写只对自己代码通过的自动化测试，手动检查可以让它保持诚实。

如果再来一次，我会怎么做

提前更充分地规划：在写代码前先设计详细的线框图和用户流程，并提前准备代码质量标准的指导文档。迁移时使用 Kiro 更加轻松——当需要改变方向时，只需创建新规格并系统性地完成。规格让整个过程变得可控。

接下来

我是为自己的需求构建的这个工具，所以会继续使用。未来的改进包括 bug 修复、语音输入/输出，甚至把 AI 学生变成不同场景下的头脑风暴伙伴。

• 试用它：
• YouTube 演示：
• 构建使用的技术： Next.js、Convex、Excalidraw、OpenAI、Clerk、Kiro

此项目是为 Kiroween 黑客马拉松而构建的。