Vibing with some Vibe Coding Tools
I’ve been playing around with some AI coding and prototyping tools and wanted to record and share out some of what has been working for me and how they’re connected.
FWIW - I’m trying a lot of different things and trying to be curious and open-minded to these tools, so there is a bit of overlap in what they do and I’m not yet looking for the best possible tool, it’s more about getting a feel for them. There is a LOT of overlap between these tools, and the nature of how the agents and prompting makes them a bit hard to compare.
I think these tools are going to change how we work. I’m not going to touch on all the implications of that, though I do have thoughts and concerns. Lots of them. For the purposes of this post, though, I recommend reading with a beginner’s curious mind.
The tl;dr: so far my favs “core” tools are:
Cursor - for local editing, fine tuning and when you need control
v0/Vercel - for prototyping and smaller app ideas (Bolt, FWIW seems very comparable, but I have had a bit more luck with v0.)
Replit - for mobile workflows, for a full-stack AI agent help
Cursor - Local IDE and Coding Agent
Best for working locally, more advanced control and iteration. Taking a text-to-prototype to the next level.
~Cursor~ is the best IDE I’ve found for AI coding and the built in agent is also very good. I’ve found it works better implementing specific UI, and if you know how to code, it works just like VSCode or another text editor.
What it’s used for: Prototyping and sketching (vibe coding) with the agent, direct code editing (it’s a fork of VSCode and works much the same) and anything else you’d do with an IDE.
What’s cool about it? It’s a nice, standard IDE and the agent is powerful and easy to use. If you’re new to working with AI coding agents, it’s fairly easy to get started and is a great place to play around while you’re learning.
Cursor has been really helpful getting environments set up. This is something I’ve often struggled with, and having that AI pal there to chat with has been a bit of a game-changer. (This also applies to the online tools as well, have had a lot of luck with v0 setting up dependencies, data bases, storage, APIs etc.)
Vercel and v0 - Deployments and AI-powered UI generation
Very good for text-to-prototype generation, when used in conjunction with Vercel’s backend and hosting capabilities it’s a full-featured service you can use to build lightweight apps. The stack seems a little locked in (next.js, shadcn, etc.) and inflexible when compared to Bolt or Replit. Another thing I’ve noticed is v0 will take some liberties that the others don't, sometimes this is a good thing, sometimes it’s…inexplicable.
~Vercel~ is a cloud platform for deploying and hosting websites and web applications, while ~v0~ is Vercel's AI-powered UI generation tool that helps developers create and prototype user interfaces using natural language prompts.
What it’s used for: Vercel is used for deploying applications and prototypes to the web, and it’s really great for that. v0, on the other-hand, can be used to sketch out UI, build prototypes and more with the help of an agent.
v0 has a great UI and is great for UI, but it struggles a bit when it comes to doing more complicated things. If it starts to “debug” or build test pages, you’re likely going down a path you don’t want to spend time on. Still, these tools are early, so I expect it to get better.
What’s cool about it? I really like Vercel’s UI and hosting dashboards, they’re very clean and well laid out. Getting something deployed to Vercel from something I built in Cursor was very easy and things just seem to work.
~https://vercel.com/ ~
~https://v0.dev/ ~
Replit - Powerful, full-stack agent and hosting
Replit is the best I’ve tried for more complicated, full-stack work. It’s text-to-prototype is good, but it’s a bit heavy for that, IME. If I were looking to build a fully functional app I think I might start with Replit, but it’s not as good with more simple prototyping.
Replit feels more complete than all of these tools. Which, frankly, isn’t always needed.
Replit is the only one (that I know of) that has a viable mobile interface and it works pretty well.
Sadly, the above two bullet points are a little at odds. for some of these more light weight tools building better mobile interfaces.
Replit~ combines cloud-based deployments and hosting with a built in AI agent. Kind of like Vercel+v0 in one package. So there is some overlap there. Replit is really great for rapidly exploring ideas or generating quick prototypes or sketches using it’s built-in agent.
What it’s used for: Prototyping and sketching (vibe coding) via the agent, especially in an “on the go” context. It can set up databases, environments, dependencies just by interacting with the agent.
What’s cool about it? I’ve found their agent(s) to be really easy (and fun) to work with, and they have a nice mobile app interface. I built the first draft of a personal project I’m working on over the course of a Saturday afternoon, just by chatting with the agent on my phone. As well, the web IDE works pretty well, for if/when you need to get into the code on-the-go, and they have nice documentation.
😎 Watching the visual preview build your UI. It’s fun to give Replit a detailed prompt and then just watch it go.
😛 The ability to target an element (say a button) in the agent is really helpful when prompting.
Lovable - Cloudbased AI prototyping agent
My trialing of Lovable has been underwhelming. It doesn’t seem as good as either Replit or v0 and has some limitations, the big one being that it’s more difficult to make direct edits to the code.
What it’s used for? Similar to v0, it’s a web-based assistant that helps get you started with a prototype or app idea.
What’s cool about it? It seems very similar to v0 and Replit. So can be used in the same way.
What’s different about it? In my experience, it’s a little slower than both of those, and the results, while similar are a little less accurate when using an image reference. I’ve done several experiments with it and so far see nothing that would put it over v0 or Replit.
Bolt - Flexible Cloud-based Prototyping
Bolt is interesting. I’d put it on par, or maybe even better than v0 for UI work. It’s more flexible as well, as you can mix up the stack if you’re looking for something that falls outside of the next.js/shadcn situation that seems fairly ubiquitous. One thing to note, I’ve noticed it takes some short-cuts when using screenshot/Figma import that v0 doesn’t. So it looks more accurate, but the code isn’t as good.
Also, anecdotal but I’ve had it run into issues that seem trivial but it can’t seem to resolve. So far it’s been a bit frustrating.
What it’s used for? Similar to v0 and Lovable, it’s a web-based assistant that helps get you started with a prototype or app idea. At first glance it’s more like v0 and seems to offer a lot of similar features and a similar workflow.
What’s cool about it? Similar to v0, it does a good job getting a first cut, especially with more static, one page views and micro-explorations.
What’s different about it? Can’t see much different to v0 so far, with the big exception that you can easily specify different tech stacks and frameworks.
When using the import from Figma feature, it made a few short cuts that I really didn’t like. Turning core UI and visualizations into images, for example. This might not matter, but I wanted to try and make some direct refinements to some things and realized I couldn’t when looking at the code.
Figma MCP
So I’ve been playing around with this Figma MCP for a bit, and it’s pretty interesting, if somewhat limited. MCP stands for Model Context Protocol and it’s a way to connect LLMs (and agents) to tools that add context and information to help they do what you want them too. (That’s my rough layman’s overview.) In this case? It can have a peek at your Figma designs. I’ve found this works pretty well at the component, or isolated UI level, and so-so at the “full page” level.
What it’s used for? Giving agents and LLMs (like Cursor’s agent) access to have a look at your Figma files. Many tools now have Figma import, and now, with Figma Make coming along, I’m not sure this will be all that useful going forward. Especially since the results have been mixed, IME.
What’s cool about it? It does a pretty good job of recreating designs, and can be used as a big time-saver, especially when looking at more isolated things like smaller components.
https://github.com/GLips/Figma-Context-MCP
A note about Figma’s latest releases
I’ve not been able to play with these tools (specifically Sites and Make) but I’m very excited to check them out. From what I can gather, reading up on them and watching the deep dives at Config, they’ll be a gateway and game-changer for designers. If they can nail the round trip workflow (into and out of Figma to Code via a git repo, etc.) and handle existing codebases somewhat elegantly, I think they’ll be a no-brainer for a lot of teams. Even without that, they’ll be extremely valuable.
Their principles of 0 to 1 and 1:1 really resonated with me. All of the tools I’m talking about here have been a bit of an unlock for the maker in me, allowing me to do things I would have struggled to do before, and take my ideas to something tangible much quicker, which is key in my work. I love the prompt to prototype workflow, but I have struggled nailing the details and I think that this is where Figma’s tools can really shine: getting that last 10% just right. Nailing the 1:1.
Tips and advice
Knowing how to code helps a lot with these tools. There have been many times when a change you want to make would be much easier just jumping into the code, as opposed to trying to vibe with an agent. NOTE: The code these tools write can vary from really good to terrible. I’ve been pretty disappointed with a lot of the front end code specifically. It works, but if you’re looking for semantic code, or clean implementation, these tools are not it.
Knowing how to use version control (Git) and having a good understanding of the concepts of git can help a lot, even if you’re not connecting your work to Github or coding locally. It’s really easy. for these agents to go off the rails, and knowing the ramifications and risks of going backwards, is important.
Be careful when things start to go sideways. While most of these tools offer some way to move backwards, I’ve noticed that it’s really tricky and gets more and more tricky as you go. v0 has been the best for this, but if you decide to move things locally (to Cursor, for example) it’s a one-way street and there is no going back.
Knowing how to talk to the agents in “technical” terms helps. So knowing the language of UI, or how to structure apps and views, etc. Example: if I want to change the data model, being specific about that as opposed to just referring to the view, helps. But using other agents, like asking Claude or Chat GPT outside of these tools for helps, is a good thing to try when you're not seeing what you want. I’ve had some luck asking for another agent to help me develop an idea an prompt before getting into the actual making process.
Keep those designer soft skills sharp! Soft skills and design fundamentals are going to be more important than they’ve ever been. Being able to articulate and defend design decisions, having solid, clear and thoughtful rationale and being able to communicate and present your work well will be key. We’ll be doing more work via text, and our skills around collaboration, problem-framing and sense making will be front and center.
If you’re designing in Figma: organize your file and name your layers semantically. I’ve noticed this has helped quite a bit. I need to explore more, but I think there might be something there to help these tools implement things correctly. I expect this will hold true going forward. These tools can leverage that context and organization to fill in context and gaps. They’ve got internal rule sets that, at least right now, you can’t change, and giving them the proper context, along with visuals, can help break through those rules when needed.
Speaking of rules, learn how to use rules and instruction in prompting. This is especially helpful in Cursor, which allows for both global rules and project-based rules. Having the right prompt and the right rule set can really make a difference. Most of the time. Sometimes it’s a good idea to just let the agents do whatever they do with minimum instructions, I’ve been surprised quite a few times with how creative the solution is.
