You probably already know that with Visual Copilot, you can turn any Figma design to code with just one click. And while the code our AI outputs is surprisingly high quality, there's actually one huge problem with it. And it's a problem that virtually every AI tool has. Because when I write code, I use existing design systems. I have a code base full of components that when I code, I reuse as much as possible.
And so today... I'm excited to announce that we're teaching AI to code like you, to go from generic design to code, to design to your code. Importing your components and giving you code just like you would write. Reusing your existing components everywhere possible. With Visual Copilot 1.0, we're bringing your designs to full life with one click.
So we're no longer seeing generic HTML, but instead we're reusing our header. our animated hero, and any number of additional components you already use. And even better, while you can grab the code and sync it to your code base in a click, with our API integration, you can connect Visual Copilot to any site or app and be one click of a publish button, from getting your designs to your live users published instantly in seconds, and taking your ideas to reality faster than ever before.
But that's not all you can do when you actually teach AI. to understand your unique brands, design systems, and components. Today, I'm excited to show you a preview of something we've been working really hard on. The ability to turn natural language from prompts to full-on initial drafts using your design systems and tokens just like you would.
Visual Copilot will work with any design system and create on-brand experiences using those components, tokens, and other aspects like you design so you can hop into one brand and generate one way, and then jump into another, and generate using that unique style and set of components as well. Our goal is to get you from idea, to design, to code, and live production sites and apps in record time, without changing your workflows, and allowing you to do reviews, collaboration, and approval at every step of the way, just like you normally do. Now, you might be asking yourself, how does Visual Copilot learn about my design system and components?
On the side of Figma, it's as simple as launching our Figma plugin. And for understanding your code, it only takes two steps. Simply install builder's dev tools with one command. Our CLI will automatically scan and discover all of the components in your repo, as well as any third-party libraries you're using as well, such as Material UI or ShadCN.
Then our auto-mapping AI will suggest which components in your Figma design should map to which components in your code. and generate mapping code for you. The goal is to be as deterministic as possible. We don't want a magic AI system that takes a bunch of guesses and when it's wrong you have no control.
Instead with these mapping functions you get precise, deterministic, and type-safe control around how every detail of your Figma components and their properties and nested layers turn into components in your code to give you precision, control, and consistency. to make sure the design systems utilized the right way every time. And if you're thinking to yourself, this is great, but I don't always have components in my code base for everything I have in Figma.
Well, that's where I'm excited to show you one more exciting thing we have coming soon. Your Figma designs are already probably full of component sets that automatically change look and behavior based on the options you chose. But if we don't have these in code for the front end frameworks, we need them. they're not doing us a ton of use. So I'm excited to share today that coming soon, you'll be able to select a component set in Figma and in one click, generate high quality, reusable code with prop types that match the options in Figma and produce fully featured components that match your design specifications, including all inputs and variants.
And when you combine that with our new custom instructions feature, where you can provide a real code example from your code base, our AI will adjust to match your unique coding style as closely as possible. We've made a number of substantial improvements to the entire system since our beta release last fall, and with now over 600,000 installs of our Figma plugin, we're excited for you to try the new features such as component mapping to generate using your components from your repo, design systems, and libraries, custom instructions to match more closely your coding style, and a huge number of improvements to AI accuracy, speed, and quality across the board. And soon, you'll be able to generate designs using those same components and systems.
with natural language prompts, as well as export component sets to become reusable components, so that we can help you go from idea to collaboration to production in record time. You can sign up for the waitlist for these upcoming features at builder.io waitlist, or if you'd like a personalized demo from our team showing you how Visual Copilot can help accelerate your workflows and get you from idea to production faster. head over to builder.io demo and let us know.
I can't wait to see what amazing things you build with Visual CodePilot 1.0 and beyond.