键盘风暴：一个 完全 用 AI 完成的前端白板项目

原文用 markdown 写的，虫部落不知道怎么转不了，好像不太影响阅读，我还是发表了

键盘风暴：一个 完全 用 AI 完成的前端白板项目

作为一个初出茅庐的小程序员，看到最近 AI 代码能力越来越强，就忍不住想要用 AI，来尝试完成一个项目，看看只靠 AI 的能力，一个几乎完全不懂前端的人，能做到什么程度，同时，也想，如果这个项目能有人瞧瞧，希望能推广一下键盘风暴这个概念

构思

项目的构思是这样的：用市场上的白板工具做流程图或者脑图的时候，工作流大概是这样的：

• 鼠标创建一个容器（在屏幕上拖拽得到一个矩形框，或者从元素库里拖拽一个元素到白板上）
• 鼠标双击进入到这个容器中
• 手离开鼠标，到键盘上，键入内容
• 保存内容，回到鼠标上，创建下一个容器
  

当我们需要画的内容变得越来越多的时候，我们需要频繁的这样进行切换，对比于在纸上构建思维导图或者脑图，我们需要来回切换鼠标和键盘，需要考虑容器的位置，拖拽考虑容器的位置，而又到了真正输入内容的时候，思绪可能已经被这些小动作打断了。

所以，我很讨厌这样的工作流，但又不得不接受。我也考虑过别的工作流，比如：

• 在草稿纸上大概画好所有的内容
• 然后在屏幕上根据草稿画好我需要的所有容器
• 再逐个点进去，编辑内容
  

我会觉得这样的方式会更好一点，思绪不会太容易被打断。但这有点失去它们的一部分意义了，它们变成了一个单纯的，美化工具了，美化我原本画的比较丑的图的工具。而我找不到一款更合适的，能打破这个工作流的工具，正好最近 AI 的代码能力越来越强，我就尝试性的，在不太懂前端的情况下，用 AI 完成这个项目。

概况

这个项目我尝试了 cursor、Trae、Trae CN 和 vscode 的 copilot，尝试了Cluade 3.7 Sonnet、Cluade 3.7 Sonnet、Cluade 3.7 Sonnet Thinking、Gemini 2.5 Pro、GPT-4.1、GPT-4o、deepseek-v3、deepseek-r1 等模型。如果说，以前有的孩子是吃百家饭长大的，那也不怕您笑话，可以说**这个项目是吃百家模长大的。**喂孩子的模型可能很懂这些代码，但是孩子的主人几乎不太懂它们，可能也有点像什么都不懂的老板指挥手下的工程师干活？

您大概也能猜到，键盘风暴（[kb-storm](https://github.com/qkyufw/kb-storm)）是一个 copy 自头脑风暴（Brian storm）的词。这个项目是以键盘为主导的程序，当您进入了网页，按下 `ctrl + d`就可以得到一个矩形框或者叫卡片、便利贴（我很喜欢卡片的背景颜色，像便利贴一样），然后就可以直接使用键盘进行输入您的想法了。当您写完了您的想法，您可以继续按下 `ctrl + d`，创建下一张便利贴，然后进行输入。

对比于市场上的大部分工具，它使用快捷键就直接创建一个容器并进入了编辑状态，省去了我上面的那个工作流的鼠标步骤，我们只需要用键盘输入我们的想法就好了，不用离开键盘寻找鼠标，不用考虑下一个容器创建的位置，不用考虑容器的大小，不用再双击容器进入编辑状态了。您思维的流出速度，只取决于您的手速。

您可能会想，按下 `ctrl + d` 后，便利贴（卡片/容器）的位置会出现在哪？是随机出现在屏幕显示区域的位置的。当您移动或者缩放画布了，它就会在画布新的位置（依旧是您的可视区域中）随机生成。您可以运用这一个特性，在白板的不同区域，创建不同的想法区。

为什么是随机生成呢？因为按网格排列太死板了，就像随机生成的便利贴的颜色也不一样。随机生成的便利贴需要整理，就像我们的思绪需要整理。当我们在整理便利贴阶段，进行移动的时候，也正是在对我们的思绪整理的一个过程，而便利贴在移动的时候可能会与其他的便利贴进行碰撞，两个想法相互碰撞，得到新的火花。

卡片的大小呢？我自设了一个比较合适的值，可以容纳一个小想法的内容。而当您输入的内容比较多的时候，它会自适应变大来容纳您的文字，保证的能完全显示。

其它键盘功能

为了让键盘的功能更强大，除了 `ctrl + d` 我还设置了一些别的操作：

`1`：按下数字 `1`，您就进入了卡片选择模式，移动您的方向键，您就可以再卡片之间进行选择，按⬆️，会选中当前卡片该方向上的另一张卡片，按其它方向键同理。目前我没有遇到过有卡片无法选中的情况，可能在极端情况下会有卡片无法选中的情况，您可能不得不使用鼠标进行操作了。

`2`：按下数字 `2`，您就进入了卡片移动模式，移动您的方向键，您就可以移动您当前选中的卡片，如果您没有选中任何卡片，则会回到卡片选择模式。如果您移动方向键的时候同时按下 `shift` 键，那么卡片移动的速度会变快。

`3`：按下数字 `3`，您就进入了线条选择模式，移动您的方向键，您就可以选择卡片之间的连线了，这个是循环选择的，暂时没有像卡片那样设置算法。

`ctrl + i` ：既然说到了线条，那就说一下连线方式，在选择模式有选中卡片的请胯下，按下这个快捷键，您就可以，使用方向键，移动到另一张卡片上，选择好后，按下 `enter` 就会在这两张卡片之间连上一条线。也是一个少用鼠标的功能。

`tab`：曾经的 `tab` 键也是用于线和卡片之间的循环，当前 `tab` 设计的功能是，切换选中卡片的颜色，和切换选中线条的箭头方向。您可以在卡片选择模式和线条选择模式下尝试一下。

快捷键修改：为什么创建卡片的快捷键是 `ctrl + d` 呢？（为了骗您收藏这个网页（bushi））答：随便设的。您可以对最常用的 `ctrl + d` 和 `ctrl + i` 的快捷键需要修改，改成你喜欢的，更方便的快捷键。

主要场景与工作流

介绍完了主要功能，就基本可以使用键盘风暴了，在给您项目地址前，我想先给您讲讲我设想的一些工作场景和工作流。

毫无疑问，第一个场景就是头脑风暴，当您在电脑上想要进行头脑风暴的时候，您不再需要使用之前的那些白板工具，先用鼠标创建卡片，点进去，再用键盘输入的工作流了，您可以直接用键盘进行一场**键盘风暴**！

• 产生一个 idea，按下键盘快捷键就可以输入 idea
• 产生第二个 idea，再次按下键盘快捷键，又可以进行输入
• 整个过程行云流水，头脑风暴畅通无阻
• idea 写完的，整理卡片之间的位置和关系，拖动卡片就是整理思绪，也能产生新的火花🔥🔥🔥
  

另一个场景是整理，整理读完一本书的内容，整理学完一个知识的内容，做事件的复盘，做一天的回忆

• 您不用从头开始回忆了，从头回忆能梳理内容，但是有时很痛苦
• 您可以用这个工具直接回忆您记得的，印象最深的内容，直接写到屏幕上
• 然后印象第二深刻的知识点，事件点，or 单纯印象深刻
• 这样写完你能想到的 anything
• 最后再在卡片的分类，移动的过程中，您能直观的看到，您记忆中最深的东西，记忆中记得最少的东西，对于记忆缺失的内容，您可以进一步的去复习，去和别人复盘，去梳理。您可以在整理分类后看到您对这个东西的所有印象，能更好的进行整理和输出。
  

不知道您有没有心动想要尝试的想法了，还有一个小场景是做自由书写，想到哪，写到哪，很符合这个工具的作用，在写完后，进行卡片之间的整理，也是一个对自己思想的考虑过程。

总结：主要的工作流就是先用键盘输入您想要输入的一切，然后再对随机分布的卡片进行整理。整理的过程中您可以用键盘，也可以用鼠标，还可以碰撞产生新的火花。

项目地址

那么下面是项目地址：

体验地址：（github page 静态部署）

https://qkyufw.github.io/kb-storm/

项目主页：

https://github.com/qkyufw/kb-storm

用户手册：（AI 写的，大部分功能没毛病，您且看看）

https://github.com/qkyufw/kb-storm/blob/master/MANUAL.md


更多功能

既然您还在阅读，那给您分享一下我设计的一些其它功能

导入导出 markdown

我设计了导出图片，这个功能不是很完善，但能用吧。导入导出 mermaid 功能我也有加上，这个很有效，能同步到其它工具中使用，不太保证稳定性。

导入导出 markdown，我想过如何保存这些个内容，又能保证可读性。就大胆的设计了用 markdown 来导出内容。导出的标题是 kbstorm 开头的，卡片的内容写在 markdown 正文，每张卡片用 `---` 进行分割。在 markdown 的最后面是元数据，如果导入的时候识别到了有元数据，那将可以完全恢复这整个图。

对于导入 markdown，您也可以选择自己手写一个 markdown 进行导出。具体设计的工作流是这样的：

• 当您需要快速使用文本记录的时候，您打开 Typora 或其它 markdown 编辑软件，之间在正文开始写您的想法
• 您写完一个想法后，在下一行写下 `---`，写一个分隔符
• 然后就可以在再下一行写新的想法内容了
• 写完 markdown 后，您不需要写标题或者元数据，直接在网站进行导入
• 它会分割内容，在随机位置生成卡片，您可以继续使用 kbstorm 继续您的工作了
  

自由连线功能

当您按下工具栏上的自由连线按钮后，您可以用鼠标在白板上自由的拖拽画线了，对于线的起点终点，您无需费尽脑汁对准卡片的边缘了，起点是一个卡片内的任意一个点，终点是另一张卡片上的任意一个点，起点终点的区域都很大，连上了之后会自动连接两张卡片的边缘并吸附上。当然，起点终点如果有一个不再卡片上，都无法进行连线

一点畅想

其它的一些功能就大差不差的像普通的白板工具的功能了，哦对，还有，双击卡片进入该卡片的编辑，双击白板空白位置则是创建新的卡片，直接可以开始用键盘输入了（这个功能畅想的是在移动端很好用，可以用手双击任意区域，就可以开始新的卡片内容编辑了，不需要拖拽画卡片，方便，简单）

布局系统：您可以看到右上角设计了一种布局——随机布局，意味着您用快捷键，或者导入的卡片，都将出现在屏幕可视区域的随机位置，我希望用户对于这个布局算法能有更高的自定义，比如按网格排列，按螺旋排列？等等，暂时这个系统还不完善。

还有些其它小功能，这里就暂时不一一枚举了

对 AI 的感受

对于这个吃百家模长大的孩子，我感觉磕磕绊绊的，对于一个完整可用的项目来说，它应该能算完成了百分之七十吧？

对于 AI 写代码的最大感受还是，它们对于普通人还是有些距离，如果您完全不了解一个方向，您最好还是有一个引导者，或者有一份完整的教程，因为我开始对前端几乎一窍不通，我最初使用 AI 搭建的过程中，AI 也没有告诉我需要创建 React 项目该如何进行，我就直接让它创建一个 html 网页，差不多就像我拿着剪刀就来拆手机了。

如果您不了解一个东西，您指挥会的人做，您也可能会被蒙蔽。AI，暂时也没到全知全能的程度，您还是得了解代码，您才能灵活的用 AI，去解决。大概 AI，对于高级程序员还是更有用一些。

另外讲讲我遇到的一些问题，记录的不全，见谅：

• 出现错误，让 AI，进行修改，它给出 AB两种方案，A方案错误，告诉它不行，它使用B方案重试，B方案错误，告诉它不行，它又用回 A 方案，来回横跳……，无语
• 出现错误，它给出 ABC三种方案，然后它三种方案都用上了，造成代码严重冗余，还可能你看它噼里啪啦输出一大堆内容，依旧无法解决 bug
• 它生成的代码出现引用错误，让它进行更新，它不去更新路径，而在在错误的路径从新生成该文件……，我们能说什么呢……
• 出现一个 bug，ABC 环节都可能有问题，它也能分析出 AB环节可能有问题，就认死理只去修改 A环节
  

使用 AI 生成内容最头疼的问题还是时间问题。您必须要比较精准的描述您的需求，或者说，要用它能听懂的话来和它进行沟通。一旦有什么理解错误，网络波动，调试错误，您就会大量浪费时间，尤其是在您可能不懂它写的内容的情况下。

另一个头疼的问题是，如何与它沟通，我在和它的沟通过程中，学会了一种方式，将您的需求交给另一个 AI，让它来帮你写一份提示词，您可以用它生成一份您满意的，完善的提示词，再交给编辑程序去修改。不少时候，它写的提示词确实很完美，如果您觉的不完善，也可以让它再修改。

如果出现了一个 bug，AI，一直解决不了，您不仅可以尝试改提示词，也可以尝试换一个模型，很多时候都有奇效！！！这也是这个项目是吃百家模长大的原因。

目前位置，我还是很喜欢使用 ask 模式，和这些个 AI 斗志斗勇还是有一段时间了，我不太了解 React 都稍微了解一些了。然后能通过 ask 模式去和 AI 设计架构，重构价格，探讨功能如何设计，探讨 bug 如何解决，和它探讨更好的解决方案。

最后的建议：善用 git，善用回滚。

AI 依旧还只是工具。

结束

感谢您看完这篇长文，还是再说一下，我做这个项目是想看看，我能用 AI 将这个项目构建到什么程度，也希望能宣传一下键盘风暴这个概念，可能不止会有键盘党才喜欢。

我没有期待键盘风暴这个项目能得到流行，它只是我一个前端门外汉用 AI 设计的一个尚且能用的工具。如果您觉得这个项目还不错，您想要进一步完善，非常欢迎！

最后：求点赞，求三连，求分享，求收藏，求关注（bushi，社恐不需要这个），总之就是小扑街求点热度，球你了QAQ

欢迎留下您的想法

这个实现很 geek 啊。反馈个问题：随机生成的容器有的会部分溢出显示区域。

还有你这个想法来源于键鼠操作在记录头脑风暴过程的割裂感，但是如果把鼠标换成触控板呢？我在笔记本上操作，比如移动卡片，连线的操作，其实会下意识用触控板，双手也不用离开键盘，但是在这种纯粹的键盘模式下，好像不行。

你这帖子是真长🤣

学习一下

喜欢看这样条理清晰的从 idea 到项目实践的记录。简单体验了下，跟市面上有类似功能的商业化工具相比，上手操作对普通用户难度更高一点，正因此也可能收到键盘党的青睐，受众应该比较小众，但自己折腾，而且又有 AI 帮忙出力，乐趣加倍。

出现 bug ，换提示词反复调试无果，换个新模型，解决！对此深有同感。可能真跟人聊天一样，一句话没说好，就把天聊死了。后面再怎么补救，都是令人窒息的幻觉。

布拉格 发表于 2025-5-23 14:18
这个实现很 geek 啊。反馈个问题：随机生成的容器有的会部分溢出显示区域。

还有你这个想法来源于键鼠操作 ...

「随机生成的容器有的会部分溢出显示区域」
————————————————————
这个问题是很早就有注意到的，不过在我测试的过程中，注意到它不会影响输入，当写的内容超出可视区域的时候，白板会自动调整，确保能看到我们输入的内容，所以我就没有去解决这个问题。从用户的角度来看，确实体验也有点不好🤔。
————————————————————
「如果把鼠标换成触控板呢？」
————————————————————
这个问题我在我的笔记本上测试，我的触控板似乎能正常执行移动卡片容器，选中卡片，编辑卡片等功能。这个问题主要是和多设备适配有关，我在使用的过程中也有使用过其他类型的设备打开测试，确实这方面不太完善。目前我也注意到还有一些其他的问题存在，比如，当前的编辑模式，无法输入空格，可能是在某次修改中莫名引入的 bug。

就当前而言，键盘风暴我知道它存在一些问题，但我还是把它作为一个阶段发布出来了，是因为我觉得它已经完成了我的一些目的了：看看在我不懂的领域，我大概能用 AI 编程到什么程度；也能给别人演示，讲讲键盘风暴这个概念。

至于它的未来，下一步怎么计划，我暂时没有想好。我会觉得，如果我一个人继续维护，我可能会在某些时候踩进某个大坑中去，毕竟我对前端还不够了解；另外，我暂时也不确定，我继续完善它还能有什么收获。它的完成已经是我现在最大的一个收获了，如果要进行进一步完善，可能我会在更熟悉相关技术之后，系统的再进行一下优化，或者有大佬能参与那应该能比较快的完善。

撩月 发表于 2025-5-24 10:26
喜欢看这样条理清晰的从 idea 到项目实践的记录。简单体验了下，跟市面上有类似功能的商业化工具相比，上手 ...

我尽量把应该有的功能都加上了，比如用鼠标创建卡片，用鼠标拖拽卡片，用鼠标放大缩小卡片。其实我也不是个纯键盘党，我自己使用这个工具的时候，键盘操作也只喜欢在写卡片内容的时候，全用键盘操作。而在整理卡片，移动卡片，调整卡片，还有进行卡片之间连线的时候，我依旧更喜欢用鼠标进行操作，跟符合原本的习惯，也非常好用hhh。对键盘党加上键盘相关的操作主要也是为了功能的完成性，一致性。

做完这个工具原本也不觉得它能火，不觉得它能受到很多人的喜爱，毕竟也不算完善。只想着文章能有点热度就好了，不过看起来也还是太小众了，发在其他平台上的都没多少人回复。在虫部落发一版真是正确的选择，能得到些许的认可，很让人开心了😄