Framer Tutorial: Generate A Live Website With AI

In this Framer tutorial, you'll learn how to use the new AI site generator in Framer. After watching this video, you’ll be able to create live and responsive websites, without any coding knowledge.

Prompt:

——————————————————————————

You are a professional web designer.
Design a [website type] website for [who]. Take into consideration their [context] and convey it with the design of the website.

Website type = [Insert here]

Who = [Insert here]

Context = [Insert here]

——————————————————————————

Chapters:

0:00 - Introduction
0:45 - Generating Text vs Websites
1:25 - Writing a perfect prompt
3:23 - Generating the website with AI
5:10 - Theming the website
7:03 - Making changes and fixes
8:09 - Adding new sections
8:49 - Publishing the website
9:31 - Conclusion & resources

Follow me on:

[nahiddotai]

This was an awesome tutorial, and great prompt! I've already made a few generations with that prompt and played around with it and it's working well. I've created a video on my socials with the prompt - sharing the wealth! Thank you

[alenvilusic]

It's an incredible video. But why, when I try it, it only makes me one page of the website instead of more

[veoxys]

Great 🔥
Can you do a complete guide from creating a Site in Figma (nav bar, Hero Section… and then the next steps in Framer (responsive…) That i can completely understand everything?

[patatebanine]

The Ai in framer is really suucckks and stupid!

[salihaydn]

Make playback speed 1.5x for normal audio speed

[patriciataylor]

I several of these Framer tutorials but i never see anyone clicking on a button etc to actual see the functionality of it. Also i don't see where you can insert a video

[private_krapfen]

i think it repeats some elements, i have seen the same design in multiple videos now, and why are there always roundet corners on the images?

[magfirrahmansyur]

I didn't see start with AI in the site

[shubhiagrawal]

Omg 😱😱 thats amazing🎉🎉 but scary too 😅 we will lost our job soon 😂

[Patchandtransform]

Hi Nandi, thank you for your tutorials. They are really helpful. Were you using the paid or free version for this website creation? I have inserted the exact same prompt and it created a landing page that did not have any cool design elements. I am testing with the free version, however. Thank you.

[appleujuicesucks]

Aint no wayyyy this is so It did work out for me 🤯👏

[whistlingmeerkat]

I set up a Framer free account but don't have the option of start with AI

[SlanderTV]

So how do I grab the html and CSS from this and incorporate for my backend logic?

[vimal-ybko]

hey nandi! how to make the pictures from black and white to coloured

[adhingrha]

Hi, Nandi! Thank you for creating such helpful tutorials, I really enjoy watching every single one of them.

Could you please create a tutorial on how to apply "scroll variant"? It's usually used for navbar on top and I already know how to do that. My concern now is how to apply this in a section placed in the middle of a page. So as the user scrolls down, it's supposed to just stop while changing the variant of a component inside the section.

Thank you in advance, man! I owe you!

[RealAlexKramer]

Great video! If I may ask, how do you get the screen to follow the mouse in a very smooth way? Thanks!

[jskchoq]

Which service do you use to record the screen? Curious if it allows you to zoom in and out like you’re doing in the videos.

[girijeshthodupunuri]

How can I take the code and start coding the functionality?

[hardboiled]

How do you copy a theme from one page to another within a site? Or from section to section

[josemarcellopezpino]

Hi, what do I have to do to publish on my own website (startup, small business). I mean paste it on a specific domain or am I tied to Framer?