Webflow Finally Released Code Components and They're... Meh

This is fresh off the press, boys and girls. Command AI Webflow have upped their AI integration game with their platform. Now you can create code components, which I think we've seen coming for a long time, to be honest. We Framer have had it for for centuries, what it seems like, but now they seem to have brought AI code components are now available in Webflow. Only a day ago they released this. So, with this launch, anyone can generate interactive production-ready component natively in Webflow using the AI assistant. I'm showing it step by step because there is a very specific way of going there, and I don't really like that. You go to components, you create a new component, and then you say generate with AI. And then it shows you this prompt area. Oof. Yes. Yeah. Yeah. And it kind of like I'm lost where I am, and I can go back by clicking here. Like I can't do this. I can't do this. Like None of these. It's kind of like a bit Yeah. rough. Anyway, you write your prompt, and then you see something like this. But let me reload. So, here the components are loaded. One of the examples that they say, like in the prompt area, is a pricing pay component. And I asked it to do some pricing components, and it then I asked it to do multiple versions. Um so, again, look how rough the UI is. Here we see this view code. When I click it, it shows it here. It's so rough. The UI is really rough. 600 lines of code, but I guess for all of these different component variations that I have Uh where should I start? Let's start with the quality first. There there are two things that it's not doing correctly. It's not taking my brand colors. It should have access to them. I see like it has access to them, but it's not doing it for whatever reason. Not doing it good. Anyway, the first version is not this. The first version was a completely broken a white version with white text on white. And I asked it to make a new one, but it didn't do a new one. It rebuilt it here, so I can't show you the the fully broken one. Anyway, this is okay. Uh my second biggest issue is for the content it's not taking the content from my website. So, it's not aware of my website. If I do something like this with Claude code, I can tell it to to research or like give it the link or give it a Figma or whatever. Give it context. Here it feels like a bit more separated. And then I said, uh make versions. And here where like there's a different way of thinking when it comes to versions, how Webflow sees it and how AI people see it. Um so, these are like different versions and I will explain what I mean by that. Here's the thing. When I said versions, it's these versions. That's what I mean. So, it's that's what I mean by variants. Like Exactly. So, understanding. You just wanted to see different designs so you can pick one design. Got it. Exactly. And uh now I can open the component here. And now you see my chat is back. It was gone for some reason. My chat is back. I can close it, but uh this is what I mean. It's so bad the UI. The Ask AI assistant is here and it opens it here like what this gets me crazy and the view code is here and it opens it here like how bad can the UI be like Yeah, a human hasn't used this. And when you say UI, I think you mean UX like Yeah. fine but like I'm lost. I don't know where I am. Do you know what I mean? Like a human hasn't used this and Um I genuinely don't think that like yeah web I think Webflow and Framer even they don't have a good understanding of how or they have issue trying to implement AI similar to like to native to make it native to make it feel native. It It feels everything but native where with uh AI native tools like Claude design even though it has its own bug bugs etc. It feels like they have an easier time to have the AI experience um Cuz they're AI first probably. Yeah. Yeah, they're the AI experience is right and then they are slapping the editor on top and this is where they have issues with like the editor part uh where these tools have issue with the AI part and I think they don't get it. Here's what I mean. I don't want to have just variants. I don't see This is a bigger picture. I don't see Webflow being a dev only thing and I don't see Figma to be a design thing anymore. Design and dev to me are especially when we're talking about front end they're becoming one thing. We are generating more and more of both with AI and it doesn't make sense to do my design variations in Figma and then do design and do dev variants in Figma. It does It It makes zero sense. What I want is to have an environment where I can use AI to generate a bunch of stuff and then put them together. Mhm. Mhm. And this is kind of like I didn't plan to do that, but let me show you. This is what I've been doing with Figma and Cloud Code. And look at these designs. I'll zoom in and tell me what you think. These designs are all made with AI. Yeah, that I didn't look at. They They look good. Mhm. Like look at the fonts. Look at the layouts, the details. They are Even the images are AI, by the way. These are really good. I mean, look at this UI. Yes, there is like tiny issues, but it's really good and I have hundreds. I I And I have like three pages. I have hundreds of these designs and look, when I want to do to make a UX decision, I don't want to sit and design it manually. I'm I'm imagining something and I'm communicating this with AI and AI is now visualizing that for me and now I can go in. By the way, I'm using Figma most of my time without the UI right now, I noticed. Um without the UI because I'm just using it as a canvas to put these ideas together and then mix and match them, right? And then develop them. Sometimes I do this type of things in code. Sometimes I generate these things by HTML and then bring them to Figma. Sometimes I do image. Like these UIs that I think I showed you, these are done with Chat GPT image gen 2. They're super good, super detailed. So, what Webflow is getting right wrong to go back, I know that they are creating this as a tool for variants. They're being very specific here, but I feel like they're missing out on the opportunity. Give me an actual canvas where I can do what I just showed you in Figma. I want to be able to do all of this in Webflow, and then there is no separation between design versus code. It's It's there. I can use it wherever I need it. And okay, yes, this is a function like functionality thing. AI can add it. Right? Yeah. Yeah. Static first, dynamic after. I mean, you know, the fact that this doesn't I mean, it's black and red at the very least, but it's not taking It doesn't You can't just whack this into your website cuz it doesn't have any relationship to the website it's being whacked into. So, I don't really understand Maybe it'll get it in time, I don't know. But do you have the ability to publish this website, the the page with this code component on? Cuz I'm curious to know if it's a pre-rendered component. And Webflow, if you are watching, I know that's not the point, but just to specifically to to to specify, I feel like you're missing out on what is happening. So, yeah, go to that menu you just on. Here? Yep. And then scroll down to the bottom. Scroll down there. There it goes. There you go. Now, just refresh the page it's here and then that should be broken now this it is broken so it's preloaded that's good at least that people who might be wondering that means this is not bad for SEO or accessibility not by default at least but I guess this can become easier once they make it a more aware of the website or maybe I got unlucky maybe I can let's actually see well let's move on cuz we've been on this for freaking ages okay yeah true just hating on it 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 come next week and join in the banter command AI