Builder.io Visual Copilot: From Design to Code Lightning Fast

Those reading this with experience in coding on large language models like ChatGPT probably have mixed feelings about the efficacy of using AI-generated code- but consider the targeted use case. LLMs are good at converting one thing into another. Good, usable HTML is more about the semantic structure and keeping it clean and readable. It’s less likely to cause mayhem and security issues when something is done slightly wrong. HTML is just the structure, and CSS is just the style. Your unsecured Amazon S3 bucket was your fault, not the AI's.

Older developers may remember how bad some of the code from WYSIWYG editors in the past was- like the absolute mess that was the HTML from early Dreamweaver, for example, with bloated code made programmatically. These days, however, even without an AI behind it, taking a drag-and-drop design to code produces much smoother results, and many editors do it well when they are made specifically for it. In this case, Visual Copilot is taking a design tool and making it into a WYSIWYG editor with AI.

Whatever LLM they have under the hood has likely seen hundreds of thousands of website and coding examples online, and it is specifically tuned for converting one type of input- Figma designs- which have an actual non-raster structure. It’s not taking an image and just making code based entirely on a vision model. It’s essentially converting from one format to another but with a slightly more fuzzy input made up by AI, with more flexibility in the code results than you get with traditional WYSIWYG editors.

Like any LLM-based coding tool, Visual Copilot won’t have perfect output, nor does Builder.io advertise it does. What it can do is get you part of the way there with one click and a few minutes of tinkering. HTML is quite simple on the surface, and unlike some other AI coding applications where the AI might approach it entirely wrong, even if you don’t get exactly what you need, it’s very easy to modify from a starting point. Better yet, you can highlight a section of code and chat with the LLM to have it make additional changes. In our testing, we think it did a pretty good job- it will get you 75% of the way there on most things with decent but not perfect code. (We sell coding services, so we might be a bit biased.)

One thing the AI can’t do is work with all frameworks (it does some), nor will it sort out hooking your backend to the generated frontend. You’ll have to work that out yourself. Builder.io does offer its own headless CMS implementation that makes this process work more seamlessly, but you’re probably more interested in using it with your tech stack. After all, the entire point of headless is to build a robust backend once and replace the front end whenever you want. Migrating your headless backend for a new front-end tool is a bit silly in most cases.

When used in the right development processes, it can save a lot of time, such as converting your design to HTML and CSS, which otherwise takes tedious hours. You shouldn’t have your designers do this step- a developer needs to look at what is generated with an experienced eye and make the required changes themselves. Builder.io claims “Design to code in 80% less time”. We don’t know about that; it's sometimes hard to quantify with a pretty number. It’s certainly a time save in the right use case. It’s not going to put all front-end developers out of a job, but keep your resume up to date, just in case.

Let’s give it a try.

All you need to get started with Visual Copilot is to install the plugin to your Figma project. It’s really simple- the plugin is on the Figma Community tab. Just click on it and it's ready. Highlight the parts you want the code for, and it will open a Builder.io window in your browser to get started.

Right now, it supports React, Qwik, Vue, Svelte, React Native, Angular, HTML, Solid, Marko, and Mitosis paired with regular CSS or Tailwind. For this example, we’ll keep it simple using HTML and CSS.

To test, I used an example design from Figma, a chat app window. Let’s see how it did.

As you can probably see, it’s not perfect. There are some alignment issues and the dividers are missing. Still, it’s a good start for a first try. The AI wasn’t told to make any corrections, this is the output from simply highlighting the canvas and hitting start on the “Quality” setting. It tries to figure out the class names and alt text based on the names of the layers in the Figma file.

There is a problem though- it works much better if you’ve already broken up things in Figma into their components. Let’s look at a 3D view of the elements.

See the issue? The bottom button row was a single box in Figma with a background image, so Visual Copilot just made it a single image. We can correct that, we don’t even have to talk to the AI. If you just select the individual element in Figma and have it generate, it will make a snippet just for what you selected, and (in this test at least) it figured out this single image was supposed to be buttons and cut the image up. Impressive.

These issues are mostly solved by the way you make your Figma designs. Make sure to break up anything that needs to be a separated into its own layers and label them well.

Overall, this is a neat tool in the already impressive suite of drag-and-drop page-building tools that Builder.io offers. Used in conjunction with the rest of their offerings, it’s a feature-rich robust suite made by pretty smart developers. It won't build your website for you but will get you closer.

There’s a time and place for using AI to code. When ChatGPT was the new hotness, I messed around with it for a while and was unimpressed. I tried to make it solve problems and work with complex things. I dismissed its usefulness entirely at first. Anything it could generate I could do and do better. I only thought about all of the terrible code that was about to hit the internet. My perspective was wrong.

I remember the first time I used AI to make code for a real problem. A few months into 2023, I had a data loss incident on a personal project. Though I had backed up most things offsite hourly, out of laziness I had not set up database replication on one server, then forgot about it. When I lost the storage on a cloud server (drive failure, bare metal hardware), I lost all of my databases on that machine. The important one was a list of users, permissions nodes, and configurations. The application itself had gigabytes of text logs, gigabytes of them, but for each user action and role assignment entries were hidden in that mess of text.

I needed to get this up fast. To revive this list, my course of action was to write a script to parse the log files, find each unique instance of a username, account for name changes and account deletions, permission and config changes in the correct order, pull some things from a 3rd party API and put it all into a MySQL dump file I could import. This was something I could do myself, but it would take me some time to write the logic, structure the output correctly, and bang my head on my keyboard until I had a working regex.

On a whim, I tried ChatGPT. I asked for a Python script. I told it what I needed to look for in the files with example lines, and what I needed to do with that data using rough verbal logic. It spits out a script that I could immediately tell was what I needed. It only needed very minor corrections. Even the regex was valid. I was floored. AI turned what was potentially hours of downtime and angry users into a 15-minute fix.

What did I learn from this? Aside from the importance of practicing what I preach for backups in my personal projects too, I realized that coding with AI is best suited for doing straightforward, monotonous coding tasks you already know how to do faster. In a few hours I would have ended up with a working script, probably a better one. But why wait a few hours when I can have it now? It didn’t give me working code. It gave me a 95% working code, and saved me 95% of the time.

This is the value of Builder.io’s Visual Copilot. It isn’t a tool to eliminate your need for a front-end developer. It is a tool to make your front-end developer faster. They know what they need and they can tell very quickly when something is or isn’t right and can learn how to make the AI get it right more often. In the hands of a designer with no coding experience, it’s a tool to make bad websites. In the hands of a developer, it’s a tool that goes from Figma to code in record time. The crazy thing about these AI tools is they’re still new, and will only improve from here. It’d be best if you got acquainted with them.