The New AI Workflow for Building Websites

The New AI Workflow for Building Websites

New

New

New

  • Guide

  • New
  • AI
  • Websites
  • Guide

  • New
  • AI
  • Websites
  • Guide

  • New
  • AI
  • Websites

The New AI Workflow for Building Websites

In this Framer blog, I'm diving into their game-changing AI site generator that's revolutionizing how we build websites. You'll learn how to go from prompt to published site in minutes, create custom components with AI, and master this new workflow that makes website building faster than ever.

image of Nandi Muzsik

Posted by

Nandi

AI prompt to generate knitting shop website on dark background
AI prompt to generate knitting shop website on dark background
AI prompt to generate knitting shop website on dark background

Table of contents

Step 1: Start a new project

If you’re new to Framer, start by creating a free account. Once you’re in, open a new project. You’ll see a blank homepage set to the desktop breakpoint. That’s your canvas.

Head to the top left corner and click the “Insert” button. You’ll notice a new option called Wireframer. This is where the AI workflow begins. Click it, and a chat box appears, ready for your prompt.

Step 1: Start a new project

If you’re new to Framer, start by creating a free account. Once you’re in, open a new project. You’ll see a blank homepage set to the desktop breakpoint. That’s your canvas.

Head to the top left corner and click the “Insert” button. You’ll notice a new option called Wireframer. This is where the AI workflow begins. Click it, and a chat box appears, ready for your prompt.

Step 1: Start a new project

If you’re new to Framer, start by creating a free account. Once you’re in, open a new project. You’ll see a blank homepage set to the desktop breakpoint. That’s your canvas.

Head to the top left corner and click the “Insert” button. You’ll notice a new option called Wireframer. This is where the AI workflow begins. Click it, and a chat box appears, ready for your prompt.

Wireframer on Framer.

Wireframer on Framer.

Wireframer on Framer.

Step 2: Generate a site with just a prompt

Let’s say you want to build a personal portfolio. You can either type that in or choose from preset templates, like a personal page with a list of projects. Select that, and Framer immediately generates a complete layout. It even creates all the breakpoints automatically, so your site is responsive on desktop and mobile from the start.

Now you have two ways to customize your content: you can directly tweak the layout (change text, upload photos, swap colors) or ask Wireframer to add new sections. For example, you can simply type “add a grid for showcasing project shots” and the AI will drop it into your layout. Want to reorder things? Just cut and paste.

Step 2: Generate a site with just a prompt

Let’s say you want to build a personal portfolio. You can either type that in or choose from preset templates, like a personal page with a list of projects. Select that, and Framer immediately generates a complete layout. It even creates all the breakpoints automatically, so your site is responsive on desktop and mobile from the start.

Now you have two ways to customize your content: you can directly tweak the layout (change text, upload photos, swap colors) or ask Wireframer to add new sections. For example, you can simply type “add a grid for showcasing project shots” and the AI will drop it into your layout. Want to reorder things? Just cut and paste.

Step 2: Generate a site with just a prompt

Let’s say you want to build a personal portfolio. You can either type that in or choose from preset templates, like a personal page with a list of projects. Select that, and Framer immediately generates a complete layout. It even creates all the breakpoints automatically, so your site is responsive on desktop and mobile from the start.

Now you have two ways to customize your content: you can directly tweak the layout (change text, upload photos, swap colors) or ask Wireframer to add new sections. For example, you can simply type “add a grid for showcasing project shots” and the AI will drop it into your layout. Want to reorder things? Just cut and paste.

Prompting Wireframer.

Prompting Wireframer.

Prompting Wireframer.

Step 3: Edit and customize content

Once the main structure is in place, you can start making the site your own. Replace placeholder images, upload a logo, add your own project shots, and tweak layout sizing. The AI makes it incredibly intuitive—even if you’ve never touched a web design tool before.

Let’s say you want a navigation bar. Just ask: “Add a simple navigation bar at the top.” It appears instantly. Need a mobile-friendly version with a hamburger menu? Ask the AI to “turn the navigation into a menu on mobile,” and you’ll get a responsive version with a dropdown built in.

Framer even lets you preview your site as you go. Click the play button, and you can interact with your layout. Resize the window and you’ll see your site adapt perfectly at every breakpoint.

Step 4: Add custom functionality with workshop

Here’s where it gets even better. Let’s say you want to add a feature Framer doesn’t natively support, like a live clock in your site footer. Normally, this would require writing a React component by hand. But now, you can generate it with Workshop, Framer’s new AI-powered code assistant.

To access Workshop, just press Cmd + K, search for “Workshop,” and open it up. You’ll see a prompt box with component presets or you can type your own idea. I typed:

“Create a clock that always shows the local time in Hungary. Add font and text color controls.”

Within seconds, Workshop generated a working React component right inside Framer. No jumping between editors, no pasting code, no confusion. The clock appeared live on the canvas, and I could customize its appearance with built-in controls.

Step 3: Edit and customize content

Once the main structure is in place, you can start making the site your own. Replace placeholder images, upload a logo, add your own project shots, and tweak layout sizing. The AI makes it incredibly intuitive—even if you’ve never touched a web design tool before.

Let’s say you want a navigation bar. Just ask: “Add a simple navigation bar at the top.” It appears instantly. Need a mobile-friendly version with a hamburger menu? Ask the AI to “turn the navigation into a menu on mobile,” and you’ll get a responsive version with a dropdown built in.

Framer even lets you preview your site as you go. Click the play button, and you can interact with your layout. Resize the window and you’ll see your site adapt perfectly at every breakpoint.

Step 4: Add custom functionality with workshop

Here’s where it gets even better. Let’s say you want to add a feature Framer doesn’t natively support, like a live clock in your site footer. Normally, this would require writing a React component by hand. But now, you can generate it with Workshop, Framer’s new AI-powered code assistant.

To access Workshop, just press Cmd + K, search for “Workshop,” and open it up. You’ll see a prompt box with component presets or you can type your own idea. I typed:

“Create a clock that always shows the local time in Hungary. Add font and text color controls.”

Within seconds, Workshop generated a working React component right inside Framer. No jumping between editors, no pasting code, no confusion. The clock appeared live on the canvas, and I could customize its appearance with built-in controls.

Step 3: Edit and customize content

Once the main structure is in place, you can start making the site your own. Replace placeholder images, upload a logo, add your own project shots, and tweak layout sizing. The AI makes it incredibly intuitive—even if you’ve never touched a web design tool before.

Let’s say you want a navigation bar. Just ask: “Add a simple navigation bar at the top.” It appears instantly. Need a mobile-friendly version with a hamburger menu? Ask the AI to “turn the navigation into a menu on mobile,” and you’ll get a responsive version with a dropdown built in.

Framer even lets you preview your site as you go. Click the play button, and you can interact with your layout. Resize the window and you’ll see your site adapt perfectly at every breakpoint.

Step 4: Add custom functionality with workshop

Here’s where it gets even better. Let’s say you want to add a feature Framer doesn’t natively support, like a live clock in your site footer. Normally, this would require writing a React component by hand. But now, you can generate it with Workshop, Framer’s new AI-powered code assistant.

To access Workshop, just press Cmd + K, search for “Workshop,” and open it up. You’ll see a prompt box with component presets or you can type your own idea. I typed:

“Create a clock that always shows the local time in Hungary. Add font and text color controls.”

Within seconds, Workshop generated a working React component right inside Framer. No jumping between editors, no pasting code, no confusion. The clock appeared live on the canvas, and I could customize its appearance with built-in controls.

Creating a digital clock with AI.

Creating a digital clock with AI.

Creating a digital clock with AI.

Step 5: Publish your site instantly

Once everything looks good, your layout is responsive, your content is personalized, your components are functional, you’re ready to go live. Hit the Publish button, and Framer gives you a shareable link instantly. No domain setup, no deployment process, no waiting.

Final thoughts

Framer’s new AI workflow is the fastest, easiest way to build websites today. You can go from idea to live site in minutes, with zero code required. And when you do need something more custom, tools like Workshop let you bring your ideas to life with just a sentence.

It’s honestly wild how far no-code has come. If you’ve ever felt overwhelmed by design tools or stuck trying to build a site from scratch, now’s the time to give Framer a shot.

Step 5: Publish your site instantly

Once everything looks good, your layout is responsive, your content is personalized, your components are functional, you’re ready to go live. Hit the Publish button, and Framer gives you a shareable link instantly. No domain setup, no deployment process, no waiting.

Final thoughts

Framer’s new AI workflow is the fastest, easiest way to build websites today. You can go from idea to live site in minutes, with zero code required. And when you do need something more custom, tools like Workshop let you bring your ideas to life with just a sentence.

It’s honestly wild how far no-code has come. If you’ve ever felt overwhelmed by design tools or stuck trying to build a site from scratch, now’s the time to give Framer a shot.

Step 5: Publish your site instantly

Once everything looks good, your layout is responsive, your content is personalized, your components are functional, you’re ready to go live. Hit the Publish button, and Framer gives you a shareable link instantly. No domain setup, no deployment process, no waiting.

Final thoughts

Framer’s new AI workflow is the fastest, easiest way to build websites today. You can go from idea to live site in minutes, with zero code required. And when you do need something more custom, tools like Workshop let you bring your ideas to life with just a sentence.

It’s honestly wild how far no-code has come. If you’ve ever felt overwhelmed by design tools or stuck trying to build a site from scratch, now’s the time to give Framer a shot.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Figma logo with arrow pointing to 'Website' text on a black background

    How to Turn Your Figma Designs into Websites Easily

    Guide

    Figma logo with arrow pointing to 'Website' text on a black background

    How to Turn Your Figma Designs into Websites Easily

    Guide

    Figma logo with arrow pointing to 'Website' text on a black background

    How to Turn Your Figma Designs into Websites Easily

    Guide

  • Text scramble animation effect showing scrambled characters in a blue-outlined box

    How to Create a Text Scramble Effect in Framer

    Guide

    Text scramble animation effect showing scrambled characters in a blue-outlined box

    How to Create a Text Scramble Effect in Framer

    Guide

    Text scramble animation effect showing scrambled characters in a blue-outlined box

    How to Create a Text Scramble Effect in Framer

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback