Vibes Before Code: How Does Vibe Coding Work

“There’s a new kind of coding I call ‘vibe coding,’ where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.” — Andrej Karpathy
In early 2025, that single tweet from Karpathy hit my feed like a lightning bolt. I had just wrapped a pitch for a fintech dashboard and was decompressing on my balcony with a cold brew when I read it. And it clicked. He wasn't just joking. He was articulating a design energy I had felt but hadn’t named.
As someone who’s been in the UX world for over a decade, I’ve seen trends come and go: responsive, mobile-first, atomic design, no code, low code. But vibe coding? It felt different. It felt like the first time I opened Photoshop and realized I could move pixels just by feeling it out. That same visceral sense of flow. Let me explain how it actually works.
What is vibe coding?
Vibe coding is what happens when you stop fighting the system and start collaborating with it. It's not about typing the perfect loop or setting up the ideal framework—it's about describing what you want and letting the AI figure out how to make it real.
It's whispering to your machine: "Make me a simple feedback form with stars and a comment box" and watching it conjure the layout, inputs, spacing, and even a working submit function in seconds.
When I first tried vibe coding with Cursor, I swear I laughed out loud. I asked it to "make the card look like it was designed by someone who reads Kinfolk" and it did. That's the thing—it’s not just code. It’s code that responds to taste, intention, and personality.
Step-by-Step: How Vibe Coding Works
1. Prompt with Intuition
You type (or speak) what you want. Not with code, but with intent. "Create a page that looks calm. Add a soft blue background, large welcome message, and a call to action." Done.
2. AI Decodes the Vibe
The tool—whether it’s Gemini Code Assist, Claude, or Cursor—breaks your vibe into components, layout, structure, behavior. It turns your words into HTML, CSS, JavaScript, Flask, whatever you need.
3. You React, Not Debug
Instead of poring over where a div is misaligned, you just say: "The footer feels heavy. Lighten it." Or: "Add a fade-in animation on load." And it does. It’s like designing in conversation.
4. You Repeat Until It Feels Right
One of my biggest surprises? The joy. You’re not debugging. You’re sculpting. Reacting. Shaping. You get to that zone where you forget what time it is. And for us designers, that’s the good stuff.
Why It Clicks for Designers Like Me
Vibe coding flips the script. In traditional programming, I always had to translate my vision to a dev. Then wait. Then review. Then debate about whether 24px padding was "too much."
Now, I write it myself. With help. It's like suddenly being handed an extra pair of hands that know how to code, draw, and guess what I meant when I said "make it pop."
And for non-coders? It’s even better. If you've ever used a no code tool and felt boxed in by the templates, vibe coding lets you step outside the box. You tell the machine what to build. It listens.
Where I Use Vibe Coding (and Where I Don’t)
Where it shines:
- Prototypes for client pitches
- Micro-sites for campaigns
- Hackathon experiments
Moodboard websites for internal strategy
Where it fails:
- Anything with sensitive user data
- Complex backend logic
- Multi-dev team projects (unless everyone is vibing with the same AI)
I once tried vibe coding an internal finance dashboard and it started suggesting made-up calculations. That’s when I knew: vibes can only take you so far. Guardrails still matter.
Tools I Keep Going Back To
Cursor
Great for chatting directly with my codebase. Feels like pair programming with a super patient senior dev.
Lovable.dev
The closest thing to designing in Figma and coding at the same time. I love it for one-pagers.
Gemini Code Assist
Slick, responsive, and surprisingly good at multi-step prompts. I’ve used it to set up entire Flask apps on a lazy Sunday.
In Closing
I used to think design was sacred, and code was the hard part. Vibe coding blurs that line. It lets the ideas move faster than ever.
That said, vibe coding isn't about being lazy. It’s about knowing what matters and letting go of the rest. It's for the moments when you need to build something quickly and beautifully, without waiting for a dev sprint or a pull request.
So next time you're tempted to open up a blank file and stare at it hoping for divine inspiration, don't. Just start typing. Start vibing.
Written by Ashley Alexsius
UX Designer. Builder. 10 years of pixels, clients, chaos—and now, vibes.