Webflow's New UI is INSANE

This is the new Web Flow and it's about the new direction Web Flow is taking with their entire platform. Wow. This is Web Flow. Looks like Figma. Framer. Sorry. Framer. It's framer. It's Figma. It's a canvas and it's so freaking cool. So, let's actually start using it. So, we have this AI site builder. It has a new tag because this is like the the new version. you you can start it directly from the Webflow homepage. And I already have a prompt ready. So I'm going to give it the prompt. And let's go. It's a JSON prompt. And here you already see some new sort of like UI. And here we have a site map. What does it look like? Relo. Yeah. Yeah. Quite a lot. So, uh, it seems like right now I can do only five pages. I tried to prompt it to do more. Haven't been able. Doesn't matter. I'm not going to use this today. I'm excited to use this on my old projects. I'm excited to use this for other things uh other than this AI builder. But this is where they are showing it off. So, you can delete the pages. Now that I have four pages, I can add a new page. add about page. This is really nice because it's imitating the product development life cycle. So you set a prompt, it's then taking you through the information architecture and the UX and then this forms the basis of the next prompt which presumably is the design and the pages and stuff like that. So yeah, I like this is following the product development life cycle. So here I can add for example a new section FAQ. Uh what is missing is to to change like to specifically prompt each section that is not available yet. But I'm super excited that all of that what you said with the life cycle but also for let's say projects that already exist. I would love I would really love to see this view for my existing projects. In addition to all of this, the metadata like imagine if you could have like um seeing seeing the title, the the title, the maybe even the the heading structure like you could toggle to add all of this in this view and you could like have such a nice way of like managing all of your website and what is where the information uh architecture and everything. Anyway, so this already looks amazing and you can edit it and whatnot. You can swap sections if you want. Now, let's generate site. And this is where it gets even more exciting like preparing site, creating sections, drafting content, and then we'll have finalizing all of these pages. I mean, is that I mean, you tell us probably, but it does that exist anymore, the old one, or is it just this this or so? This is just the intro for the AI builder. And you mentioned such a good point. This is this is the last time we see this view. Unfortunately, as of now, once you go into the the old web flow UI, you cannot come back here and change things from here. Why would you? It is so nice to see all of the pages next to one another and I would like to navigate the entire web flow experience this way like this way also with the other way. Anyway, so here uh we can go we can obviously zoom in and zoom out and everything is super sharp. So I I I don't know how they are rendering this and it's very performant. I mean we have only five pages anyway. We click edit. We go in. Saw that there was already an animation. So, let's go back to all pages. I go back in. There is this nice animation. And I can uh change the colors. Uh I can come here. I can say I like this one or whatever. Like I like this one. And you see how everything changes kind of like automatically. uh very in a really nice way. So I can do this uh with the colors and I can add animations. We'll talk about this the headings and sections whatnot. We can do it here uh for whatever we don't like. I can go back to other pages. Let's go to the contact page here. Let's say we want to add a section underneath. We have now this view. And there is a fair bit of hero sections. I mean, that's quite a lot of sections. Let's add this one to move it up. I have to use this. And I can obviously change the the the color here. That's this new view of kind of like configuring your pages in a very very very simple way without going into all the the details. And this is what I'm saying. I would love to have these different ways. I would love to see this as a let's say an a marketer view, an editor view after I made a website for them. They could add new pages this way. I would love to see that. Anyway, we say continue building and now we go to the old Web Flow UI and we say goodbye to that new UI cuz realistically that whole experience like you as a uh Web Flow expert, you're probably never going to see that view on a website. You are you would you do you see yourself ever using that AI builder on for myself? No, but I would love that. That's what I mentioned. So the the update is very exciting. Not because of the AI builder. I don't care even a bit about that AI builder. What I would love to see is these like UI pieces, these like different ways of managing a project. And you you remember that like a side byside view. I would love to see the different break points similar to framer in that view. That would be extremely useful. Imagine I change something. I see I see it across all the break points at the same time. I don't have to click around. I just have it. So I would love to see this view completely migrated migrated to that other view. So within the web flow canvas like within inside we would see kind of like framer and we'll still keep the the controls here. Anyway, so to just show you a little bit more, this is the the the website the the same old way, but there are a few things about it. So, if we click on the navigator or on the footer, we see there are already uh components like web flow components. We have this theme editor where we can do everything that we already did in that other view. We can do all of those things and we can add animations. So, there are a bunch of pre-made um presumably GSA animations that also add stagger. So, I can add like right now it's popping. I can add slide in apply animation to all to actually all elements. Don't do this. Don't overuse this. But just to show we can animate everything. And you see there is like these really nice stagger animations and we have here tabs that are completely functional. Everything is staggered. It's done really well. Can you prompt in new sections now? Yes. So well on just just to show you this this question here. Can you actually prompt it to use certain naming conventions with the classes like first? We'll talk about this. Yeah. Yeah. That's no, you can't do that. We'll talk about that. They have their own system. So, with the AI, you can find a layout or you can prompt a layout. You can say I don't know what what what do I need? Um, add testimonial slider. I don't know if there is Oh, it it's it says find layout. So, it's not Yeah. So, it says fancy search. Yeah, it's a fancy there's no prompting. But maybe do you think from the from the AI site builder you could tell it to use client first? No, they're using something called flowkit. Flowkit is a web flow's utility for CSS framework that helps you build websites quickly by applying pre-made CSS in web flow. From what I what I have seen, this is similar to client first and mast and maybe in between them. Um it it it says version 1.0. So it is a complete thing. And for the colors, you see how the classes are made. SG color sample. What is SG standing for? SG. Style guide potentially. Yeah, it's just a prefix. Where are you seeing SG? Just in the Yeah. Okay. Yeah, fair enough. Style guide, I reckon. So yeah, sorry. It is um quite small. I'm going to zoom it a little bit. So that's the colors. Let's just have a look at these. So these are the Okay, they are adding the the classes first. And I see here are the HTML tags. So these are for the tags. These are for the classes. And here we see heavy use of variables. And we'll take a look at that as well. Here we have even the gaps everything is uh set up with uh variables and yeah even the colors the the button. So we have class of button and now let's have a look at the do we have components? Yeah, we have just two components and the variables. We have the base that is empty. Then we have the colors pretty clean typography, sizes, even interactions and the slider. I don't know why the slider anyway. So, it is maybe not as clean, but I'm look I would not start a project using this just to be clear. I wouldn't. But if somebody comes to me with with a project based on this, I wouldn't be too mad at them. It It's usable. It's usable. Okay. It's not client first, but it it's fine. It's usable. It's not masked because I like mast more than any other um one, but it's it's okay as long as here's the thing. Who's going to use this AI builder? Probably people who are first timing web flow. And what are they going to do? They are going to probably destroy this. Not directly. They probably just change something somewhere and you know uh this will get destroyed. So as long as they don't destroy this style guide, I wouldn't be mad about um using it. Yeah, there's a question here about, you know, users design system with that. Um, my guess is they have a this AI builder just has a as a format of every website will be laid out the same. You'll always have the style guide. You'll always have, you know, you'll be using certain components and this and that. Um, I think the AI aspect probably is mostly deciding which combinations of those things to use and what the content should say. Realistically, I think there's a very light layer of AI that actually plays a part in this. It's just understand your requirements and then piece together everything. So, just to be clear, yes, the AI is not generative in that way. The AI is not generating a new section and you know generating the HTML CSS. No, the AI is just in a way, I hate to say this, it's not even necessarily AI in that way, like generative. It's just picking different sections from the existing collection. I like looking at, you know, the amount of sections that you can add. It seems like they have thousands, probably like thousands of different sections. AI is choosing from those. the the colors. I I've done like I've I've used this tool, this new update for three websites already, three tests. Uh it's always the same color set if it makes sense. Like when I when when we come here, this light and dark, this is like fixed. This is what AI has. And it's a nice safe space to start with. So all of this is not AI. The copyrightiting is AI. the image generation is AI, the generative AI. And that's what I said like I'm not really excited about that AI side of things. Um because AppGen is truly generative AI code generation. All of this is not. What I'm here for is um that you know view that I showed this. This gets me really excited. that this uh view gets me really excited. These are fun parts that are I I think Web Flow is just you know getting into this canvas you know free form canvas with with this update. This is just you know like showing us a glimpse. Maybe they are testing it. Maybe they are like seeing how viable it is, the performance, how community likes it. Yes, we like it. I I was in a meeting with the community. Everybody loves this view. So, uh take this as very positive feedback, web flow. And yeah, uh the AI part, it's fine. This is part of a larger conversation on my show, Command AI, which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter.