Introduction
Creating high-quality UI applications is not a simple task. In many companies, building and maintaining complex applications is still pretty slow and cumbersome.
However, in some cases, such as with simpler or smaller-scale applications, it might make sense to use one of the "vibe coding" tools to increase development velocity.
At Perfecto, we took the time to see whether we could use such tools to create a web application while still maintaining the high standards of enterprise-grade software with quality, robust code that could be easily maintained over time.
Scope
Let's clarify the scope:
This research focused on assisting front-end developers in taking UI designs - specifically Figma designs - and translating them effectively into working, high-quality code.
Note that this isn't about using AI to create the design itself, nor is it intended to be used by non-programmers who won't understand the produced code.
Candidate Tools
We've first conducted a quick research and came up with the following tools to evaluate (granted, there are more, but we cannot cover them all):
Design Sample
To test the tools, I created this simple Figma design consisting of a web application with 4 pages:
This is actually a simplified version of an application we're planning to create at Perfecto.
Since Perfecto lets you test applications and websites on web browsers, virtual devices, and real devices at scale, we host thousands of mobile devices scattered across multiple data centers worldwide. We wanted to create a new application to control these (and other) configurations, which we call the DCMS: Data Centers Management System.
Before jumping in, a quick disclaimer:
I'm not affiliated with any of the tools mentioned here (nor others for that matter).
Also, as explained, these were examined for a very specific need, so it's very likely that they'll perform differently for other use cases.
Lastly, these services tend to change and improve rapidly, so I encourage you to try them yourself and see if they could fit your needs - YMMV.
Tool Comparison Summary
UXPin
Let's start with UXPin and scratch it right off our list.
Not because it's a bad tool—on the contrary, it seems very promising. However, after digging into it, I realized its main purpose is to design application UI based on existing code components inside a UXPin proprietary IDE. This makes it unsuitable for developers who aren't expected to design.
The tool could theoretically be used by our UI designers, but they would have to work mostly outside of Figma, which isn't our plan for the time being.
Locofy AI
Locofy seems like a very mature product with abundant nice features. It's aimed mostly at developers, but it requires UI designers to strictly follow a set of Figma best practices to generate usable code (e.g., name every frame in Figma) - so much so that they'll give you free credits just to watch a video explaining these practices.
I tried my best to adhere to the practices in my design but was still unable to generate code that I would consider "quality code." I also found this tool considerably more expensive than the other options.
Anima App
Anima lets you build in two main ways:
- Convert a Figma design into an app and then iterate over it with "vibe coding" in their playground website.
- Work using a VS Code plugin while matching code components to design components.
Surprisingly, I got different results in terms of code quality when trying both methods on the same Figma design. The "playground" provided much cleaner code, breaking it down into sections and extracting usable components. In contrast, the VS extension gave me a big chunk of code that wouldn't be fun to maintain (I did use it on an empty project).
However, while the Anima playground did a pretty good job resembling the original Figma, it was quite basic (e.g., I couldn't see code diffs) and is likely aimed more at non-developers, making it less suitable for our specific objectives.
PS: Their demo shows good integration with existing components, which I haven't fully tested.
V0
V0 did great work converting a Figma design, along with a prompt, into a well-built web application (including navigation between pages!), although it wasn't close enough to the original Figma design. The downloaded Next.js (React full-stack) app worked on the first run, and the code was nicely structured.
However, when I tried prompting it to create a Vite SPA (Single Page Application), things went awry, resulting in a mish-mash between Vite and Next code. Moreover, V0 doesn't let you extend existing projects, so I would say it's a fair choice only if you'd like to jump-start a Next.js app, and no more.
By the way, V0 was extremely inexpensive, most likely since their revenue comes from hosting the apps on Vercel.
See the detailed comparison table below to learn more about how the tools were evaluated and how they performed.
Detailed Comparison
Afterthoughts
For pure "vibe coding" targeted at developers creating enterprise-grade projects, these products aren't quite there yet. If you want to generate clear, high-quality code that can be extended and maintained over time, the above tools can only get you partway.
Additionally, these tools rely heavily on Figma designs adhering to best practices, such as structuring pages into correct tree hierarchies and naming frames properly. Failing to do so has a very detrimental effect on the quality of the produced code.
What's Next?
In the past few weeks, I've switched geers to explore how can I increase dev velocity while abiding by the above requirements by relying heavily on agentic code assistants - mostly Claude Code - paired with tools such as Figma and browsers MCPs.
Stay tuned for an upcoming post on that (and follow me if you don't want to miss it!).
What's your impression? Have you tried any of these tools?
Would you recommend other products? Drop a comment below 👇
Top comments (0)