Vibe Code Is Now Possible in Webflow (Miyagi)

You could just say, what was it? Current page. Add a slip slider. Let me add a sexy. I don't know why, but I was like, create a sexy color scheme. And now all of a sudden, it tries to make everything sexy. And essentially, it is a vibe code plug-in for web flow. And you can choose different models. And this was my first experience with Kimmy K2. And got to say, I was pretty I was pretty impressed. So what does it do when it uh write code? So you open the app inside of web flow and then you ask it to make a component. Right. Right. Does it also create the HTML inside of web flow? From my understanding, it's basically an AI agent that interacts with the web flow MCP. Ah, okay. So can you tell it to create uh a slick slider? So you can see here I'll create this beautiful website with amazing. There you go. There you go. Look at that. Um, and obviously it looked a bit better. It wasn't much better to be honest. I was just playing around of what it can actually do. And one thing it couldn't do here, if I bring up Miyagi launch. So you can do two things. H, come on. Well, as with most things when you try and do a live demo, it's not faking working. But I have a feeling it's more my end than Miyagi's end to be honest. There's a design mode which you can create elements. You can, you know, change styles, things like this. This is you um choosing the context and you can say just the element, just the element with styles or include the element and its children. And then whatever you type is exactly what it could do. So what I found really interesting is that you can uh ask it to create GAP animations and it will create like a gap animation which by the way you do need to copy and paste into the code. So it's seemingly not interacting with the web flow interactions panel. It's literally just giving you a coded animation to do which is you know it's all right. You can you can choose between Kim K2 which was really really fast. Really fast actually. Okay. I didn't try 2.5 Pro but and 2.5 flash. I didn't I didn't try those but those are the models that you can choose. You can see it's got communicate 2 just just in the screenshot here. You can do anything that you it basically leverages the web flow API. So whatever you can do in the web flow API you can do through Miyagi. And I get that's why I mean it's just a a wrapper around the M MCP to then interact with the web flow API. So really cool change of style. I managed to, you know, on my my website here even though it looks like complete, you know, chaos. This was me adding uh variables. I told it to choose a pal choose a color palette and add them as variables and this and that. That's why I was just, you know, just me really really messing around with it. I told it to make an animation for this this intro thing, but I haven't got GAP installed, so that's why it looks like it does. Presumably, if it if you got interactions installed, it would just work, but I just And it's got this quite nice thing as well, which I found they've got like nice prompt library. So, this might even give you a bit of an insight about what it can do. So, they've got here add alt text to all images. So, this can't work with Kim K2 because it doesn't have image recognition, but with with Gemini, you can do image recognition, which is really cool. organize all of your media, fix insecure links, which is really cool. And they've got this weird I mean I do this sometimes actually. I wrap my things in HTML elements like this. But yeah, export all the classes, find and replace HTML attributes. Really cool. So it's got direct in access to the HTML code. So when you say can it do like a slick slider, I have no doubt it can do a slick slider and it will work through you know what the HTML that it needs and then gives you the code. And in fact, I tried to do an unlimited thing for this. It didn't work, but it also but it gave me the CSS that I needed to copy into the the the page. The other thing is though is that I think it's got a little secret weapon here, which is basically I mean I can't really show it. Let's try Let's try logging in again. It's basically got Slater built in. Oh, and this is what they call code mode. So, it's got two modes. You got design mode and it's got code mode. And in code mode, you can vibe code or you can just create files, JavaScript files, CSS files. And then through the options, you can choose which pages those JavaScript files and CSS files actually load on, whether they load on all pages or specific files or specific pages. So, it's really cool how you get basically uh Slater built into Miyagi. Really, really cool actually. Do you have to log in via Slater or do you have to like No, no, no, no. What I mean is it's it's Slater functionality. Ah, so it's not like actually I see I see. Yeah. So, uh it starts at 49 bucks. So, it's not cheap, but like I say again, you get Slater really, really fast, really effective. So, I was really impressed with actually how well it was um well it how well it worked. And I've spoken to Bradford and he's kind enough to just share this code for our listeners. If you basically sign up for the app just like normal, you'll get a little bad banner notification to say we're giving away tokens. And if you put launch party um all caps hyphenated, you get that you get 300 credits or 500 credits here uh for free. So you get to try it out. So it's quite a nice little nice gift he's given us. By the way, the pricing the pricing starts at zero. Like you can just have it for 30 credits um for Yeah. 30 credits I believe per month or um $19 for 150 credits. Yeah. So there we go. And then it goes up from there. Yeah. So this is the plan you get for free if you use the code. Exactly. I haven't tried some serious like design prompts yet. I haven't had a I would have done it on on the call, but like I say, it's just it's struggling to connect. Uh it might just be because I'm using a Firefox browser. That's probably it to be honest. And maybe I can quickly do it's super early as well. What I don't um understand is like design versus coding agent. So if I want to do a slider, I need to to click coding agent, right? If you just look at my screen right now. Yeah. So you've got the design agent. So this is and you got CMS agent which is coming soon. So that's going to be interesting to be able to interact directly with the CMS. Uh design agent is as you'd expect, you're interacting with the canvas itself, right? You select this and then you can add the context. You can either you know apply it to the current page. to choose a page and to vibe out a section from this, you know, from from a different page or whatever. Seed elements. Um, and then if say you've got an empty div, or you could just say, is it current page? Uh, add a slick slider to the page and see what it does. It's pretty quick. Look. Uh, let me add a sexy. I don't know why, but I was like, create a sexy color scheme. And now all of a sudden, it tries to make everything sexy. Um, failed to create elements from canvas. It seems like something going on there, but it's still chugging through. Look, it's, you know, and it might give me some JavaScript or it might give me some Yeah. script to add to the actual page. But there you go. Look. But it's quite nice, you know. Who who do you think this is for? Who do you think who do you think would work would benefit from this? It's hard to say like beginners because I mean sometimes it is really nice just to like apply a bunch of styles with a prompt like it doesn't necessarily mean beginners like just say just put the put the border radius and background and blah blah blah and it'll just do it. You know that's actually nice. So for like big design systems, I'm not sure if it can for example add a component to all pages because this is something that Web Flow should really have by default, but they don't. But with an app, you theoretically could do it. So that is imagine you have a website with 100 or 150 pages. Mhm. And then the client asks you to add a new CTA and then you have to go to every single page manually and paste that component. Yeah, imagine that. That would be that would be mental. Or you haven't created a component. You could say find all instances of this button, replace it with this button and make that into a component or something like that. You know, something like that. But yeah, like it is it, you know, prompting is a nice interface. The other um thing I wanted to show you real quick then is just how the coding agent works. Now, this again is the replacement for Slater. But does does it like uh publish the code to like their environment and then load it from there? I believe so. So, here we go. Here's some CSS, some JavaScript. you have to copy and paste like a line of Here we go. So, it's this here. So, if we look here, okay, files get mommy ugly. So, yeah, they're they're storing the files on their server and they're alternating between staging. They're doing the automatic alternation between staging and um production or you can have that control yourself. So, yeah, I see. What I don't love is uh that I have to do this script connection manually. Why can't the app do this for me? Yeah, because it can't add code in yet. I don't know whether that's a limitation of web flow. Pretty sure you can. It might be to do with it adding it to the head and body, you know, the site settings. It might be able to add it on a page or it might be able to add it as an embed element on a page or something like that, but it can't do it normally in the head. But maybe that will change. Maybe it won't change. But yeah, overall pretty impressed. Pretty cool. Really clean. Like they've they've done very well in the launch. It does look really good. And I really hope this like gets better because I I want to actually use this. I want to do like broad design changes. And um the CMS one also is nice. Like let's say you tell it to go to a bunch of CMS items and update something. That would be really nice. 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.