A (5:40)

Matt just dropped his Vibe design guide and he's giving it to you for free. It shows you how to build a high converting landing page in under an hour using Google Stitch. You get his exact prompts, the pitfalls he hit, and the full workflow from first prompt to publish page. Get it right now. Click the link in the description.

B (6:03)

Let's try to create something new here to another web app. What I was thinking is some sort of dashboard that compares the latest large language models. Let's build out a stats dashboard that compares the top 10 large language models that are available right now for text generation. Make sure you pull actual data from the Internet to find out what the best models are for this dashboard. Ready to dive in. What's the legion? It's working on it, but it seems like maybe there's a little bit of, like, bugginess in the text. Like it sort of responds too quick or sometimes starts on the thing but doesn't respond. But we can see I'm moving forward with a sleek electric tech design system, Deep charcoal backgrounds, dashboard, blah, blah, blah. Okay, so it just came up with our color scheme here. Now it's generating the screen, and the real double check is did it actually ground the information in the screenshot from real web data? I just love that it just, like, comes up with a style sheet. When I was trying to do my own designs with like, say, clickfunnels or whatever, I was always bad at like, color schemes. I don't know what colors go good with other colors. All right, so here we go. Here's our dashboard. It's called Neural Core. So here's the stats dashboard. I mean, it's not up to date as of, like, now because it's showing GPT5 omni. So here's our web preview version, and it's not totally up to date as of right now. Now today I can tell you that much because it's showing GPT5 Omni and Claude 4 Sonnet, obviously on 5.6 Sonnet, GPT 5.4. We're on Gemini 3.1. So I mean like the data is definitely not up to date. So it's pulling from its existing training data. So it didn't look like it grounded from the Internet. Because we can see this is all from 2024, which is probably when the sort of pre training run was done on this model. Yeah, it doesn't appear to be able to pull information directly from the web to build out your dashboard. But we did get a dashboard design so the links don't seem to really work. I think you have to go and design each page individually. So let's see if I actually give it a website to find the data from, will it pull this data into our dashboard? So this looks more accurate. I mean it's got 3.5 sonnet, it's got GPT 4 0, 2024. So it didn't seem to be able to pull the data from the website. And I don't think there's an API here either. I'm not seeing any way to like export this. I mean I can obviously like copy and paste, but so yeah, it's not able to seemingly like actively pull data from the web. Which is interesting that it was able to sort of like match the color scheme of my future tools website by looking at it. But it can't actually get data from this page by looking at it. I was saying this in my news video. You can actually probably have your openclaw make designs for you now, right? Like you can say, hey, go to Stytch and design me up a new website for this. Your openclock can come to Stytch, give it the prompt to design something, throw it into AI Studio for you, code it up into AI Studio for you, and then come back to you and be like, hey, here's your live website, I made it for you. Let's go ahead and actually export it to AI Studio real quick because AI Studio just got an overhaul this week as well. Let's go to build with AI Studio. It pulled in all of these details. Our image pulled in an HTML, it pulled down a markdown file. It looks a little bit more like an ide, you know, like a Visual Studio code or a cursor or that kind of thing. So just very, very simple integrated development environment. When you're using something like Visual Studio code, there's like Terminals, like, you can open up and run a terminal. You can install extensions, you know, like WordPress plugins. But for coders, there's just a lot more that you can do in it where this is just, like, trying to keep it simple for you. So here's our coded up version on the right. It seems like it made a few, like, slight design tweaks, so it added some, like, little extra details. But Stitch is clearly designed to be your design phase. It will do a very, very basic, basic, basic, like, HTML code behind the scenes for you so that you could click this preview and see what it looks like. But you want to throw it into something like AI Studio to, like, start dialing in the functionality. So it's generating a predictive heat map. People pay good money to get predictive heat maps. Now you can just do it directly inside of this tool. So look at that. It created a heat map of where it thinks people will most likely click. I mean, how many websites have Google Analytics on it where Google can sort of understand where people tend to click on websites? What happens if I do instant prototype? Okay, Create with AI, describe a new screen to add to your prototype, build out the models page, and then once you've prototyped the whole thing, you could probably dump the entire thing over to AI Studio. I mean, I'm fairly hard to impress these days when it comes to AI stuff. I feel like I'm kind of desensitized. I'm like, all right, new AI models. Cool. New video models. Cool. Yeah, that's nice. New large language models. Yeah, it looks a little bit smarter. That's good. That's good. This was one of the things where I'm like, I'm really impressed by this. Hey, there we go. Although, interestingly so, it kind of tweaked the design a little bit. Well, you know, still got some limitations. It's still pretty impressive that you can just like, make a design like this, right click, export it over to AI Studio, and have it just like a coded working prototype. And quite honestly, if this was me, I. I would probably just build the initial design over in Stytch and then build out the rest here. Because, like, if I was just to give it a prompt of, like, now build out the models page on the AI Coding Dashboard, I think it would do it a lot better from the coding standpoint because it's not trying to redesign anything. It's trying to just build another page on top of the existing scaffolding that it already built. We'll test this, and this will be Our last test here before moving on. It's working because it says it's working. All right, so I've built out the models page for the dashboard. So let's see, if I click on Models. Boom. Models. That's how I would typically do it, is you get the initial design in Stitch. Once you have this initial design in Stitch, export it over to AI Studio. And then once you're in AI Studio, this is where you start telling it. Okay, now we've got this page. Now let's build out the compare page. Let's build out the history page. It will keep all of the existing sort of layout and esthetics and everything and just build the next page for you. Let's see, where does it actually publish? What does publishing look like? Your chat history and code will stay private. Your app will be accessible via a public URL. Get started. Select a cloud project. Okay, you have to have, like, a Google Cloud account, but I'm not going to go through the whole process because I don't actually want a published version of this. But it would publish it on Google's cloud platform for you. You technically don't even need to connect it to a domain name. It would just be like a long, weird URL to start. And then when you're ready to connect it to a domain name, you would do that from inside of Google Cloud. A quick recap here. So you give it an idea for a design. Once you have the design you like, you right click on it. You export it over into your AI Studio. Once you've exported to AI Studio, you could pretty much continually just tell it to build out the next page. Build out the next page. Build out the next page. There are other platforms out there. You've got, like, lovable and V0 and some of those tools that do similar stuff. But from what I can tell, you can just go into Google's Stitch and do this. I don't think there's any cost involved, at least not yet. Maybe there's some, like, limits that you'll hit if you try to use it too much, but from what I can tell, you can just go in and do things, just being totally real, totally honest. Keeping it 100, as the kids say. I mean, this is one of the more impressive things that I've played with lately.

A (14:15)

Hey, everyone. You know, Kieran and I have been doing the podcast for a while now. We've been at this for a couple years. We love it. We could not be happier to be doing this, but we wanted to take things to the next level. We want to level up the impact we're having with Marketing against the Grain. So the next step of our journey is something we're really, really excited about. We're going to launch the Marketing it's the Grain newsletter and Marketing against the Grain newsletter is going to be amazing. If you are a marketing leader practitioner, you're in the trenches doing marketing every day. This is for you. We're going to deliver right to your email inbox and you're going to get all the behind the scenes frameworks, practices, tutorials from us, from guests we have on the show, and from people even beyond the podcast that we think are going to be helpful and really have an impact on your day to day, week to week doing marketing. You're going to love it. It is something we've been talking about for a while. We're really excited to have it out in the world. We've already got a hundred thousand marketers who are on this newsletter. Please join. It's completely free. We'd love to have you as part of the Marketing against the Grain community and it's easy. You can click the link in the description below or you can head to marketing against the grain.com subscribe.