Made in

Ship Your First Personalized Web Experience webinar on June 15 @ 10AM PT. Register Now

Talk to Us
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.

Visually build with your components is a headless CMS that lets you drag and drop with your components right within your existing site.

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />

registerComponents([MyHero, MyProducts])


Hand written text that says "A drag and drop headless CMS?" is a headless CMS that lets you build visually with your components.

Learn more

Like our content?

Join Our Newsletter

Continue Reading
Web Development11 MIN
Next.js 13 - Routing Fundamentals and Beyond
WRITTEN BYVishwas Gopinath
June 9, 2023
Latest News7 MIN
Builder Drop: More insights, environments and localization permissions
WRITTEN BYBuilder Team
June 8, 2023
Latest News6 MIN
The Dev Drop: Multi-threading in JSX, Resumability, Qwik Case Study, React in 2023
June 1, 2023