Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time logo
Talk to Us
Contact Sales
Talk to Us










Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required



Get StartedLogin

‹ Back to blog


The Future of AI-driven Design and Development, Today

April 3, 2023

Written By Steve Sewell

I want to show you the future of AI-driven design and development that's already here and available to use today.

At we break this into 3 pieces:

  • AI section generation
  • AI edits
  • AI mini-app generation

AI Section generation

Let’s first take a look at section generation. In Builder, we ask you for a prompt and a style. Enter anything you want to create for the prompt, like “a homepage hero section” “a signup page”, “a navigation bar”.

And then we ask you for a style, so we can have a sense of the direction to go with the look and feel, based on existing well-known examples.

For instance, for the prompt “A homepage hero section” with style like “” we got the following:

Note that AI generation takes about 15-30 seconds on average. We will cut most of the wait times out of these demos to not waste time on loading screens.

Now that you have some content, whether it was created in AI or through other means (created manually, or for example, with our Figma import), we can start editing with AI.

For instance, you can add another button, align it side-by-side with another button, and call out one as primary and the other as secondary.

Or we can even just say “translate the text to Spanish”.

This can save you a lot of time learning the intricacies of a Visual Editor or code. And hey, it can even save you from learning Spanish!

Our AI generation is not limited to just minor static sections and edits. We can even generate and edit full mini-applications, like a joke generator, calculator, or gift guide.

And then, we can prompt to edit whatever we want. Everything from look and feel — like “make this look like would be on” — to changes to business logic — like “generate two jokes at a time instead of one”:

Since all of this is in, we can easily generate code for a variety of frameworks (React, Qwik, Vue, Svelte, etc) powered by our open-source project Mitosis.

For an even more seamless workflow, you can hook up our headless CMS APIs so that this entire workflow is API-driven and changes in Builder go to your live site automatically.

For instance, this is what the code looks like to ingegrate Builder's headless CMS to a production Next.js app.

import { BuilderComponent, builder } from '';

export async function getStaticProps({ params }) {
  // Fetch the builder content as JSON
  const page = await builder
    .get('page', {
      userAttributes: { urlPath: '/' +'/') }

  return { props: { page } };
export default function Page({ page }) {
  // Render the content dynamically
  return <BuilderComponent model="page" content={page} />;

This way you can build with your entire team and wipe out a whole category of tedious tickets from your backlog.

Is AI going to replace our design and development tools tomorrow? No, absolutely not. There are two main tradeoffs to be aware of right now.

For the sake of examples in this post, I edited out the wait times, since a gif that was 20 seconds of loading and 1 second of useful things, would make for a much more painful to scan blog post. But in reality, most AI edits take 15-30 seconds to run:

So when it comes to simple edits like resizing, it can be much nicer to use a typical GUI or code to be able to edit and get feedback much more quickly:

While they work great for many use cases, some things won’t yet work as expected.

For instance, sadly, our AI cannot build you a rocket:

We are excited about the future where we close the gap between your imagination and reality.

Let's stop working through backlogs of tickets and just say what we want and make it happen. Today, this works pretty well for most of the things we see people creating in Builder.

And in the future, we are excited for a day where anything you may want is a prompt away, even if what you want requires data and interactivity, like personalized products, an interactive gift guide, or anything else you might imagine.

Hi! I’m Steve, CEO of I built all of these AI features that you see above, so if you think it’s cool and want to follow other interesting stuff we make and write about, you may enjoy our newsletter.

Introducing Visual Copilot: convert Figma designs to code using your existing components in a single click.

Try Visual Copilot


Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Like our content?

Join Our Newsletter

Continue Reading
Web Development15 MIN
Figma to Vue: Convert Designs to Clean Vue Code in a Click
WRITTEN BYVishwas Gopinath
June 14, 2024
Web Development12 MIN
Figma to Angular: Convert Designs to Clean Angular Code in a Click
WRITTEN BYVishwas Gopinath
May 16, 2024
Web Development18 MIN
Getting Started with Mitosis: Creating a Cross-Framework Design System
WRITTEN BYVishwas Gopinath
May 7, 2024