第 10 天。我让它做一个 Miro 克隆版。一个完整的无限画布，带图形、连接线、图层，还有演示模式。
提示词#
“做一个像 Miro 那样的无限画布白板应用。本地优先，TypeScript，HTML5 Canvas。”
起点就这些。剩下的全都是从任务拆解里冒出来的。
是怎么做出来的#
这个有点大。Watchfire 把它拆成了 27 个任务，是我在这次挑战里见过最多的一次。拆解涵盖了：
- 图形和绘图工具（矩形、椭圆、直线、箭头）
- 自由手绘笔工具
- 文本元素
- 带颜色分类的便签
- 图形之间的智能连接线
- 网格与吸附
- 撤销／重做历史
- 导出为 PNG 和 JSON
- 图层面板
- 取色器
- 缩放与平移控制
- 覆盖所有功能的键盘快捷键
- 深色模式
- 带引导的欢迎界面
- 演示模式
27 个任务不少。但每个任务的范围都切得很清楚。每一个都在不破坏前面成果的前提下，加上一块具体的功能。
拿到的东西#
这玩意儿功能意外地齐全。
感觉就像一个真正的白板工具。 打开它就是一个带点阵网格的无限画布。你可以平移、放大缩小、放置图形、写文字、用箭头把东西连起来。白板的基本操作循环就是能跑起来。
有一个像样的欢迎界面。 它会告诉你键盘快捷键和怎么开始。你可以关闭它，还能勾选“下次不再显示”。是个小细节，但让应用看起来像是真的做完了。
连接线很聪明。 你在两个图形之间画一根线，它会自动吸附到连接点。移动图形时，连接线会跟着动。有没有这个功能，就是绘图应用和图表工具的区别。
图层面板是真能用的。 每一个元素都会出现在侧边栏列表里。你能看到层级关系，重新排序，管理什么在最上面。像一个迷你版的 Figma 图层面板。
几乎所有操作都有键盘快捷键。 V 选择，R 矩形，O 椭圆，P 画笔，T 文本，S 便签。再加上所有标配的那些，比如 Cmd+Z 撤销、Cmd+Shift+Z 重做。按 ? 还能调出一个完整的快捷键覆盖层。
画笔工具很顺滑。 我就是为了测试随手画了张脸。笔触反应灵敏，感觉自然。没有压感之类的花活，但头脑风暴时用来草草画点想法完全够用。
问题反馈#
这一天相对来说比较干净。27 个任务，我本以为会遇到更多问题，但因为是一步步做的，每一块在下一块到来之前都已经测过了。我主要注意到的有：
- 便签缩得太小时，有时会和文字重叠
- 角落里的缩略图在大幅缩放之后，有时会和主画布不同步
- 导出 PNG 时，偶尔会把画布边缘的元素裁掉
没什么大问题。核心的白板体验从很早就已经很稳了。
数字#
- 27 个 Watchfire 任务，从画布初始化一路到演示模式
- TypeScript + Vite，用 HTML5 Canvas 渲染
- 完整工具集： 选择、平移、矩形、椭圆、直线、箭头、连接线、画笔、文本、便签
- 深色模式、图层、导出、键盘快捷键、演示模式
- 零外部 UI 库。 一切都基于 Canvas 自己造
试试看#
桌面端体验最好。用键盘快捷键才能完整发挥。
第 10 天总结#
这是整个挑战里第一个真正去挑战一个复杂网络服务的项目。Miro 不是那种规则自成一体的游戏。它是一个真真正正的产品，有图形、连接线、图层、导出、演示模式，还有一整套交互模型，原团队花了好几年才打磨出来。用一天去克隆它，就意味着必须做出取舍：留下什么，放弃什么。
最大的取舍是后端。没有。一切都活在浏览器里，持久化到本地存储。没有账号，没有服务器，没有数据库。这是我在这次挑战的前几个项目里有意守着的一条约束 ——让东西留在本地，出货更快，避免为每一个 demo 都去搭一套基础设施的复杂度。在这里行得通，是因为白板即使不是多人协作也依然有用。迟早会撞上墙。实时协作、云端同步、通过 URL 把白板分享给别人 ——这些没有后端都做不到。我们会在之后的某个项目里走到那一步。
最让人眼前一亮的是架构。代码库被干净地拆成了几个模块：输入处理、渲染、状态管理、工具、UI。每个工具是一个独立的模块。状态管理负责处理撤销／重做的历史。这不是随便糊出来的原型，而是一个结构规规矩矩的应用。
它能取代 Miro 吗？不能。但作为一个本地优先的草图和图表工具，它意外地好用。我发现自己居然真的在上面整理想法，而不只是为了测试它。
挑战已经过了三分之一。能塞进一天里的东西，范围还在不断扩大。
这是 30 Days of Vibe Coding 的第 10 天。跟我一起看看 30 天用 AI 辅助编程做出 30 个项目的过程。
