Vibe-Coding a Visa-Sponsor Lookup Extension in One Day: Initial Thoughts and Impressions
My initial impression of AI coders can be summed up in one word: Excitable.
In other words, they are eager to help, but can often over-complicate your project and generate code bloat if you’re not careful.
I recently experimented with vibe-coding when building Visa-bility, a browser extension that validates a UK company’s sponsor license, as part of my 1-day development challenge series. I wanted to get a better sense of how tools like Cursor could be used for going from 0 to 1 on a project, while also improving my own skills at AI-tooling and prompt engineering in the process.
Initial Assessment
The Good:
Extremely fast framework generation (working extension in 40 minutes).
Easy frontend tweaks.
Language migrations (Javascript to working Typescript code in one command)
Test outputs as specs impressively reliable
The Bad:
Will confidently overstep if not careful in wording
Limited ability to consider larger file structure without guardrails
Tempting to turn off critical eye
The Ugly:
Code Bloat
Frankenstein directories
Fast Takeoffs and Effective Dialogues
I was pretty impressed with how quickly I was able to get a working framework of a browser extension loaded in Chrome, taking only 40 minutes from starting the project to getting an initial version loaded in Chrome with multiple popup windows.
It was also very quick to handle most of my requests to improve design changes. As someone who is admittedly not the strongest at working with Frontend/HTML code yet, being able to describe what I wanted to see visually in a prompt and watch it make the necessary tweaks was very helpful. It also served as a helpful signpost for how I could make those changes myself in the future.
Finally, I found it was very successful at writing complex code functions when given an extensive description of intended testing behavior. Wanting to build a smart matching functionality that would rank partial matches, I listed a series of requirements/expected results for how I expected a weighting function to behave.
From this specification alone, Cursor was able to make a function that worked perfectly the first time. Not bad 👏.
Stumbles and Bloat
After these initial successes however, I found that as I began asking AI to address more minute issues and refactoring, the code bloat began taking over.
After Cursor got my app running in JavaScript, I noticed that our popup.js file contained a large amount of hard-coded HTML for each scenario, which looked very clunky to me. Thinking back to how nice React was at encapsulating HTML into components for a different project, I decided to ask Cursor to recreate the extension in React/TypeScript. It successfully created a working version, but in the process I noticed that it was spinning out duplicate files/lines, resulting in extreme code bloat. Despite requests to refactor the package to impose a consistent structure, Cursor kept adding more lines of code and recreating files as JavaScript without permission.
It got so bad that I was forced to start over from my initial JS build in a new project, ruthlessly pruning and requiring permission on any changes/requests made to maintain a cleaner directory. This was also a good lesson because it challenged me to evaluate if React/Typescript was strictly necessary for this project. Given the relatively simplicity of the extension, I ultimately decided the added coding organization of Typescript and the flexibility in React components wasn’t worth the tradeoff in bloat.
I also observed that if there was a less than obvious bug, or if I wanted to make a small tweak to the final project, then Cursor was more likely to go off the rails with a solution. What took me less than an hour to get 75-80% of the way there with AI quickly stretched to 7-8 hours of tweaks and edge cases and back-and-forth with Cursor about DOM minutia before ending up with something I could deem satisfying.
Finally, I noticed that while vibe-coding it was more tempting to turn my brain off and just let the AI code whatever it decided was the right approach. When encountering errors, I would find myself instinctively drifting toward the chat box to tell it to fix something rather than jump in and try and understand the problem myself. Aside from being somewhat concerning, especially since I’m not the only one to experience this, I also did not especially enjoy coding this way. It felt more like wrangling an excited sheep dog than taking the time to build something intentionally.
Final Takeaways:
“A poor craftsman blames his tools.”
Part of the growing pains of using an AI coder is learning how to effectively structure your requests/specs so they are comprehensive and provide the necessary context/guardrails for the AI to work in. By first trying things the quick and dirty way (i.e. requesting basic changes one at a time), I could hardly say I was taking an optimal approach. One strategy I look forward to taking in the future is to first go back and forth with the agent on a design spec and roadmap prior to writing any code, outputting the final result to a doc that it can directly reference to stay on track.
I also think that moving forward, I might try and leave the initial framework setup to AI, but dive into more of the structuring and file management myself. In the time it would take me to type in a request to change some code, I probably could have gone in and done it myself in a more elegant way. Striking the right balance is going to be the key to keeping things fast and stable. Still, I was glad to experience some of the pain initially, as it gives me a reason to try and improve things the next time around.
Finally, while I am looking forward to crafting more complex strategies when building apps with AI, at the moment I would say I am hesitant about offloading too much of my mental processing to code structure/design. Aside from the risk of over-reliance on AI, I also want to keep honing my habits and sense for effective models and patterns. In holding onto this ability, it will let me take a more critical lens to what AI is outputting in the future, improving my ability to utilize it more effectively in turn.
In the meantime, if you are looking for a job in the UK and require visa sponsorship, check out Visa-bility!