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

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

构思

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

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

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

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

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

我会觉得这样的方式会更好一点，思绪不会太容易被打断。但这有点失去它们的一部分意义了，它们变成了一个单纯的，美化工具了，美化我原本画的比较丑的图的工具。而我找不到一款更合适的，能打破这个工作流的工具，正好最近 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）是一个 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 的快捷键需要修改，改成你喜欢的，更方便的快捷键。

主要场景与工作流

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

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

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

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

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

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

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

项目地址

那么下面是项目地址：

体验地址：（ 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 进行导出。具体设计的工作流是这样的：

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

自由连线功能

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

一点畅想

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

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

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

对 AI 的感受

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

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

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

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

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

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

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

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

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

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

AI 依旧还只是工具。

结束

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

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

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

欢迎留下您的想法