How to Build Websites in Framer Using AI.
In this YouTube video, Ridd shares his experience using the new Framer AI, generating websites with AI prompts. He walks through four different prompts, showcasing the generated websites and discussing what worked well and what didn't. He also share their thoughts on the potential of AI-generated websites and how the technology could be improved in the future.
Exploring the Framer AI Beta: Generating Websites with AI Prompts
Have you ever wished you could generate a website with just the click of a button? Well, that's exactly what the new Framer AI beta promises to do. As an aspiring web developer, I was eager to test out this new tool and see if it could live up to the hype. In this blog post, I'll be sharing my experience using the Framer AI beta, generating websites with AI prompts.
Prompt 1: Pickleballers Landing Page
The first prompt I tried was to generate a landing page for a mobile app called Pickleballers, which helps people who play Pickleball track their progress and improve their play. The brand was meant to be colorful and playful.
When I clicked the button to generate the website, I was pleasantly surprised by the results. The website had a nice orange background and some fun cloud components. However, the black and white image showcase didn't quite hit the mark for the colorful and playful brand. The CTA cards and final CTA section were also not very inspiring.
Overall, it was a fun starting point, and I was excited to try out different themes and see how the entire website could evolve with just a click of a button.
Prompt 2: Tarte Brewery Website
For the second prompt, I was tasked with generating a website for a Denver brewery called Tarte that specializes in sour beer. The vibe was meant to be fresh and modern with citrus motifs and lots of product imagery.
The hero section of the website nailed it with a wide font that looked very modern and a yellow color that worked well with the lime in the image. However, as I scrolled down the page, some sections were less compelling, and the pricing cards' design wasn't quite what I was looking for.
One cool feature of Framer AI is the ability to shuffle through different themes and isolations with just a click of a button. This can be helpful early on in a project when you're still trying to get a feel for what something could be.
Prompt 3: Linear-like Page
For the third prompt, I decided to get more granular and try to generate a page similar to Linear. I listed out very specific sections that I wanted to achieve, including a Bento grid style, dark mode with a purple primary color, and lots of gradients and transparency.
The resulting website was not perfect, but it wasn't bad either. I liked the subtle grid lines and the font, but the buttons were very simple. One thing I noticed with Framer AI is that a lot of the images it generates are in grayscale, which may not be ideal for some projects.
Prompt 4: Jazz Jams Festival Page
For the fourth prompt, I tried to generate a vintage-inspired page for a jazz festival in Austin, Texas, called Jazz Jams. The page was meant to use lots of background textures and shadows.
While I didn't get the shadows I was looking for, I was impressed by the font and the background pattern. Framer AI also allowed me to change the twimoji easily, which was a nice touch. The CTA section was my favorite part of the website, with the bold "Stay in the groove, baby" heading.
Prompt 5: Rid's Photography Portfolio
For the final prompt, I wanted to generate a full-screen image portfolio page for a photographer named Rid. The page was meant to be clean with a white background.
The resulting website missed the mark on the white background, but I did like the font and the CTA heading, "Stay snapped on Rid's ravishing Revelations." Framer AI's ability to generate full-width images was also impressive.
Overall, my experience with Framer AI was positive. While the generated websites weren't perfect, they were a great starting point and could be easily customized to fit specific needs.
One feature I would like to see added in the future is the ability to regenerate individual sections or feed in specific colors or images to dictate the theme of the website.
AI tooling is still in the very first inning, and I can't wait to see where Framer takes it from here. If you're looking for a fun and easy way to generate website prototypes, give Framer AI a try.
Subscribe to the Hype
Subscribe to our newsletter to get the latest hype around Framer every week.