Vibe design for designers
Tips from months of experimentation & AI process transformation: how to embrace “janky” prototypes, AI handoffs, and smart tool selection for design
Been getting this question a lot:
What AI tools do you use as designers of AI products at an AI company?
The short answer: Design process has been changing. More can be built with less. Product, design, and engineering functions are converging. The role of AI tools are reshaping how we explore ideas, capture vibes, and translate intent into something tangible.
What hasn’t changed: Design is still about respect for the craft, for collaborators, for the product, and for the people who will interact with our creations. AI tools give us new ways to uphold it.
Related, Design in the age of vibes explores the new wave of AI design and dev tools like V0, Bolt, and Lovable, Testing your UX ideas with vibe coding give practical tips for leveraging AI app builders to prototype quickly and iterate efficiently, and What AI still doesn’t understand (and why designers need to step up) is a reflective take on where AI tools fall short and where human insight remains essential.
Below are a collection of tips from months of experimentation & participating in AI process transformation within product and engineering teams, from how to embrace “janky” prototypes, to AI handoffs and smart tool selection for faster, clearer, and more creative design.
Vibe in the details
When you know exactly what you want, AI can become a precision instrument. Take V0, excellent for fine-grain interaction design details when you ask for:
- Timing, speed, easing curves
- Subtle fade and opacity shifts
- Staggered delays that make interactions feel natural etc.
Before, this required hand-coding prototypes or wrestling with animation libraries. Now you can sketch intent in words and quickly test variations until it feels right. That’s the essence of vibe design giving shape to a feeling and seeing how it feels in motion in just a few minutes.
Tip: Sharpen your animation sense & vocabulary. This will help fine tune animations, explore wider, and get desired results faster though prompting. Recommend starting from basics like Disney’s 12 principles of animation, to deeper motion insights from Prototyping with data, advanced operations & Lottie animations & Design in the Age of Vibes on tools like V0 and Lovable.
Communicating deployable animation
One of the biggest friction points in design handoff is animation. For example, describing how a responsive header should collapse as the screen narrows can devolves into paragraphs of specs or endless Slack threads.
Now just toss the header into V0 or Lovable, prompt it with the desired behavior, and let AI generate the collapsible animation, answering questions like:
- Which elements collapse first
- How the spacing adapts
- Which buttons stay visible across breakpoints
V0 shows animation and produces deployable code. I would share the link with engineering, and they can copy & tweak the implementation directly. No translation gap, no guesswork, and importantly, no static redlines trying to capture dynamic behavior.
This is very practical use of vibe design. It helps you move from “here’s how it should feel” to “here’s the code you can ship.”
Tip: When prompting, mention key breakpoints (e.g., “mobile under 480px, tablet under 768px”) and collapsing logic (e.g., “hide secondary nav items first”), it gets the AI to align with real constraints. Get into it more with smoother handoff practices and why clarity in animation specs matters.
Toss the PRD into Figma
AI isn’t just for mockups; it can swap for traditional PRDs. Drop your requirements into Figma Make, and out comes a janky visual map of your product’s features.
How it plays out:
- Drop requirements or bullet points into Figma Make
- Insert an example the Figma screen of what your app looks like for reference
- Let AI churn out a janky visual map incorporating all the features
- See the system laid out in front of you
It won’t be polished, but that’s the point. We immediately get a bird’s-eye view of the product surface, and then designers can reshape the AI and where things live from there. This accelerates the “lay of the land” step that otherwise takes days of deeper thinking.
Tip: Prompt around flows, not features (e.g. “onboarding → setup → dashboard”) to give the AI a clearer structure. Drop in your design system so early mocks already look close to the real product, reducing cleanup. Use this output as a discussion artifact, not a deliverable. It’s about surfacing assumptions early, not finalizing design.
Janky is better than invisible
AI lets anyone illustrate ideas. Engineers can throw together a rough mock. Sales can storyboard customer pain points. PMs can sketch flows. It’s messy and unpolished. But that prototype speaks louder than text ever could. It communicates imagination & lets others get inspired and build upon ideas faster & think wider.
Yes, it looks rough. Yes, it lacks polish. But showing a messy illustration still beats describing something in words. A prototype communicates imagination in ways text never will.
This lowers the barrier to entry & that’s the shift. Design stops gatekeeping tools and starts guiding conversations & guarding the bar for craft.
Tip: Know your audience. These prototypes aren’t for everyone. They’re great for internal alignment, but potentially risky if customers or sales teams see too early. This is when designers can help guide fidelity. When non-designers are vibe designing, designers can help polish and determine how to communicate prototypes for which audience and when. See Why you should bring prototyping into your design process for using prototypes as a communication layer, not just a design artifact.
Picking the right tool
AI isn’t one-size-fits-all. Different tools serve different creative moments. Here’s a curated list based on the past 6 months of entire product & eng teams actively using AI in design process, but feel free to explore & compare others:
- V0 / Vibe → for interaction design and prototyping vibes
- Cursor AI, Claude Code, Codex → when you want to just build it without waiting on eng
- Figma Sites & Make → great for non-designers; drop in a design system so mocks look closer to real
- Claude Code → for brainstorming scrappy flows or stepping outside Figma to spark fresh patterns
- Framer AI → generates responsive websites from text, with exportable clean code
Tip: Anchor tool choice to the fidelity you need. Early = speed, jank is fine. Later = detail, polish matters. Designers can set that pace for the team, and guard craft when it gets into later stages.
The art is knowing what mode you’re in — sketching vibes, mapping features, or refining pixels, then picking the right tool for the job.
The designer’s job remains the same in many ways: shape ambiguity into clarity. The difference now is we can do it faster, louder, and with more collaborators as active participants.
Vibe design for designers was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
This post first appeared on Read More