A year ago, a high-fidelity prototype meant a Figma file full of connected frames. Today it often means a real Next.js app I described to an AI assistant, refined line by line, and deployed before lunch. People call this vibe coding. I call it the fastest feedback loop I've ever had as a designer.
But speed is not the same as quality. After shipping a handful of products this way, I have a clear picture of where it shines and where it quietly falls apart.
Where vibe coding shines
- Turning a validated layout into a clickable, responsive prototype users can actually type into.
- Exploring three interaction ideas in parallel instead of debating one in a meeting.
- Building internal tools and admin screens that would never get engineering time.
- Getting real data into a design early, so edge cases show up before handoff.
The biggest win is not the code itself. It's that I test with something real. Users behave differently when the form validates, the table sorts and the page actually loads.
Where it breaks
AI tools are excellent at producing code that looks right. They are much weaker at producing systems that stay right. Without direction, you get five slightly different buttons, spacing that drifts by a few pixels on every page, and state logic nobody fully understands.
“The model writes the code. You are still responsible for the product.”
Accessibility is the other blind spot. Generated components frequently miss focus states, labels and keyboard support unless you explicitly ask — and check.
How I keep it on the rails
- Start from my own design tokens and components, never a blank prompt.
- Ask for small, reviewable changes instead of whole pages at once.
- Read every diff. If I can't explain it, it doesn't ship.
- Run a quick accessibility pass with the keyboard and a screen reader.
A typical vibe coding session
Most of my sessions follow the same rhythm. I start with a validated layout in Figma, describe the component and its states in plain language, and ask for one small piece at a time. After every change I run the page, click through it like a user and read the diff. When something feels off, I describe the problem precisely — the spacing, the hierarchy, the missing state — instead of asking for a vague fix.
A session rarely lasts more than an hour. Short, focused sessions keep the code understandable and stop me from accepting changes I haven't really reviewed.
What changed in my design process
Because coded prototypes are now cheap, I test with real interactions much earlier. Form validation, loading states and responsive behavior used to be things developers discovered late. Now they show up in my own prototypes during the design phase, which leads to better decisions and fewer surprises in development.
- Fewer assumptions about how things behave.
- Earlier feedback from real users on real interactions.
- Better conversations with engineers, grounded in working code.
“The prototype is no longer a picture of the product. It's a small, honest version of it.”
Tools I use
My setup is straightforward: a code editor, an AI coding assistant like Claude Code, a Next.js project with Tailwind CSS and Git for version control. The tools matter less than the habits — small changes, frequent reviews and a clear connection to the design system.
- An editor with good TypeScript support.
- An AI coding assistant for drafts and refactors.
- Next.js and Tailwind CSS for fast UI work.
- Git to track and undo changes safely.
Advice for designers starting out
Start with something you've already designed, like a landing page or a component. Because you know exactly how it should look and behave, you can judge the AI's output confidently. As your understanding grows, take on more interactive features and real data.
“Start with what you know, and let your confidence grow with every small win.”
Putting it into practice
Choose a component you've already designed and build it with an AI coding assistant in a fresh project. Provide your design tokens, describe the states and review each change in the browser. Keep sessions short and focused.
Once it works, test it with a colleague or user and note what you learned that a static design wouldn't show. Repeat with a slightly more complex flow next time.
Key takeaways
- Vibe coding speeds up prototyping.
- Start from your design system.
- Review every change carefully.
- Check accessibility deliberately.
The takeaway
Vibe coding doesn't replace design or engineering judgement — it amplifies whichever one you bring. Bring a system, and you'll move faster than ever.