鍵盤風暴：一個 完全 用 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）是一個 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/
项目主页：
用户手册：（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 設計的一個尚且能用的工具。如果您覺得這個項目還不錯，您想要進一步完善，非常歡迎！
最後：歡迎留下您的想法