AI, Layout & Design

Generating layouts with AI using Wireframer

Generating layouts with AI using Wireframer

Generating layouts with AI using Wireframer

·

7:06

·

22K views

·

Jun 12, 2025

About this lesson

No matter how experienced a designer you are, starting with a blank canvas can be daunting — and building up the structure of common layout patterns from scratch can be time consuming, boring, and redundant.

Which is why we’ve created a new AI powered layout generator called Wireframer.

Describe what you’re trying to build — and Wireframer generates responsive, purpose-driven but neutral layouts — that we can then take, modify, and style ourselves to end up with something completely our own.

Let’s take a look at how it works.

https://www.youtube.com/watch?v=O98BcnvmyoA&t=0s Intro

https://www.youtube.com/watch?v=O98BcnvmyoA&t=35s Opening Wireframer and starting a prompt

https://www.youtube.com/watch?v=O98BcnvmyoA&t=97s Writing better prompts

https://www.youtube.com/watch?v=O98BcnvmyoA&t=151s Specifying sections and layouts

https://www.youtube.com/watch?v=O98BcnvmyoA&t=201s Iterating and refining with prompts

https://www.youtube.com/watch?v=O98BcnvmyoA&t=245s Making edits directly on the canvas

https://www.youtube.com/watch?v=O98BcnvmyoA&t=358s Creating new pages with Wireframer

https://www.youtube.com/watch?v=O98BcnvmyoA&t=400s Wrap up

Sign up: https://framer.link/yt

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

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

0:00No matter how experienced a designer you 0:02are, starting with a blank canvas can be 0:04daunting. And building up the structure 0:06of common layout patterns from scratch 0:08can be timeconuming, boring, and 0:11redundant. Which is why we've created a 0:14new AI powered layout generator called 0:16Wireframer. describe what you're trying 0:18to build and Wireframer generates 0:20responsive, purpose-driven, but neutral 0:23layouts that we can then take, modify,0:26and style ourselves to end up with 0:28something completely our own. Let's take 0:31a look at how it works.0:35Wireframer is meant to be a starting 0:37point from a blank page. So from here I 0:40can head to the insert panel and click 0:43wireframer or press W on the keyboard to 0:46jump straight here. Now the left sidebar 0:49is a chat where we can begin prompting.0:52We can either write a prompt from 0:53scratch or start with one of the 0:55suggestions which give us a little 0:56preview when we mouse over them. Just to 0:59show you real quick what happens on the 1:00canvas after your first prompt. I'm 1:02going to click on one of these. Framer 1:04takes a moment to think and gets to work 1:07generating sections on the canvas. We 1:09get navigation, headings, placeholders 1:12for images, and even some AI generated 1:15body copy. And if we open the preview 1:17window and resize the viewport, you can 1:20see that this entire layout is 1:22responsive right out of the box. Back on 1:25the canvas, you can see that in addition 1:27to using flexible layout properties,1:29break points for tablet and phone were 1:31also created automatically. But I've got 1:33a separate lesson for you later in the 1:35course where we'll dig into breakpoints.1:37So the example prompt worked great, but 1:39the whole idea is to generate layouts 1:41and content that are tailored to our 1:43specific needs, which is really all 1:45about writing good prompts. So what 1:48makes a good prompt? Let's start with 1:50something mediocre. We can be super 1:52brief and wireframer will do its best 1:55with what we give it. For example, if we 1:58prompt, make me a landing page,2:00wireframer takes its best guess at what 2:02we might need, but it's just a guess.2:05Generic input, generic output. We can 2:08bring this prompt up a level by adding 2:10something that helps wireframer write 2:12solid, relevant copy for us. Something 2:14like, "Make me a landing page about New 2:17Leaf, an app designed to track your 2:19progress, motivate your efforts, and 2:21celebrate your successes."2:23Now we get headings and even body copy 2:26that much better describe our subject 2:28matter rather than having generic 2:30placeholders.2:31Another improvement we can make is to 2:33specify the sections we want to 2:35generate. We can add something like I 2:37want a navigation feature section 2:40testimonial and footer. And now we're 2:43getting something that actually matches 2:45our desired information architecture.2:48The next level up would be getting more 2:49specific with the actual layout of each 2:52section. Rather than just I want a 2:54navigation, feature section,2:56testimonial, and footer, let's try I 2:58want a navigation with a title in it and 3:00five columns in my footer. Create a 3:03feature section with a row of three 3:04simple cards with a title and an image.3:07I'd like a single centered testimonial,3:09too. Now we're getting the sections we 3:12asked for, but each with a layout that 3:14gives us a starting point that's closer 3:16to what I'm looking for without having 3:17to go in and do a bunch of manual 3:19restructuring. And if we wanted to 3:21refine things a little bit further, we 3:23could add something like in the header,3:25keep the copy short and punchy and 3:28include New Leaf. You get the idea. But 3:30even though starting with a strong 3:32prompt is great, we don't need to write 3:34the perfect prompt in one shot. we can 3:38get things rolling with our initial 3:39prompt and carry on a conversation with 3:41wireframer to iterate on the content it 3:44generated. Just keep in mind that this 3:46is all about big structural changes.3:49We'll take control over the details 3:51directly on the canvas ourselves. Next,3:54Frame will sometimes give us suggested 3:56edits to make that we can just click on 3:58or we can prompt the specific changes 4:00we're looking for to either edit 4:02existing sections or add new ones. I'll 4:05do a couple of edits as an example.4:06Let's prompt add social links to the 4:09footer. And you can see that our 4:11existing footer has a new layout with 4:14some social links. And let's try 4:16something even more drastic like replace 4:19the features section with icons above 4:24each feature for more visual appeal. And 4:28wireframer understands where the feature 4:30section is and makes the requested 4:32changes. And finally, I'll prompt 4:35something new by typing add a section 4:39with a string of logos 4:42after the testimonial.4:46And there we go. Rather than editing an 4:48existing section, it added a new one.4:51And it's in the right spot. Again,4:54Wireframer is meant to help us, not 4:56replace us. So everything it generates 4:58is meant for us to take over and polish.5:01So once we're happy with the general 5:03content structure and rough layout from 5:05framer, we can go back to making edits 5:07as we normally would on the canvas. But 5:10a couple of things to keep in mind.5:12First is that your chat with wireframer 5:14is cleared when you close the project or 5:17quit framer. So try to get everything 5:19hammered out in one session. And second 5:22is that the chat isn't aware of any 5:24changes you manually make on the canvas.5:26So, you really want to get all of your 5:27prompting out of the way first and then 5:30move on to making edits on the canvas.5:33I'll make a few example edits here, like 5:35grabbing this hero area and setting the 5:37height to viewport to get 100 VH. That 5:40way, it fills 100% of the height of the 5:42viewport. Then I can make a quick copy 5:44change. And then even these feature 5:47icons down here are part of a larger 5:49vector set that I can browse and swap 5:51between. Then it's mostly just a matter 5:54of styling things, which we'll talk 5:56about in the next chapter of this 5:57course. When you're ready to add another 5:59page, you can create a new page like you 6:01normally would from the pages panel or 6:03quick actions menu. Then open Wireframer 6:06and start prompting away. Each page gets 6:09its own chat. But again, since 6:11Wireframer is meant as a starting point,6:13if you do write a prompt from one of 6:15your existing pages that doesn't already 6:17have a chat in progress, Wireframer will 6:20create a new page automatically rather 6:22than wiping out the page you're looking 6:23at and starting fresh. So, one less 6:26thing to worry about there. And when 6:27you're using Wireframer to prompt on 6:29page after page, just know that pages 6:32are not aware of one another. Each 6:34instance of Wireframer on each page is 6:37its own little sandbox. And that's it.6:40Now you know how Wireframer can take 6:42your plans for a page and catapult you 6:44to a starting point that has the 6:46structure you need to build on top of 6:48without having to spend a bunch of extra 6:49time building up your layouts from 6:51scratch. That's it for this one. I'll 6:54see you in the next one.

TeachesAI Generation Responsive Design

Also coversBreakpoints Form Inputs Frames Keyboard Shortcuts Links Vector Sets

Watch on YouTube ↗

‹ Creating advanced components with Workshop in Framer

Inline Content Editing ›

More in this topic

Connect Framer to Claude Code, Codex, Cursor, and more

Connect Framer to Claude Code, Codex, Cursor, and more

Agents2K views · 2 days ago

Content, Components, and CMS with Framer Agents

Content, Components, and CMS with Framer Agents

Agents468 views · 2 days ago

Generation, layout, and styling with Framer Agents

Generation, layout, and styling with Framer Agents

Agents886 views · 2 days ago

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Auto Translate

Framer Update: Auto Translate

Framer Update4K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.