What is Framer AI?

October 8, 2023
Written by Chris

AI is on everyone’s mind. There is no denying that.

With the influx of AI to the public through chat and search engines, the website builder space has also seen an increasing interest in generating websites through AI.

This article will cover the Framer AI feature that I find quite interesting.

Let’s get into it!

How does Framer AI work?

Framer AI is quite easy to understand. It includes an input field where you can insert your prompt.

And with all prompts – the more detailed it is, the better the result.

In the next section, I will show examples of AI-generated pages inside Framer.

Framer AI is one of many features the robust web builder can offer. Read our full, in-depth on what Framer is and its features.

Get started with Framer AI

It all starts within your Framers dashboard when you want to try or publish a website.

Under the section “Get Started” there is a “Start with AI” button. Clicking this will open a new project.

Get Started with Framer AI.
Picture above: Under the section “Get Started” you can access some nice features, including Framers AI toolbox.

Inside this view, we can click “Framer AI” which opens the AI prompt input.

Framer AI prompt text field.
Picture above: This is the Framers AI overview, where a prompt box is in focus.

Here, you can input your detailed prompt for the Framer to build a website on top of.

Ready to publish your AI-generated Framer project: Learn how to set up custom domain for your Framer project.

Examples of AI-generated Framer templates

Portfolio

I wanted to create a portfolio for a web developer named NumberOneWebDevSpecialist.

For this AI site, I used the prompt:

Design a portfolio website for a web developer based in New York called “NumberOneWebDevSpecialist,” specializing in PHP, javascript, and Python, with images of each language.

And this is what the tool returned.

This is how a web dev portfolio site might look if you specialize in JavaScript, Python, and PHP. For the geeks out there.
Screenshot above: This is how a web dev portfolio site might look if you specialize in JavaScript, Python, and PHP. For the geeks out there, Languages Visualized only shows JavaScript code.

E-commerce

For the e-commerce page, I want it to be a storefront for laptops and other electronic devices.

Create an e-commerce store with a storefront for electronics. Show some sample laptops on the front page.

Screenshot above: A storefront for an e-commerce website focusing on electric goods.

Try it for free

I would advise you to test it out yourself. If you’re new to prompting or AI in general, I would advise you to give as detailed a description as possible to the AI tool.

The more details you can fit into the prompt box, the more precise the outcome will be.

You can test it at Framer with a free account and see how it works.

Too good to be true: the pros and cons

Creating a website with a few clicks here and a prompt there. Is it really too good to be true? Both yes and no.

Let us talk about some pros and cons of Framer’s AI templates.

Pros of Framer AI

  • Fast to prototype – or even ship a website. With proper prompt engineering, you can get a beautifully modern designed website. You can go from an empty sheet to a fully filled website in minutes.
  • Lots of design inspiration. As a web developer, I can honestly say that design isn’t my most incredible expertise, so from my point of view, Framers AI tool gives me more input on how to design aesthetically good-looking websites.
  • Fully responsive out of the box. Don’t worry about setting the correct breakpoints for mobile devices. Framer AI takes care of all three viewports.

Cons of Framer AI

  • Many AI-generated templates have the same feel and design. As with articles written with AI, those that aren’t curated with a human touch become quite non-unique.
  • Prompt engineering becomes the weakest link. Orchestrating and modifying prompts can be a tough challenge, but when creating a website, it can take a lot of tinkering to fit the needs perfectly.
  • Prompt history can’t be found. I want a history to show previous prompts.
  • It can’t generate more than one page. It would be remarkable if Framer AI could create more than one page.

Our verdict: Can it be used for a production site?

It certainly can be a helping hand in creating a new web design. Without any editing, I wouldn’t personally use it in production.

But it is a great tool for a starting point or as inspiration.

With all AI tools as of now, a human touch will definitely get it to a production-ready website. But it will require modification.

If you have an existing site and want to migrate to Framer, I would personally try out their HTML to Framer extension for Chrome, which lets you copy and paste HTML from a website.