Vibecoding for Utility and Pleasure
Vibecoding is a method of writing programs solely with the help of AI models. So I slightly misled in the title, as I actually modified the code with my hands and actively looked at it. I thought this approach might help people take dusty projects out of storage and work on them for their own benefit and for society.
I had just such a project - or rather one of the zillion projects lying in my closet.
I had been meaning to move my blog from eleventy to something more suitable for a long time, and I found Jekyll to be appropriate for my needs.
Here’s a bit of an off-topic section about why I need my own static site - feel free to skip this paragraph if you’re not interested. I’m an advocate of using the right tool for the right task, and using anything other than a static site for a blog seemed excessive to me - it should load quickly (kilobytes, not megabytes) and have proper markup for comfortable reading on different devices. Although I know how to work with Angular and React, I didn’t need a blog to sharpen these skills (though this might be a suitable scenario for someone else), but rather to write texts. It’s often difficult to force yourself to transfer a whole bunch of thoughts into content, and if you also need to juggle with formatting and bugs - you might end up writing nothing at all :). I didn’t want to use blogging platforms because in that case the site doesn’t belong to me, creating a dependency on the platform. I had the idea of writing a static site from scratch, but that’s just inconvenient - too much manual work. Therefore, static site generators from markdown seemed like a convenient solution. And here came the agony of choice - which one fits and which doesn’t. I settled on eleventy at the time, but doing something even moderately complex with it was terribly inconvenient - somewhere the documentation was incorrect, somewhere there were limited capabilities of the proposed framework without the ability to work around them in another way. A bunch of non-obvious obstacles where they definitely shouldn’t be. In short, I needed to choose something else.
So the task was both boring and necessary. I decided to use cursor for it. They position themselves as an IDE for programming with various LLM models. The settings include all the popular ones, and you can add your own. By default, it uses Claude 3.5. The IDE is a modified vscode (free IDE from Microsoft) - after installing and launching cursor, even all my settings, themes, and fonts from vscode were preserved.
Cursor can be used in 1) documentation writing mode (I didn’t test this), 2) in question and answer mode about code - you can ask to explain a section of code or the entire project, and 3) agent mode - this is the most interesting part, you write what needs to be done and it does it. If a command needs to be executed in the command line, a window appears where you need to run it under your name.
Working with Agent Mode
I initialized the Jekyll project according to the instructions on the website
I opened the project through Cursor, shared the entire project context with it. I launched the project in dev-server mode (where you can see the results of changes live through the browser). For posts, I use markdown, which is a convenient format for working with text. To test, I dropped an image into the assets, wrote “Create a new post, insert an image in it” - and it did. I copied the folder with posts from the previous project (they’re also in markdown, but with inline imports from eleventy) and wrote “analyze the posts, transfer them to folders, copy the images, change the links in the posts”. Here I had to correct it a bit, because it did everything 1-3 posts at a time, and each time I had to write “do the same further”. Then I fixed a few flaws, manually checked that all posts were transferred, and basically everything worked. I spent more time manually checking each post for presence in the new version. The entire transfer took about 30-40 minutes, but this is just a transfer of posts, without “beautification” for users on different devices.
I wrote all instructions in English, since the amount of text for training in English is an order of magnitude, if not orders of magnitude more, so the result should be better.
After the initial transfer, I wanted to expand the functionality - so that I would have an English version for each post in Russian (and vice versa). That is, a user enters some post, but can switch to the English version of the site and see the same post in another language.
I formulated what I wanted in the form of a user story, and the result was obtained quite quickly. For me, working with cursor was not much different from working with a development team - the main thing is to correctly formulate what you want to get. If I can answer the question of how I can do this task and can perform it in a short finite time - then it should work out well. In my practice, a lot of time is usually spent on synchronizing the team to understand the task, so the skill of formally describing the task is important, since the quality of execution depends on the formulation. Perhaps it’s worth trying some area where nothing is known at all.
If it’s unclear in your head how something should work from the user’s point of view, then the result can also be strange - cursor will do what it’s asked to do, but this result will be harder to redo later, as it will be harder to explain what needs to be changed. Just like in regular software development :)
I did several iterations in the form of informal user stories. Of course, this is not such a complex project, and here all errors can be corrected by yourself quickly enough, but this is definitely something that makes life more convenient. And some things that would have taken me weeks (since usually only a little free time is spent on this, so you have to “load” the project into yourself each time), I did everything in just one evening - probably took me about 4 hours. This is definitely more efficient than doing it manually by yourself.
However, it still couldn’t automatically translate text properly from one language to another - I probably didn’t use the right model for this, so I had to use another service for now.
Conclusions
This thing speeds up certain types of work in software development, but you need to approach it with skepticism, you need to check the results.
Why should you try this? Because these are the same tools as excel or word before (or iron tools instead of stone ones), and you need to know which tools are suitable or not suitable for various tasks. I think that the market for both agents themselves and means of working with them will grow strongly, something may become outdated quickly, something may not, but you can get profit right now. Personally, I would have done the above task for several weeks with breaks, but here I managed to do it in one evening without straining.
This post is a translation of the original article in Russian: Вайбкодинг для пользы и удовольствия with claude-3.7-sonnet