From Sketches to Code: Vibecoding as a Superpower for PMs and Designers
As a product manager with a design background, I’ve often felt like I had the tools to cover about 80% of launching a product. I was good at spotting opportunities and noticing where things could be improved. I loved talking to users, digging into their frustrations, and uncovering what they really wanted to achieve. I could sketch low-fidelity prototypes, test them, refine them, and think through the potential impact of what we were building.
But then came the final stretch: turning those ideas into polished, high-fidelity prototypes or even better, working products. That’s the part where you normally needed to hire developers, or hope you had some coding friends willing to help out.
Fast forward to today, and things have changed dramatically. Thanks to tools like Gemini, Claude Code, and other large language models (LLMs), that last step, once seen as “a developer’s job,” is starting to shift. More and more, the question isn’t “Do we need a developer for this?” but rather “Can I just prompt this?”
# So, what is vibecoding?
The term vibecoding was popularized by Andrej Karpathy in early 2025. It describes a way of building with AI where you don’t fully code every detail yourself. Instead, you describe the outcome you want, the “vibe,” and the AI generates the code or prototype for you.
For many aficionados, vibecoding usually means working inside editors like Cursor or VS Code with AI plugins such as Roocode or Cline. That’s where you get the full experience of coding alongside an AI assistant.
In this blogpost though, I’ll focus on lighter tools like Gemini Canvas and Claude Artifact. Some might say that isn’t “true” vibecoding, but for quickly making prototypes that actually get the job done, it’s more than enough.
For product designers and managers like me, this is a game-changer. Suddenly, we’re not limited to sketches or Figma files. We can create working demos or tools ourselves, without waiting weeks for engineering time.
# A real example from my work
At Envision, we hired a truly great design agency that came up with a beautiful branding style that included this dotted visual style. Besides the full branding package, they provided us with 16 of these dotted styles (see image). They also suggested building a custom tool that could turn any photo into this dotted style, but that would have come with a hefty price tag.
Dot examples:
A while ago, using Gemini, we built our own image-to-dot generator internally. No extra costs, no waiting. Just a prompt, some iterations, and suddenly we had exactly what we needed. The prompt was literally: "Create a tool where I can upload a photo and get a dotted version of it. Make sure I can change the dot sizes and colors and I can download it as an SVG file." And about 30 minutes later,we had a tool that did exactly that.
# Prototyping, reimagined
Outside of work, I’m fascinated by what vibecoding can do for prototyping. In the past, I’d spend hours connecting screens in Figma, choosing interaction styles, and polishing animations. Now, I can create a prototype in under 30 minutes by prompting the right way and combining the right tools.
For example, I recently mocked up an idea for how AI agents could change the shopping experience for a friend who has an online store. With Gemini and Veo 3, I quickly put together a working concept video with audio. In half an hour, I had something I could show—something that would have taken me hours in Figma.
# The limits (for now)
Of course, vibecoding doesn’t mean we can instantly deploy everything to production. Building something scalable, reliable, and secure still requires proper engineering. But as a PM, vibecoding lets me go far beyond wireframes. I can bring ideas to life, test them faster, and communicate them more clearly to both my team and stakeholders.
In a way, vibecoding adds an entirely new skillset to the PM/PO toolkit. I can ideate, validate, and now also prototype with code without being a developer myself.
The main shift for me is that vibecoding changes how fast and how clearly I can work. As a PM, so much of the job is about ideas, priorities, and tradeoffs. But ideas are often hard to communicate until they are tangible. Vibecoding bridges that gap. I can move from a conversation to a working prototype in the same afternoon. That speed doesn’t replace developers, but it means we can have much sharper discussions before we even write a single production line of code.
For me, that’s the real power of vibecoding. It’s not just about making things look impressive, but about creating clarity, reducing guesswork, and getting to better outcomes faster.
# Tools worth exploring
Some of the tools that stand out for PMs and POs are Gemini Canvas, Claude Artifact, and ChatGPT Canvas. They make it easy to sketch, explore, and refine ideas in a conversational way. And when it comes to turning concepts into videos, Gemini’s Veo 3 is great for prompting video prototypes directly from text. Together, these tools lower the barrier to experimentation and make it much easier to communicate ideas visually.
# What’s next?
Though vibecoding is great for concepts and prototyping, in my next blogpost I’ll write about my current love and hate journey of actually using vibecoding to make a working platform in production. I’ll share my experience with tools like Visual Studio Code with Roocode and Cline, Claude Code, Qoder, and many more that push vibecoding beyond prototypes and into something real.
More about that later...