qyfff

Keyboard Storm: A Frontend Whiteboard Project Completed Entirely with AI#

As a novice programmer, seeing the recent advancements in AI coding capabilities made me eager to use AI to attempt a project, to see how far an almost completely inexperienced person in frontend development can go relying solely on AI, and at the same time, I hope that if this project can attract attention, it will help promote the concept of Keyboard Storm.

Concept#

The idea for the project is as follows: when using whiteboard tools on the market to create flowcharts or mind maps, the workflow generally goes like this:

1. Use the mouse to create a container (drag a rectangular box on the screen or drag an element from the library onto the whiteboard)
2. Double-click the mouse to enter this container
3. Remove your hand from the mouse, go to the keyboard, and type content
4. Save the content, return to the mouse, and create the next container

As the amount of content we need to draw increases, we need to frequently switch between these steps. Compared to building mind maps or flowcharts on paper, we have to switch back and forth between the mouse and keyboard, consider the position of the containers, and drag to adjust their positions. By the time we are ready to input content, our thoughts may have already been interrupted by these small actions.

Thus, I really dislike this workflow but have to accept it. I also considered other workflows, such as:

1. Roughly sketching all the content on draft paper
2. Then creating all the necessary containers on the screen based on the draft
3. Clicking into each one to edit the content

I feel that this method would be a bit better, as my thoughts wouldn't be so easily interrupted. However, it loses some of its meaning; it becomes merely a beautification tool for my originally poorly drawn diagrams. I couldn't find a more suitable tool to break this workflow, so I decided to experiment with AI to complete this project, despite my limited knowledge of frontend development.

Overview#

For this project, I tried various models including cursor, Trae, Trae CN, and vscode's copilot, as well as Claude 3.7 Sonnet, Claude 3.7 Sonnet Thinking, Gemini 2.5 Pro, GPT-4.1, GPT-4o, deepseek-v3, deepseek-r1, etc. If it can be said that some children grew up eating from a hundred families, then it wouldn't be an exaggeration to say this project grew up eating from a hundred models. The models used to feed the child might understand these codes well, but the child’s owner hardly understands them, somewhat like a boss who knows nothing directing engineers to work.

You might guess that Keyboard Storm (kb-storm) is a play on the term brainstorm. This project is keyboard-driven; when you enter the webpage and press ctrl + d, you get a rectangular box or a card, a sticky note (I really like the background color of the card, resembling a sticky note), and you can directly use the keyboard to input your ideas. Once you finish writing your idea, you can press ctrl + d again to create the next sticky note and continue inputting.

Compared to most tools on the market, it directly creates a container and enters edit mode using keyboard shortcuts, eliminating the mouse steps in the workflow I mentioned above. We only need to use the keyboard to input our thoughts, without leaving the keyboard to find the mouse, without considering the position of the next container, without worrying about the size of the container, and without double-clicking to enter edit mode. The speed at which your thoughts flow depends solely on your typing speed.

You might wonder, where will the sticky note (card/container) appear after pressing ctrl + d? It appears randomly within the visible area of the screen. When you move or zoom the canvas, it will randomly generate in the new position of the canvas (still within your visible area). You can use this feature to create different idea zones in different areas of the whiteboard.

Why is it randomly generated? Because arranging in a grid is too rigid, just like the colors of the randomly generated sticky notes are different. Randomly generated sticky notes need to be organized, just as our thoughts need to be organized. When we are moving during the organization phase of the sticky notes, it is also a process of organizing our thoughts, and the sticky notes may collide with each other, sparking new ideas.

As for the size of the cards, I set a relatively suitable value that can accommodate a small idea's content. When you input more content, it will automatically resize to fit your text, ensuring it is fully displayed.

Other Keyboard Functions#

To enhance the keyboard's functionality, in addition to ctrl + d, I also set up some other operations:

1: Pressing the number 1 enters card selection mode. By moving your arrow keys, you can select between cards. Pressing ⬆️ will select another card in the direction of the current card, and the same applies to other arrow keys. So far, I haven't encountered any situation where a card couldn't be selected; there might be extreme cases where a card cannot be selected, and you may have to use the mouse.

2: Pressing the number 2 enters card moving mode. By moving your arrow keys, you can move the currently selected card. If you haven't selected any card, it will return to card selection mode. If you press the shift key while moving the arrow keys, the speed of card movement will increase.

3: Pressing the number 3 enters line selection mode. By moving your arrow keys, you can select the lines connecting the cards. This is a cyclic selection and currently does not have an algorithm set like the cards.

ctrl + i: Since we are talking about lines, let's discuss the connection method. In selection mode, if you have selected a card, pressing this shortcut allows you to use the arrow keys to move to another card. Once selected, pressing enter will connect a line between the two cards. This is also a feature that minimizes mouse usage.

tab: The previous tab key was used for cycling between lines and cards. The current function of tab is to switch the color of the selected card and the direction of the arrow on the selected line. You can try this in card selection mode and line selection mode.

Shortcut modification: Why is the shortcut for creating cards ctrl + d? (To trick you into bookmarking this webpage (just kidding)) Answer: It was set arbitrarily. You can modify the most commonly used shortcuts ctrl + d and ctrl + i to ones you prefer that are more convenient.

Main Scenarios and Workflow#

After introducing the main features, you can basically use Keyboard Storm. Before providing you with the project address, I want to share some of the work scenarios and workflows I envisioned.

Undoubtedly, the first scenario is brainstorming. When you want to brainstorm on your computer, you no longer need to use those previous whiteboard tools, creating cards with the mouse, clicking in, and then using the keyboard to input. You can directly have a keyboard storm!

1. Generate an idea, press the keyboard shortcut to input the idea
2. Generate a second idea, press the keyboard shortcut again to input
3. The entire process flows smoothly, and brainstorming is unimpeded
4. Once the ideas are written down, organize the positions and relationships between the cards. Moving the cards is also a process of organizing thoughts, which can spark new ideas🔥🔥🔥

Another scenario is organizing, such as organizing the content after reading a book, summarizing learned knowledge, reviewing events, or reflecting on a day.

1. You no longer need to start recalling from scratch. While recalling from the beginning can help organize content, it can sometimes be painful.
2. You can directly recall the most memorable content using this tool and write it on the screen.
3. Then, write down the second most memorable knowledge point, event, or simply something that left a deep impression.
4. This way, you can write down anything you can think of.
5. Finally, during the categorization and movement of the cards, you can visually see the things you remember most deeply and the things you remember the least. For content with memory gaps, you can further review, discuss with others, and organize. After categorizing, you can see all your impressions of this content, allowing for better organization and output.

I wonder if you are feeling inspired to try this out. Another small scenario is free writing, where you write down whatever comes to mind, which aligns well with the purpose of this tool. After writing, you can also organize between the cards, which is a process of reflecting on your thoughts.

In summary: the main workflow is to first use the keyboard to input everything you want to input, and then organize the randomly distributed cards. During the organization process, you can use the keyboard, the mouse, or let ideas collide to spark new insights.

Project Address#

Here is the project address:

Experience Address: (GitHub page static deployment)

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

Project Homepage:

User Manual: (Written by AI, most features are fine, take a look)

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

More Features#

Since you are still reading, let me share some other features I designed.

Import and Export Markdown#

I designed an image export feature, which is not very complete but functional. I also added import and export functionality for mermaid, which is very effective and can be synchronized with other tools, though stability is not guaranteed.

For importing and exporting markdown, I thought about how to save this content while ensuring readability. So I boldly designed it to export content using markdown. The exported titles start with kbstorm, and the content of each card is written in the markdown body, separated by ---. At the end of the markdown is metadata; if metadata is recognized during import, the entire diagram can be fully restored.

For importing markdown, you can also choose to write your own markdown for export. The specific workflow is as follows:

1. When you need to quickly use text records, open Typora or another markdown editing software and start writing your ideas in the body.
2. After finishing one idea, write --- on the next line as a separator.
3. Then you can write new idea content on the next line.
4. After finishing the markdown, you don't need to write a title or metadata; just import it directly on the website.
5. It will split the content and generate cards in random positions, allowing you to continue using kbstorm to carry on your work.

Free Connection Feature#

When you press the free connection button on the toolbar, you can freely drag lines on the whiteboard with your mouse. For the starting and ending points of the lines, you don't need to painstakingly align with the edges of the cards; the starting point can be any point within a card, and the ending point can be any point on another card. The area for the starting and ending points is quite large. Once connected, it will automatically connect the edges of the two cards and snap into place. Of course, if one of the starting or ending points is not on a card, you cannot connect them.

A Little Imagination#

Other features are quite similar to those of ordinary whiteboard tools. Oh, and double-clicking a card enters the editing mode for that card, while double-clicking a blank area of the whiteboard creates a new card, allowing you to start inputting with the keyboard directly (this feature is envisioned to work well on mobile devices, where you can double-tap any area with your hand to start editing new card content without needing to drag and draw cards, making it convenient and simple).

Layout System: You can see that a layout has been designed in the upper right corner—random layout, which means that cards created with shortcuts or imported will appear in random positions within the visible area of the screen. I hope users can have more customization over this layout algorithm, such as arranging in a grid or spiral? For now, this system is still not perfect.

There are also some other small features, but I won't enumerate them all here for now.

Thoughts on AI#

For this child that grew up eating from a hundred models, I feel it has been a bit bumpy. For a complete and usable project, it should be about seventy percent complete, right?

The biggest impression I have of AI writing code is that there is still some distance for ordinary people. If you are completely unfamiliar with a direction, it is best to have a guide or a complete tutorial. Because I initially knew almost nothing about frontend development, during my initial use of AI to build, it didn’t tell me how to create a React project; I just let it create an HTML webpage, which is somewhat like trying to dismantle a phone with scissors.

If you don’t understand something, directing someone who knows can also lead to confusion. AI is not yet omniscient; you still need to understand the code to flexibly use AI to solve problems. AI is probably more useful for advanced programmers.

Additionally, let me mention some issues I encountered, though this is not an exhaustive list:

1. When an error occurred and I asked AI to modify it, it provided two options, A and B. If option A was wrong and I told it so, it would retry with option B, which was also wrong, and then revert to option A, bouncing back and forth... it was frustrating.
2. When an error occurred, it provided three options A, B, and C, and then used all three options, resulting in serious code redundancy. You might see it output a large amount of content but still not solve the bug.
3. The code it generated had reference errors. When I asked it to update, it didn’t update the path but regenerated the file in the wrong path... what can we say...
4. When a bug occurred, any of the A, B, or C steps could have issues. It could analyze that A or B might have problems but stubbornly only modified A.

The most frustrating issue with using AI to generate content is still the time factor. You must describe your needs quite precisely or communicate in a way it can understand. Once there is any misunderstanding, network fluctuations, or debugging errors, you will waste a lot of time, especially if you might not understand the content it generates.

Another headache is how to communicate with it. In my interactions, I learned a method of handing over your requirements to another AI to help you write a prompt. You can use it to generate a satisfactory and complete prompt, then hand it over to the editing program for modification. Many times, the prompts it writes are indeed perfect, and if you find them lacking, you can ask it to revise them.

If a bug arises that AI cannot resolve, you can not only try modifying the prompt but also switch to another model, which often works wonders! This is also why this project grew up eating from a hundred models.

So far, I still enjoy using the ask mode. I have been engaging with these AIs for a while, and I have learned a bit about React. Then I can use the ask mode to design architecture with AI, refactor architecture, discuss how to design features, and explore how to resolve bugs, as well as discuss better solutions.

Final advice: Make good use of git and rollbacks.

AI is still just a tool.

Conclusion#

Thank you for reading this lengthy article. I want to reiterate that I created this project to see how far I could build it using AI, and I hope to promote the concept of Keyboard Storm, which may appeal to more than just keyboard enthusiasts.

I do not expect the Keyboard Storm project to become popular; it is merely a usable tool designed by a frontend novice using AI. If you think this project is good and want to further improve it, you are very welcome!

Lastly: Feel free to share your thoughts.