Framer Update, AI

Wireframer: Kickstart your next site with AI-generated pages

1:58

19K views

May 21, 2025

About this lesson

Introducing Wireframer, a new way to kickstart your next site. It generates clear, purpose-built layouts that focus on structure, not style, so you can move fast while keeping full control over the aesthetics. Generation is blazing fast, and the output is responsive, minimal, and ready to customize. Once generated, you can jump straight to the Canvas to make it your own using the full power of Framer, and publish in seconds. Wireframer is perfect for landing pages, about pages, personal sites, portfolios, and more. Making your first website has never been easier. https://framer.com/updates/wireframer

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Introducing Wireframer, a fresh new way to kick off your next site in Framer.0:06Unlike other AI tools that try to do everything, Wireframer focuses on generating clear,0:12purpose-built layouts that focus on structure, not style, helping you move fast 0:18while leaving the aesthetics in your hands. Here's how it works. You can type in 0:23your own prompt or choose from one of our presets. Let's start by generating a 0:27landing page. It's fast, like really fast. The result is clean,0:33minimal, and fully responsive. And once you generate something, Wireframer will actually 0:39suggest edits to help you explore different layout ideas. Think copy changes, additions,0:45alternative sections, and more. It's all designed to help you iterate quickly without starting 0:51over. And those suggestions aren't one and done. You can always follow up with your 0:56own requests to explore more options. Let's say we want an interactive navigation that expands 1:01and collapses on mobile. Done. Framer not only selects the right section, it makes it 1:07responsive out of the box. Since Wire Framer is built specifically for Framer, layouts 1:13just work. No extra steps needed. And just like that, we've got a responsive,1:19interactive landing page ready for us to customize and publish. Also, Wire Framer 1:25isn't just for one pagers. At any point, Add another page and keep building. Your 1:30whole site starts here. No matter what you're working on, Wireframer gives you a smart 1:36place to start. Build landing pages, portfolios, blogs, teasers, personal 1:42sites, you name it. This is only the beginning. With time, Wireframer will keep 1:47evolving with more layouts, more variations, and more possibilities. Because everything 1:53happens in Framer.

TeachesAI Generation

Also coversResponsive Design

Watch on YouTube ↗

‹ Workshop: Turn prompts into powerful components with AI

Vectors: A complete reimagining of vector editing in Framer with Vector Sets and Animations ›