Webflow just dropped AppGen - a game-changing feature that lets you prompt your way into creating any app directly within Webflow. We test this new AI tool that allows designers to build full-fledged applications like client dashboards, login systems, and task managers without writing code. Using your existing Webflow components, CMS collections, and design system, AppGen generates functional apps in a sandboxed environment that you can deploy to your domain. We break down both our basic task manager attempt and an incredible Apple-style dashboard created by Tim Schultz, showing what's possible with strategic prompting. While it's still in beta and has some limitations, this finally bridges the gap between Webflow's visual design power and full application development.
—
TIMESTAMPS:
0:00 - Webflow's AppGen Revealed
1:15 - Building a Task Manager App
2:20 - Using Components & CMS
3:14 - The Sandboxed App Experience
4:05 - INSANE Apple-Style Dashboard
5:01 - How Designers Can Build Apps
5:53 - AppGen vs Lovable
7:13 - The Deployment Process
8:53 - Current Limitations & Future
10:41 - What is "CMD + AI"?
—
Unlock the full potential of your online presence with Kabarza and Samuel—experts in web design and development (respectively), powered by cutting-edge AI solutions. We blend creative design with advanced tech to deliver smart, high-impact websites that stand out. Ready to elevate your business? Contact us today and see what AI-driven innovation can do for you!
LINKS & RESOURCES:
Check out Kabarza's amazing work: https://kabarza.com
Visit Samuel's website for more: https://samuelgregory.co.uk
📷 Follow on Instagram: https://www.instagram.com/cmdaishow
—
Hashtags:
#Webflow #AppGen #NoCode #AI #WebDevelopment #WebDesign #NoCodeApps #WebflowApps
Transcript
The most powerful Web Flow feature is out and that is AppGen. A feature that allows you to prompt your way into creating any app you want. Things that were simply not possible before in Webflow uh or needed you know de a developer to do the whole development for you. Now any designer can just prompt and create a fullon full-fledged app. I've been trying to create a dashboard for my clients so they can log in and add tasks and see their project and the you know the status of their project and add a bunch of things like this. I got it kind of like yeah like a login page and after the login page I know this is quite ugly but we'll get into this. You have this I like it. There's something I like about cool. Well, the red is I'll show you where the red is coming from. But the idea is that here I can add new tasks and I can, you know, add an image. Um, but a bunch of things are not working, which is a given. I'll show you a better example of what I have. But yeah, this is the UI. And when you create something, let let's go step by step. So yeah, you go to your web flow project. This is my web flow project. This is my whether it's a full web. So this is obviously a a web flow in production web flow project but it can be an empty project. Exactly. It can you can start from scratch. The reason I didn't start from scratch and I did it on my agency website is because I have a bunch of CMS and component and variables. So if I go to my styles, I have some colors. This is old. That's why it's not really sophisticated. But I have some stuff. I have some components and I have some CMS items. Why does this matter? This matters because now you have this app gen. And when you go to the app gen, you can now I can create another app. By the way, you can create multiple ones. This is where you start. You start from scratch. You can add a prompt and you can add your collection. So for example, I have career and job location and job types uh collection. And I can add those. And I have also components. I can add my global footer like nav components, things like this. And I can prompt the AI to use these components throughout the app. So the app, unfortunately, this is what I don't like about is a very separate experience, right? It's completely separated. Well, I'll show you where it's connected, but it's for the most part separated. you prompt it and then it starts creating it in a sandbox and then you can deploy it. Um, and by the way, all of this is still in beta. Uh, and the thing is that it takes those variables, those colors and you know design system that you essentially have and reflects that inside of the app. But you still have the option to go into your files. This is like your files and uh presumably do a bunch of stuff. You can write code, right? You can edit this code. Yeah. Yeah. Here I can't re uh I can't edit this code because this is a footer component. And look how interesting. So if we go to you see here here I have like this footer and here these are this is like essentially my footer component that is being pulled in. So, we have these site components that are all here. We have the styles and we have a bunch of other things. I apparently we we should be able to also deploy this um well, we we can only deploy it to Webflow cloud, but we can also push it to GitHub. A good friend of mine, Tim Schulz, he's making this for his client. And check it out. Like if I reload the page, you see it has even like some animations. Mhm. And again, like all of this with just prompting, but he's been doing this. He's like he spent like six hours uh prompting this. So still everything is uh local. So it's on my local storage. But look at this. This looks really really good. So he said like he was like very specific with the style and prompting and being like do it like the Apple style and uh apparent apparently for the big part this is like functional. So like for his client they can look at this. This is so good. This is so freaking detailed. It's just so feature like it's crazy to think like a designer not a developer can do this in web flow. And this is like on his client's domain. So, yeah, just a reminder, this is like was not really possible at all. It wasn't even in Web Flow's wheelhouse to to support app, you know, they ignored whizzed, you know, that was the only way to build like an app experience using Web Flow. It's not quite the same because obviously designers can literally design the pages inside of Web Flow that later gets transformed into a web experience. this what you'd have to do is you'd get your designer to build all of the components and and literally create them as components and then then you can prompt them into your app. But um yeah, it's not much different um honestly like designing it literally on the canvas or like in the component. Well, it is different but you won't have that fine tune. you won't have that fine tune and I wish for that and I really really would love to see this app gen to not be a separate thing or like the preview to have you know the CSS capabilities that I that web flow has so I can click on stuff and change them and it just changes them in the code but presumably if you change the component inside of web flow that will just update in appj yeah I don't know because I don't have this component on my website. So, this is completely made up, right? It's kind of like Yeah. But I I need to do more, you know, testing to see that. But from what Tim has been creating, I'm looking I've been very optimistic about things that can be done here. Very happy it's here. But it's not going to be too different from lovable v all of that. Yeah. But it's just not the thing is yes it's not going well here's the thing with lovable lovable has the experience to create all of this but they don't have the you know the platform infrastructure what web flow has you know web flow has the CMS the editor the designer the capability do now lovable cloud well yeah but it's nothing like you know what web flow has with all of what you need for a marketing website. Uh, now you in Web Flow you have all of the Webflow platform stuff. You have animations, you have GAP, right? You have that that amazing visual builder. On top of that, you have Lovable essentially. Yeah. With AppGen. Yeah. Yeah. And just just a reminder as well for people, it's like this is this is an Astro project. It's I I'll have to have a look at it, but it needs to be like the assumption here is that it's not a serverside rendered experience. It's a it's a JavaScript powered experience. I don't know. I'll have to double check. I mean, in theory, if you upload a NexJS project to web flow cloud, that's a serverside render experience. But this, you know, this is really where the use case for this isn't so that you build a website just from Vibe coding. You can totally do that. If you want to sign up to Web Flow, start a new website, and just vibe code the hell out of the entire thing. Obviously, you can do that. Yeah. But I don't think you'd be getting It can be quite frustrating to vibe code a website. You don't get the fine control that you expect. Um, Web Flow's created a good compromise though by being able to import components that have been built in Web Flow with Devink. Great compromise there. But um yeah, I think there if you just wanted to vibe code an app and that was it, then there I think there are better systems out there. But if you want to vibe code an app and incorporate it within a web flow website, this is this is great. This is amazing. Yeah, I really hope that they will open it up more so you can do a bunch more more with it. I'm not sure where the limitations are to be honest, but knowing web flow they haven't been the most, you know, pro open source or something like this even though they have like the code export and stuff to be uh to be fair. Uh but yeah, we we never have been able to you know have a back end like access to a back end per se. How are they charging for this then? What's the pricing? Uh, from what I understand, it's nothing for now. But, uh, I don't know because like you can't do unlimited AI, I guess. So, you have I I think you can add your own um your own AI API to it. Yeah. Sorry. Your own API like for like OpenAI. Oh, no. like for your AI like the AI uh costs are I'm not sure because I don't see it from here. Uh just so you see like to deploy you you see how you can change the the path. This is really cool. It's you know it's on my domain slash whatever path that I want and then I just press deploy and it's building the app and deploying it. Very cool. And I can access my variables from here as well. So it seems like maybe maybe Appgen will be its own UI and Web Flow will port more from like the design to here or it's a two-way binding, you know, you can create cuz Yeah, you you That's what I mean. Yeah. 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.