It’s Not Code. It’s Vibecode.
Why the AI shift in design and development needs structure, not just speed.
Vibecoding is transforming software development. But without structure, it can wreck your codebase, confuse your team, and scale chaos as fast as the AI works.
Coined by Andrej Karpathy, vibecoding isn’t just about letting AI write code, it’s a mindset shift. You describe what the software should do. The AI fills in the technical gaps. It’s intent-first development.
I believe vibecoding is one of the most powerful creative shifts in software, and I want more teams to unlock its true potential, not just its hype.
🌀 What Is Vibecoding?
Vibecoding is the process of describing software functionality in natural language and having an AI generate the working code.
It’s not “no-code.” It’s “describe-code.”
The Workflow:
- Describe: “Add a dashboard with weekly revenue and churn rate”
- Generate: The AI writes the full-stack code
- Refine: “Animate the revenue card. Make it dark mode”
- Explain: Ask the AI to walk through the logic (most teams skip this, and regret it)
Fast. Flexible. Fragile when overlooked.
🚀 Day 0: When Vibecoding Shines
- Rapid prototyping with zero boilerplate
- Designers and non-devs can directly build and iterate
- Tools like Cursor, Replit, and Lovable.dev let you ship in hours
- Concepts become clickable fast, great for early feedback
This is where vibecoding shines: speed, momentum, and creative freedom.
🧨 Day 1+: When the Vibe Breaks
But when things move beyond the prototype…
- Code no one understands
- Missing documentation, tests, and safeguards
- Fragile logic, hallucinated dependencies
- Security gaps and inaccessible experiences
If you can’t explain the code, you’re still responsible for it.
⚠️ The Myth of “No-Code for Engineers”
Let’s be clear: vibecoding ≠ easy mode. It’s ultra-code—dense, complex, and often undocumented.
- The AI will make something that looks right
- But if you don’t review, you won’t know why it works—or if it’s safe
- Your team inherits every silent decision it made
Don’t trust “Done!”—always verify in the editor. You’re not saving time. You’re stacking risk.
🤝 Collaboration in the Vibe Era
Vibecoding reshapes how teams work.
Upside:
- Designers can prompt components directly
- QA writes test logic in natural language
- PMs can describe features instead of diagramming flows
Downside:
- Misaligned prompts = mismatched outcomes
- Hard to track ownership, was this you or the AI?
- Design systems get skipped unless you explicitly instruct them
🧑 Why Product Designers Should Care About Vibecoding
This is a massive unlock.
- You can test ideas without waiting on eng
- Validate flows before Figma is even polished
- Use screenshots or text to scaffold MVPs
Iterate fast, build momentum, and get buy-in earlier
For product designers who understand systems, storytelling, and structure, vibecoding turns prototyping into a superpower.
You don’t have to write code to shape code.
🏗 Scaling Vibecoding: Vibes Don’t Version Well
Early prototypes can thrive on intuition. But scaling demands structure.
When everyone’s shipping vibes with no documentation:
- No one knows who changed what
- Refactors break things they shouldn’t
- New teammates struggle to contribute
- Product logic gets buried inside prompts
♿ Accessibility and Inclusivity: Still on Us
LLMs aren’t trained to prioritize access. Unless you prompt for it, you often get:
- Missing aria tags
- Poor keyboard navigation
- Gendered or biased copy
- Screen reader-incompatible layouts
Accessible, inclusive design still depends on intentional human review, AI won’t handle it by default.
🧪 Tools I’ve Tested (and What I Learned)
I’ve built across the vibecoding landscape. Here’s what each taught me:
- Lovable.dev: Fast, visual prototyping; struggles with precise design
- Cursor: Composable AI for complex logic; requires scaffolding rules
- Sourcegraph + Cody: Essential for large codebases and change tracking
- Continue: Snappy bug-scripting; needs prompt memory structure
- Amp: Structured agent workflows ideal for code reviews and team sharing
- Base44: Lean templates with full manual control and easy cleanup
- Rork: Logic-first scaffolds with mobile previews; design updates can stump it
- Bolt.new: Slick Figma import → web app flow; limited design fidelity
- Figma Make: Prompts-to-app build with auth; ideal for prototype pipelines
- Codia (Plugin / Code / Web): Screenshot → editable UI / pixel‑accurate code / chat‑based full-stack apps, great flexibility, but UI tweaks are tricky
Key takeaway: These tools accelerate experimentation, not replace design review or systems thinking.
🧱 What I Built: Real Apps, Real Lessons
LOVABLE – Gentle Wake Alarm Clock
- Setup was seamless, pages, routing, backend logic were instant
- But matching my design proved difficult
- Visual styling prompts were often ignored or falsely “confirmed”
- Best for fast logic tests, not visual polish
Base44 – Colour Palette Generator App
- One of the strongest visual editors among AI tools
- First output was chaos. but editable
- Cleaned it up via prompts and manual design controls
- Occasionally claimed changes it didn’t make, requires hands-on QA
Rork – Skincare Tracking App
- One of the best “first passes” I’ve seen
- Multi-screen flows scaffolded correctly with minimal prompting
- QR preview for live testing was super helpful
- Visual changes were hit-or-miss, it’s more logic-forward than style-savvy
Codia – Task Tracking App
- Comprehensive initial structure, logic and flow handled well
- Adjusting app logic was smooth
- Design-level control? Not so much
- Strong MVP generator, but needs finesse to feel finished
🗝️ My Key Takeaway
These tools work best as accelerators, not as replacements for hands-on design and review.
You can vibe your way into something great. But to ship it? You still need taste, structure, and critical thinking.
📲 Coming Soon: App Store Drops
These aren’t just experiments, some of the apps I built with these tools are being refined for launch.
Each build started with a “vibe,” but getting them production-ready meant reining in the AI, manually reviewing the code, and using designer instincts to push things across the finish line.
Stick around, I’ll walk through exactly how I’m launching them.
✅ How to Vibe Responsibly
Use AI to accelerate (not abandon) good product habits.
- Prompt like a brief: clear, testable, structured
- Audit for accessibility and inclusivity, AI won’t
- Never trust “Done!”—verify edits yourself
- Use shared tokens and components for consistency
- Keep a record of your prompts and changes
- Document your logic, not just your layouts
🔮 What’s Next: The Rise of Vibe Ops?
We’re stepping into a new role: Vibe Ops
- Facilitate prompt design & planning
- Own AI workflow structure and QA
- Translate product intent into coherent build steps
- Archive prompt history and decision rationale across sprints
💬 Final Thoughts
We used to hand off mockups. Now we hand off intent.
But if that intent isn’t clear, explainable, and inclusive? You’re not vibecoding. You’re just rolling dice, with user trust on the line.
I believe vibecoding can supercharge the creative process for everyone, from solo makers to scaled teams. But only if we guide it with real product thinking.
Let’s build things worth vibing with.
How is vibecoding changing your workflow, or breaking it? Let’s swap stories in the comments on my LinkedIn article.
Design Isn’t Strategy. But It Needs One
A framework for product design that doesn’t collapse. 💡 A good idea with no structure is just a
Zuckerberg versus Musk
Just a fun little UFC fight poster mock up generated with AI for what would certainly become the fig
14 Hours of 2024 Hip-Hop’s Best
Because This Year Was Lowkey Too Good Alright, here it is: 14 hours of straight fire, the best hip-h