How to Create Websites with Framer's AI Site Generator

Framer has recently released a new AI site generator feature that allows you to create websites by just writing prompts. You don't need to write any code or draw rectangles, all you need is a great prompt. In this tutorial, we'll show you how to use this feature effectively to create a live, responsive, working website for yourself or your company.

Generating Text vs Websites

Before we begin, it's important to note that generating websites with AI is different from generating text with AI. AI doesn't have taste, so generating websites is more like generating images with AI. It's all about coming up with a great prompt and hitting generate until you get something that looks great.

Writing a perfect prompt

To get started, you'll need a free Framer account that you can create with the link in the description. Once you have an account, open a new project and click on the "Start with AI" button in the middle. This will open a window where you can type in your prompt.

A good prompt should have variables that you can control. For example, you can tell the AI that you are a professional web designer and that you want to design a website for a specific audience. You can also provide context about the website.

Once you have a great prompt, you can copy and paste it each time you want to create a website. Then, just fill in the variables with the website type, audience, and context.

Generating the website with AI

Once you have filled in the variables, click the "Start" button and the AI will start generating your website right in front of your eyes. You'll see a really great design, and if you don't like it, you can click the "Regenerate" button to explore different visual directions.

Theming the website

Once you have a design you like, you can start customizing it. You can change the colors, fonts, and design elements until you have a website that fits your needs.

To change the colors, select the main desktop breakpoint and go to the right panel. Here, you'll find a theme section where you can change the colors. You can also change the display fonts and body text.

Making changes and fixes

If you notice any issues with the website, you can always make changes and fixes. You can change the text, design elements, and even add new sections. Framer makes it easy to create a website that fits your needs.

Publishing the website

Once you have a website that you like, you can publish it. You can give it a subdomain and publish it on a Framer.ai domain for free. You can also add links to buttons and customize it further.

Conclusion and resources

Framer's new AI site generator is an amazing tool that makes it easy to create websites without any coding knowledge. With a great prompt and some customization, you can create a live, responsive, working website for yourself or your company.

If you want to learn more about how to customize your website, check out Framer University. They offer many useful resources and tutorials.