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.
Posted by
Nandi
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.
