- 83% of designers report design-development divergence at least sometimes; 26% say it happens on every project (source)
- 66% of teams waste 25-50% of their time on design-delivery inefficiencies (source)
- 63% of teams say features slip to later sprints due to bottlenecks in design-to-code (source)
- 73% of designers say design delivery inefficiencies decrease team morale (source)
- 8-16 hours of engineering time are spent manually coding each Figma screen (source)
Roughly three years ago, UX strategist Shamsi Brinn, introduced the perfect solution to the problem of messy handoffs between design and dev in her blog entitled, “No Handoff: close the gap between product and engineering”. As Brinn put it: "Figma produces an intermediate product that requires translation to become a website or app. The effort that designers pour into Figma is ultimately throwaway work, and unnecessary handoffs are not an efficient use of our time."
The solution Brinn suggested? "The working prototype is the living spec of the project and a shared language for the team. No more translation is needed because everyone understands a prototype."
Instead of treating the symptoms of handoffs, she proposed treating the disease with a new agile working pattern she entitled “No Handoff”. Her three principles for No Handoff are:
- Foreground user needs as our northstar
- Iterate together
- Prototyping is key
2024 marked a seismic shift. AI-powered coding solutions like Cursor, Lovable, and our own offering, Fusion, didn't just improve the handoff, they empowered designers to eliminate the handoff entirely. These vibe coding solutions enabled:
- Designers to create designs in code that developers can actually use in production
- Prototypes to become production foundations, not throwaway artifacts
- Iterations to happen in real-time on the same medium: code
AI coding solutions are bringing together designers and developers to collaborate in a way they never could before. As one engineering leader recently put it: "Our source of truth needs to be our codebase. If designers can work in a tool they're good at and developers work in a tool they're good at, and they’re both working on the same thing, that's when real collaboration happens. It's a handshake, not a handoff."
| Designers | Developers |
|---|---|
Work in a code-based solution instead of Figma for most features | Inherit functional production-ready code they can build with, not Figma screens to interpret |
Leverage and reuse real code components and design tokens from the design system and component library | Review and enhance working code, not rebuild from scratch |
Test interactions in actual product code with real or mock data | Focus on APIs, state management, and performance instead of CSS tweaking |
Submit PRs to git-based workflows | Review, test, and add backend logic to PRs |
Fix UI issues on their own directly in code during QA | Spend zero time in "design alignment" meetings |
| Traditional handoff | No Handoff methodology |
|---|---|
Designer: 8 hours creating Figma screens | Designer: 2 hours building working prototype |
Developer: 16 hours implementing front-end screens | Developer: 2 hours connecting to backend |
20+ Slack messages clarifying design intent and correct components from design system | 1 PR review with code diff |
3-5 rounds of QA/revision | Ship the prototype with minor tweaks |
6 weeks design to deploy | 3-5 days idea to production |
- Actively experiments with AI design tools (Figma AI, Midjourney, Claude, etc.) in their workflow
- Speaks excitedly about AI's potential to enhance creativity rather than replace designers
- Already shares AI-generated concepts or prototypes proactively
- Designs with responsive design best practices such as auto-layout in Figma
- Comfortable with design systems, tokens, and component libraries
- Understands basic front-end concepts (HTML/CSS structure, responsive design principles)
- Actively uses AI coding assistants (GitHub Copilot, Cursor, Claude, etc.) in their daily workflow
- Speaks positively about how AI improves their productivity and code quality
- Proactively shares AI-assisted solutions or workflows with the team
- Actively participates in design reviews and provides constructive technical feedback
- Communicates technical constraints and possibilities clearly to designers
- Consistently leverages the design system and component library
Start doing
- Designing and prototyping in production-ready code
- Measuring time-to-market from idea to production
- Working in git-based workflows for code commits and review
- Getting consistent customer and end user feedback
- Leveraging your design system and component library
- Using Figma for brand new patterns or very complex creative designs
- Wiring up giant Figma noodle prototypes
- Writing complex docs describing design and code specs
Context providers | Context providers are the different integrations you can “plug in” to the AI to give it context. We’ve found that the most successful teams leveraging AI have shifted their efforts from “prompt engineering” to “context engineering”: finding ways to bring context from across their enterprise into AI so it can better understand what you want it to do to generate higher-quality results. |
Ease of use | “Quality of generation” is a challenging feature to benchmark as it’s often the result of the context provided. As one proxy, we recommend evaluating “ease of use”. An example of poor “ease of use” is as one design leader mentioned getting stuck in “prompt hell going in circles to fix one small thing”. Many vibe coding solutions for hobbyists have done this well and it’s we believe enterprise vibe coding solutions should also deliver. |
Developer experience | Even if you’re evaluating a VDE that will primarily be leveraged by non-developers, we still recommend evaluating the developer experience. If the objective is to accelerate the entire SDLC, developers should be able to easily integrate context and review, test, manage, and work with vibe coded experiences. |
Security and scale | It’s not just about SOC compliance, SSO, and AI training exclusion, to scale a vibe coding solution across a global organization, we recommend evaluating the collaborative features, ability to setup and iterate org-wide templates, and RBAC |
