Loading summary
Transcript5 lines
- [00:01]
A
Hey everyone. I'm pumped we've got Matt Wolfe back on marketing. It's the grain. He is a friend of the pod. Kir and I have done several episodes with Matt and he's helping us by diving into something that's really cool. Google released a new design tool for Vibe design called Stitch. And really what's cool about it is it lets you go from prompt to design concept for landing pages, campaigns, everything that you might be building and doing in your marketing. And it's really especially good if you don't have access to a designer or developer to do these pol mockups and designs for. You can really act as that for your product or for your company. And Matt's going to walk us through. Exactly, step by step. How to do it. Let's get into the show. Here's a quick word from HubSpot. HubSpot helped Tumblr solve a big problem. They needed to move fast to produce trending content. But their marketing team was stuck waiting on engineers to code every single email campaign. Now they use HubSpot's customer platform to email real time trending content to millions of users in just seconds. The impact, three times more engagement, double the content creation. Want to move faster like Tumblr? Visit HubSpot.com.
- [01:22]
B
All right, so on today's episode, I'm going to show you a really cool new tool. I'm going to show you how to use AI Studio from Google as well as Stitch from Google and to create an awesome website. It's going to design the website for you and then build the website for you. And if you're a business or marketer and you need landing pages or sales pages or checkout pages, this tool and this sort of process I'm about to show you can do all of that for you. It is really, really cool. Let's check it out. So this is what Google's calling Vibe design, right? Obviously playing off the vibe coding trend where you just talk to an AI coding agent and it will code up software for you. Well, apparently this is that. But for designing, for designing websites, for designing web apps, things like that. I did play around with it. I had it redesign the Future Tools website for me and was actually like pretty blown away by how well it designed it. This is a tool called Stitch from Google. And if you take a look at what Stitch looks like, it pretty much looks like Figma. It's Google's version of Figma. Let's just call it what it is. So it's like this giant canvas tool where you can drag your own images in, you can do your own designs in your own design tool and then bring those designs in. But now you can actually just prompt your own designs into existence. This is obviously great for businesses, marketers, things like that. You know, coming from the digital marketing world, this is probably going to be the new way you build landing pages, right? We used to use the click funnels and the optimized presses and the lead pages of the world. And it's like all this stuff we used to do, we would spend a week on a landing page, right? And now it's like, I can have that same kind of thing done, but probably even a better, more modern design in like a minute. It's so wild. When we used to do split testing with click funnels and lead pages and all those kinds of tools, you built a new page basically from scratch every time. Now it's like I literally can speak with my voice and say, create me a split test version with a couple different headlines and it'll just be like, all right, here you go. This is the one that I made with a demo on my own YouTube channel, right? I basically initially prompted it design a website that helps curate and filter all the latest AI tools the same way FutureTools IO does. So I just gave it my future tools website. Essentially. You can see that it automatically pulled in. The website here says, I've analyzed future tools, created a synthetic dark design that actually figured out like the color schemes and the fonts and everything just by looking at the website. So it built like a whole style sheet essentially for the existing website with the colors and fonts and all the things, right? And then after it did that, it went, okay, here's your new site design. And this one's a fairly close replication of what my existing site looks like. It's not too far off. So it started by designing the exact kind of replica. And then I went and said, all right, generate three variations of the home slash discovery screen. And it created this bold, dark version, this warm, energetic version, and this cool professional version. But each one is like a completely different layout. Different color scheme, different design, and all really good, modern, professional looking designs. But like, if we want to continue to iterate off of this one, I can select this one and I can press this button here and just like talk to it. So let's say, hey, what are we designing on this home discovery cool professional screen today? Can you give me two more variations but change the hero image up on the top right on both of those variations on it. She's on it. Great. I've created two new variations with fresh hero images. Take a look. I can see down here that it's still generating them. So she got ahead of herself with saying that they're ready while they're still generating. But here we go. Now we can see him populating. Yeah. So they changed the hero image up on the top and left everything else the same. I mean, I actually think the original one looks better, but, you know, it gave me what I asked for. I can split test different headlines. Give me two more variations, but change the headline on the top. I'd like to split test between them. Working on it. Yeah. And we got two versions with two new variations of text at the top.
- [05:41]
A
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.
- [06:04]
B
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.
- [14:15]
A
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.