Creating your personal application vibe coding with Gemini AI Studio

Zero programming experience local-first solution at Zero cost

While experimenting with Zettelkasten system some challenges and doubt on the addressing methodology surfaced. Grossly overwhelmed by the multiplicity of methods and techniques available on internet that confusion and loss of creativity started to appear. Then came to mind a self-brainstorming technique acquired some years back from a Japanese author by the name of Hiroaki Imaizumi. He named his tool MandalArt, which was inspired by Tibetan Buddhist monk ritualistic meditation practice in an art form known as Mandala.

The tool is no stranger for work and presentation slides as it is an implementation of mind-mapping technique much like the Ishikawa diagram (Fishbone diagram) but in a more modular and expandable format that mimics the aesthetics of Tibetan Mandala.

It is a fantastic tool when comes to planning, single-person brainstorming solution finding, idea presentation and pitching. But for creating an indexing system, there was little headway even though this is the best simulation tool for Zettelkasten idea linkages as both embrace the non-linear association philosophy!

Immediate goggling to see if such Zettelkasten X MaldalArt solution already exist in some corners of the world found that the Mandala inspired tool is already widely practiced in both eastern and western world. More surprising that it has been further made known beyond Asia as Lotus Blossom technique by another Japanese expert Matsumura Yasuo. The search also returned sites hosting the digital implementation of the wonderful tool — free and otherwise.

Offerings of MandalArt based digital tool in SAAS form exist aplenty. Suffering from a cycle of “forgotten after first trials” syndrome — signing up for a web app, testing it for five minutes, and then abandoning the data to a cloud server never visited again. This frustration sparked a curiosity and compelling idea: vibe coding a local implementation of the web app, without writing a single line of syntax, build a custom, zero-cost, local-first solution in minutes.

Plan to take over the world

“A.I. killed the S-A-A-S star” echoed instantly to the tune of the very first MTV video by the Buggles.

The goal — a single HTML file that does the basics of what MandalArt do on paper — nothing more, nothing less.

Pulled out Gemini AI Studio and hammered in the following prompt then watched it grind:

As the grind came to a halt a text box displayed a block of HTML code. Upon double clicking the saved HTML file in the download folder, the magic appeared on the browser:

While testing text entries in the web app, it came to realization that the app did not retain the data in a save file and it would be wiped out every time we exit the app.

Fear not, our faithful coder is here, enter another prompt — instruction to add a save function to export text to CSV format:

Well, it did not work as advertised. Nothing happened with the press of the button.

Back to the drawing board:

The save function button worked this time though not an autosave one. The dark theme button also functioned:

Okay. We managed to save the file. how about retrieving the saved data in the next session? Here we go again:

Now we are able to save and retrieve our thoughts and plans:

What about printing the output ?— both to a printer or PDF for safekeeping:

Finally, all basic functions necessary for a useful MandalArt/Lotus Blossom app exist:

Completing the Data Cycle (CSV and PDF Integration)

To make the tool “professional-ready,” Gemini had helped to bridge the gap between a visual grid and usable data and complete the data cycle with three core features:

• CSV Import/Export: This wasn’t just a text dump. The script uses relational mapping to pair structured CSV rows back to their Geometric Coordinate Pairings (Grid_Index and Cell_Index). This allows me to save a session and reload the complex 9 \times 9 visual state instantly.
• Print-to-PDF: I needed a high-fidelity output for my presentations. We used CSS @media print style overrides to strip away the UI — headers, control panels, and buttons — to maximize the matrix to occupy a full high-resolution page.
• UI Polishing: I added a functional dark theme, ensuring the tool felt like a premium application rather than a side project.

These aren’t just bells and whistles; storage, retrieval, and professional output are the “basic functions” that turn a script into a legitimate workflow tool.

Conclusion

The democratization of software creation is here. We are moving into an era where creativity no longer requires a computer science degree or a monthly subscription. If a tool doesn’t exist, or if the existing version is locked behind a “Google Sign-in” wall, you can simply vibe-code your own.

Most importantly reclaim our mental space by building a tool that is ours — private, local, and free. It’s a shift from being a consumer of software to being an architect of our own productivity environment, while keeping our data safe.