Coding alongside AI - with Vibe Coding Examples

Initial setup - AI Tools

I've tried coding alongside AI lately and tested different AI Builder Tools such as Lovable.dev, v0app, Cursor. The experience was fun at the begining and I was impressed by how fast I was able to bootstrap a project, but then , while the codebase was growing, the amount of “hacks” used by the AI was also increasing. I ended up going back alot of times and restored the code to previous checkpoints.

After more months into vibe coding, I can say that after the initial MVP or even earlier, you’ll need to set some rules for the generation.

Here are the steps that I’ve took to minimize the hallucinations and maximize the quality of generated code by the AI:

1. Use Cursor rules in order to maintain a “clean” codebase as much as possible. The best approach is to have separate cursor-rules files for each rule you’re setting. This can be done using a cursor-rules.mdc file with the following code. This will instruct cursor to create a new .mdc file for every new rule that you’ll ask him to use:

---
description: 
globs: 
alwaysApply: false
---

---
description: How to add or edit Cursor rules in our project
globs: 
alwaysApply: false
---
# Cursor Rules Location

How to add new cursor rules to the project

1. Always place rule files in PROJECT_ROOT/.cursor/rules/:
    ```
    .cursor/rules/
    ├── your-rule-name.mdc
    ├── another-rule.mdc
    └── ...
    ```

2. Follow the naming convention:
    - Use kebab-case for filenames
    - Always use .mdc extension
    - Make names descriptive of the rule's purpose

3. Directory structure:
    ```
    PROJECT_ROOT/
    ├── .cursor/
    │   └── rules/
    │       ├── your-rule-name.mdc
    │       └── ...
    └── ...
    ```

4. Never place rule files:
    - In the project root
    - In subdirectories outside .cursor/rules
    - In any other location

5. Cursor rules have the following structure:

````

You can check the entire file here: https://gist.github.com/andreimacavei/fc80bfcc79fbe482acdbcf97405d25a4

2. Always have a new chat for each main (big) feature. This will allow Cursor to always know the right context for your development and not missing information from increasingly chat conversations.

3. Use the MCP servers that enhances the AI in Cursor with powerful tools such as:

   • Browser Tools MCP - it allows Cursor to debug using the browser console output

   • AI Assistant MCP - it gives Cursor extra tools such as the ability to take a screenshot of the app and update the UI, much like lovable.dev or v0.app but in Cursor.

   • List of Cursor MCP Tools that you can one-click install and allow Cursor to use powerful integrations

Example Vibe Coded Project

Now, to showcase a vibe-coded project, I wanted to build a better tool to create forms (or generate them from a description) so that’s why I’ve made 👉 FormGenius .

I first started with a couple of promtps in v0.app where I’ve tried to put up a simple UI that allowed entering some text from which it generated a structured form with questions and options. Here’s the initial chat link that you can check https://v0.app/chat/modern-form-builder-app-VHSkJHwlq8Q

From the above v0 starting code, I pushed it to the connected Github account, and then the development was moved in Cursor. After more iterations, I’ve managed to get a full working WebApp, with a database integration and an Authentication & Authorization system in place (even Google SSO).

The dashboard itself and pretty much everything were improved or replaced after growing the project into a more mature one. I’ve also integrated stripe and created subscription plans, I’ve created coupons and shared with people on different events and also on my linkedin posts such as this one

And here’s how it looks like when it’s shared

More iterations

I’ve also had an idea to display the forms as a “chatbot interraction” so that it would be more fun to complete

So, again, I’ve used v0 to start the UI, here is how it looked in the first iterrations: https://v0.app/chat/chat-view-app-design-Cj5bWik2cbx

Of course, after grabbing the code in Cursor and do more iterations, the app works far more better as you can see here: https://chat.formgeniusapp.com (in order to test the chat, you’ll need to: login → create a form →go to settings tab → set the “Conversation View” )

When sharing the above created form, this is how it will look like using the “Chatbot” view/interface:

For the landing page, I’ve chosed lovable.dev because you can create landing pages that look far more better than the ones created with v0, using fewer prompts

Here’s the original (prompted) version https://preview--surveygeniusai.lovable.app/

In the meantime, I’ve also renamed the project. The landing page was so good from the start, that I haven’t changed too many things after as you can see on the live product https://www.formgeniusapp.com/

Conclusion

I feel like this project has grown more than just an MVP from which I’ve started. Now it’s an almost fully fledged app that can become a startup such as tally or 123FormBuilder

I won’t lie to you, it wasn’t that easy to get from vibe-coded MVP in an UI tool like v0 or lovable, but the experience was far more easier than writing myself everything, especially the UI part.

Here’s a full video that I’ve filmed using the product, I would appreciate any likes or shares so I can continue create this kind of content https://youtu.be/cGvYOStQIYU?si=fwf0CNOp4F7JmhoE

I haven’t used any AI in writing this text, so you may find some grammar errors, but I think this is a good sign nowadays as it shows the author’s originality and creativity :)