Skip to main content

Vibe Coding Workflow

I am currently working for having A.I. workflow for generating projects. There are two things that need to be tackled for that: 1) hallucinations; and 2) old codes. I have met several patterns to tackle those two and just need to formulate the patterns into a general flow.

Thankfully, a video of building fullstack app using A.I. from Raf Dev channel inspired me to make the formulation. He used multiple A.I. engines to his need:

  1. He used Google Gemini to onboard his ideas and summarized it.

  2. He forked a boilerplate of NextJS project into a new project.

  3. Then, he added the summary from Google Gemini into a file for context.

  4. He used QWEN Code, a QWEN3 code engine that is a fork from Gemini CLI, to build the project.

When working with an existing project, A.I. will take the whole project as a context. It also means that it will stick with the version used by the libraries. It also will try to update its knowledge based on the common pattern in the project. Most of the time, it will use the current syntax of the project.

His reason to use Gemini to sketch his ideas is because currently it is the best for his understanding to build requirements. I don't have the say about this, because I didn't have an extensive research on this. I myself, use Deep Seek for this use case. The cute anime images from my previous A.I. were generated from perchance.org. This post's image is generated using Gemini. The prompts for those images were built from Deep Seek.

I accidentally found out about this when asking Deep Seek to generate image. Each A.I. provider has its own way to express how to generate what you want. The prompt targetting perchance.org is different from the one targetting Gemini. Deep Seek knew how to effectively build the prompt for each A.I. provider. Thus, it is really important to have your prompt polished by an A.I. engine before your prompt submitted into the real A.I. engine that will do the job.

Thus, with this, I applied them into programming as follow:


Each command line program has its own context file. For instance, QWEN uses QWEN.md file, Gemini CLI uses GEMINI.md, and Claude code uses CLAUDE.md file.

One caveat, though, you need to do the flow using common stack. I did try to experiment with Gowebly (a golang, HTMX, AlpineJS stack) and the Qwen run 4 hours without solving the problem. I haven't try that with Gemini CLI, but will try to use it for Gowebly later.

Currently Working Flow

I think I have experimented a good variations for the common flow implementations. However, what I think good work today is using this flow:

  1. Create front end code with Google AI Studio. This tool will make the step 1 and step 2 at the same time. This is called prototyping in the old world. LOL...

  2. Using Gemini/Qwen generate an initial context file.

  3. Create the BFF and make it production ready, e.g. make it according to OWASP recommendations, add login, etc..

Yeah, it is noteworthy if you build your own boilerplate from the very beginning so that your A.I. vibe code can code better. You can search for ready-to-use boilerplates. Also, you need to accept that Google AI Studio can only make React app. I can't get it to work to build using Solid JS. I miss Solid. ;-(

I also want to admit that I still cheated. Sometimes, I fix the code myself. LOL....

Design System

By default, Google AI Studio uses Google Material-like design system and INA DIgital has its own design system at https://design.inadigital.co.id/ site. It has three types of guideline:

  1. A design guidelines using Zero Height.

  2. A figma design.

  3. A React component.

Let's have a summary.

Design Guidelines

GEMINI CLI can access the site and read the rest of the guidelines. it then build the project accordingly. It's not very accurate, but it lay a foundation.

QWEN Code cannot read the site.

Figma Design

Neither AI tools can access. What I did was exporting the Figma layer as PNG. Then, I opened ChatGPT and upload the PNG file there and asked it to generate a React project.

React Component

By default, the component uses Tailwind 4 with React 19. I cheated and setup the packages manually. So, I would start the project with INA Digital react components ready to use.

I can't say for GEMINI Pro because my experiments ate all of my token. I run QWEN for this and the result surprisingly good. It coded the way I wanted to.

Labels:

Comments

Post a Comment

Popular posts from this blog

STAN vs. UI

Ugh, kasihan banget adek gue. Saking kepinteran dia jadi dapet Akuntansi UI dan STAN. Jadi bingung mau masuk yang mana. Beberapa orang (termasuk orang tua gue), menyarankan masuk STAN. Gue malah memperburuk suasana dengan membela memasuki Akuntansi UI, maklum bela almamater. Duh, gue jadi merasa bersalah bikin dia ragu-ragu. Kira-kira enakan masuk mana, yah? Gue juga gak tahu keuntungan masing-masing. Hasil debat sementara: ~ Untuk jangka panjang masuk UI, untuk jangka pendek STAN. ~~Tapi, dia itu kan cewek, ntar pas menikah kemungkinan besar karir terhambat. Eits, ntar, dulu, sekarang kan jamannya emansipasi, bisa aja cowoknya yang jadi BRT. ~ STAN sarang korupsi, kalo masuk STAN jadi pegawai negeri. Kalo mau kaya harus korupsi. Tapi kalo masuk UI, lulus masuk jadi akuntan publik. Sekarang ini, orang membayar akuntan publik untuk memanipulasi nilai pajak dan aset. *SIGH*. Jadi gak ada yang beres ~ dll. Yah, udah gue jadi bingung, apa lagi dia nanya saran gue. Buah, gue gak pengalaman ...
62 comments
Read more

Installing Goodix Fingerprint Reader Driver on Fedora

I currently have a Lenovo Thinkpad L14 laptop equipped with fingerprint. I was `belok` from KDE Neon to use Fedora 40 because of someone. Now I am tempted to enable my fingerprint: lsusb | grep -i fingerprint Bus 001 Device 004: ID 27c6:55b4 Shenzhen Goodix Technology Co.,Ltd. Fingerprint Reader Dump the firmware Assuming this is a fresh install, lets do some magic by getting some dependencies: sudo dnf install gcc git python-pip python-devel openssl Let's get the source code: git clone --recurse-submodules https://github.com/goodix-fp-linux-dev/goodix-fp-dump.git cd goodix-fp-dump Create an isolated Python environment: python -m venv .v source .v/bin/activate Do the magic: sudo su pip install -r requirements.txt python run_55b4.py exit There are some python scripts available. I run run_55b4.py because my device ID is 27c6: 55b4 . It will spell some nonsense, which is a good thing. That nonsense actually the firmware captured by our device. Also, I typed exit becaus...
1 comment
Read more

Chivalry vs Feminism

Throughout these years I constantly making experiment about how our society perceive about the societal changes. The overhaul of sexist strata and the privilege reformations follow. Note that every change could be perceived as progress or detrimental to the society. The foremost subject that I run is about the opposite of manliness perceived by the oldies vs modern women. The modern era allow women go out from the kitchen into the office. They can have career and enjoy the privilege that men were exclusively had in years. And, can men also do the reverse? Can men also enjoy the privilege of what women do in the past? Can men move from office into the kitchen? And the answer on this era is: NO. While women could reverse their role, men are not allowed to do the same in this society. Society will punish you when a man tries to do that. They will put a healthy man who chose to be at home dad as an irresponsible not-a-man person. If a woman's worth could be rewritten, why not...
2 comments
Read more