Vibe Coding Initiation


My experience with vibe coding #

Everyone talks about vibe coding. There are many tools that promote it, and many people claim to practice it.

I’ve tried it multiple times with various tools, but it never really worked. Actually, it’s not a complete truth; it worked until it did not.

The actual issue was always the amount of generated code and the quality of the results.

But I’ve found an ideal task for vibe coding - redesign this blog. I wanted to change the theme, but since I’m not a designer, I needed some help.

Firstly, I asked to review the codebase and generate a README for it. Afterwards, I asked to make the website more modern and appealing.

Starting from that, it took multiple iterations to get to the final result. In some cases, it generated a lot of redundant CSS; in some cases, it was quite good. Usually, the model could fix issues and solve small tasks I asked it to do in one or a few iterations.

Apart from CSS quality, the main task was done. It redesigned the blog to a more modern look. But some links did not contain a hover effect, even though all others had.

So, I asked to fix it, describing the issue and showing the example (the page and the text that was affected). It took five or even more iterations until I gave up, since the LLM had generated Exceptions in CSS for the links and it never really worked.

OK, I thought to myself, let’s try to fix it manually. I opened two separate windows and started to compare; all styles were the same, except the line that did not work was multi-line, while the others were single line. I found a width: 100% that did not work in this case.

When I asked to fix it, the LLM fixed it with no issues.

Every iteration it tried to fix the issue, it generated more and more CSS that made an effect on other places.

Meanwhile, the final result was quite good; I decided to go to the next steps and clean it up.

Cleaning CSS #

The first step was to ask the LLM to clean CSS from unused styles and make it more compact and efficient. It did some job. Some CSS was deleted, and everything works well.

Why not try to make it even better? Let’s ask again.

The second iteration started to break the website, so I reverted to the previous version.

But even when it was done, the website required some cleaning, where I decided to jump in and fix it manually. It took me around 30 minutes to remove all styles I did not like in a design and keep it more minimalistic.

Final thoughts #

When I look at the final CSS, I can clearly state that it’s not perfect. Maybe it’s even not efficient, but it works well and looks good enough.

I think I’ve started to understand the Vibe Coding concept, and I can say that it’s not for everyone. Until LLMs won’t be able to understand the context and the task fully, it will require a lot of iterations and human intervention to do the job. And we did not start speaking about complex tasks.

I’ve tried LLMs with complex tasks very often, and I can say that it’s not working well. For me, it has never worked well yet.

But for simple tasks, specifically from an area you are not familiar with, it can be a great help. It’s not a hired developer, but it feels like an assistant that can do some job for you. It can review your code, generate documentation, fix small issues, and brainstorm ideas.