Visual Vibe Coding is Coming... Almost

The Problem with Current “Vibe Coding”

“Vibe Coding,” or “AI-Assisted Coding,” as it was called until recently, uses the coding abilities of the latest LLMs, extended with a dedicated software front-end, to create applications right from a text prompt — no user coding skills needed. This rather revolutionary approach to application development seems to stir the programmers’ community and has led some distinguished influencers to declare “programming” as a machine-replaceable skill.

While the issue of how far one can go with “Vibe Coding” is quite debatable, I want to focus here on one aspect of the phenomenon that degrades the technology’s value for many, including myself, who have widely adopted these tools. Once you get the initial UI implementation as generated from your prompt, any visual change, even the smallest, requires a specific prompt that attempts to explain (sometimes it looks like “convince”) the assistant to make the change in code. Simple modifications, such as increased padding or replacing an AI-generated image with your own, require a tedious exchange of text prompts. The result: slow progress, frustration, and eventually non-professional implementation.

You may see many online new “app developers” who are pleased with anything produced by the assistant and content with anything that looks “acceptable,” as the alternative would have required months of labor and costly teams. On the other hand, pros immediately see the flaws or the boring outcome of the typical AI assistant design. The real path towards quality design and exciting, original UIs: The ability to combine AI coding with Figma-like tools, allowing drag-and-drop design functionality within the “Vibe Coding” tools. Leading developers of these tools noticed the issue and started introducing some tools, but a full implementation is still on the design boards. Below is a review of the current available solutions and the road towards a “Designer’s dream AI coder”.

Current Visual AI Solutions

The Reference Image Method

One of the more effective ways to improve the UI part of an AI-generated app is to provide the coder with a reference design, taken from an existing tool like Figma or a screenshot collection site such as Mobin. The image is uploaded to the tool prompt line, and the prompt refers to the image as the reference UI design — a typical example, done using one of the leading tools, Lovable.dev, is presented next, the reference and the resulting outcome:

As you may see, the resemblance is almost perfect. However, the problem starts when you wish to edit the result, even make simple changes such as replacing an image. You may find yourself digging into the code, defeating the idea of “from prompt to app,” and getting back to React coding.

The “Point and Prompt” Solution

Vibe coding tools have already noticed the issue and, in response, introduced the concept of “point and prompt” — marking an area that needs editing with the mouse and asking the AI to implement a change. The first to introduce this feature and an even better solution allowing for limited mouse-based design features was Lovable, which provides for limited visual design once you get your first preview. In general, it looks as follows:

Competition was not late to follow, and now we have similar features in all leading tools such as WindSurf and Tempo Lab.

AI-enhanced Low-Code Platforms

A very different approach is available from existing No-Code and Low-Code solutions that face increasing competition from Vibe coding and AI-generated apps. These tools, either from the Web Design domain, such as Elementor, or from the data management and automation tools, such as AirTable, eventually introduced AI features of their own, expanded and extended to include the creation of fully featured sites and apps based on text prompts.

A typical example from AirTable takes the product’s Interfaces feature and, instead of just letting users manually craft a user-optimized UI to their previously defined data tables, it now supports creating a full-fledged app right from a text description. Here is an example of a simple CMS Interface that can be created by telling the AI assistant: “I need a CMS that handles contacts and projects”. The AI responds and creates the entire combination of the underlying data structure and an optimized UI. Here is the AirTable example:

What’s wrong with the No-Code solution?

While extremely easy to use and in many cases, achieving impressive results, the method’s usefulness depends on the needs. While internal tools serving specific departmental needs can be easily satisfied, any attempt to adopt the technique to a public-facing app encounters numerous challenges:

1. The UI rigidness might not fit the needs of the app well. Yet no-code AI-driven apps do not offer design options and force users to use the pre-designed patterns
2. Business models and scalability are often far from the needs of a public-facing app.
3. Dependency on the app infrastructure and its privacy standards may not fit the needs of a publicly available app.

These factors and the learning curve associated with some of these platforms make the “prompt-to-app” trend much more attractive to many and, therefore, considered the current “hot” trend.

Why is it so challenging?

Readers who wonder: what’s the problem? Why can’t platforms like Lovable or Cursor attach a design system and allow users to modify the app as needed, utilizing the efficiency of the mouse and visual editing? Here is a somewhat simplified explanation that may clarify the matter:

How Visual App Editors Work

To achieve flexibility and control over the connection between the visual aspects of the app and its code, Visual Code Editors introduce an abstraction layer that encapsulates each visual element in a predefined box type, through which it manages all visual parameters: location, padding, color, etc. When users click on the component, its settings are displayed (usually on the right side) while the boxed element is highlighted. Here is a sample from the Flutterflow case:

In terms of tool architecture, it looks like this:

The challenge lies in the fact that in modern code, the visual aspects of elements and the functionality associated with these elements are not easily separated and targeted as distinct parts. The flexibility gained by the abstraction layer is achieved through pre-defining the boxed elements and controlling the visual aspects in a form that allows for visual manipulation.

How AI Coders (“Vibe Coders”) Work

In the case of “Vibe Coders,” the abstraction layer is missing. The code layer is created directly from the text specification of the app target (“prompting”). Users are asked to specify the visual aspects in text in as much detail as possible to ensure the proper generation of the app UI.

The benefit of this approach: Total flexibility. There are no pre-defined boxed elements. As an extreme example, you can ask for any UI element, including games.

The drawback: Users must articulate visual elements verbally. While straightforward cases are possible, defining complex user interfaces or those adhering to sophisticated or unconventional rules in words proves impossible. As a result, outcomes are often incorrect or uninteresting.

(Note: the “reference design screenshot” attempts to fight this, but further improvements or adaptations through prompts are frustrating and time-consuming due to the missing abstraction layer.)

Emerging True Solutions

As mentioned, a few emerging players in the Vibe-Coding field have noticed the problem and are gearing up to provide a proper solution. I will mention two of the more advanced cases, which I am tracking closely:

Builder.io

Builder.io is introducing a series of tools and integration options that promise to bridge the gap between AI-generated code and visual design. Their latest announcement, Visual Co-Pilot, promises even more flexibility and control over design and code, extending the capabilities offered by their base platform.

Here is an example of the work environment offered for a design brought in from Figma, further adjusted and edited after being fully converted to a React, Svelt, etc. code (your selection). The code is fully functional and implements all he integration and functional elements of the app, while the visual part is further editable using the platform:

As user expectations and needs related to coding evolve, I expect Builder.io to enhance its offering further and eventually achieve a full cycle from visual design to code and back, as we will need to create the apps of the future.

Tempo Lab

Temp Lab is another tool promising direct access to Visual Editing. While it has fewer features than Builders.io, it is still heading in the right direction:

Bubble.io

A veteran no-code tool is making progress in the AI era, also promising correct integration between visual and text-based coding/prompting.

Summary

Visual Vibe Coding is coming and will be an essential part of the app development revolution we are experiencing. A proper solution that addresses all aspects of development and the many types of apps being created does not yet exist and will probably continue to evolve as a niche-oriented set of solutions. Once it stabilizes, Vibe Coding will become a significantly better app development approach, creating true professional UIs and unique apps that are currently hard to create with today’s tools.