Transcript for:
Creating an Effective AI-Powered Landing Page

on today's show we are taking on one of our most ambitious projects ever we want to show you how to build the world's best landing page for your product or service using AI and how you can do that in literally one hour we're going to break down the prompts the steps the tools everything you need to go and build the best landing page you've ever built let's get to today's show [Music] on this show we are going to show you how to build the world's best landing page with a couple of secret tips that we are going to give away and so the first one we are going to show you is anytime you want to build something you should create extensive style guides or templates using deep research not many people know how to do this or not many people are actually doing it and so the reason you do that is deep research can create really extensive style guides and guiding principles on how to do things and so the way I would think about that is it's really like an entire book created just for the thing you want to build we'll likely maybe give this prompt away for you all because you're loyal listeners no one else can get it but this is like the deep research prompt so I'll I'll give away this I'll give away this sorry about that i'll give away this detail it's like pretty great way to construct a deep research prompt and like the the secret sauce here is anytime you get a working prompt create a GPT assistant and then anytime you want that prompt again you just say to the assistant hey I want to do this thing can you create a prompt so anytime I want a deep research prompt it will recreate this template that works really well so it has Kieran hold on hold on i think the GPT assistant thing you just like lost some people we should do a full follow-on show on how to create a GPT assistant for your best prompts okay so if you want that show leave a comment down and hit subscribe and we will we'll give you that show soon but for for right now you have found a really great landing page so I'll give quickly give the synopsis here of what the what's in this deep research prompt it's the context so context really matters right you want to set the context of what the task is you can see here that it's all around being a senior UX strategist and we're going to someone who's very knowledgeable at landing pages you want to be very clear about the objectives and so you can see here being very clear about what I want it to produce because we're trying to build the world's best landing page not just any old landing page we have deliverable requirements here we have uh the structure that I want it to return so you can see here I have an executive summary i have core principles i have copyrighting frameworks visual hierarchy mobile first and responsive best practices like tons of really interesting stuff then I actually have the wireframe template it's going to suggest like how it's going to break out that wireframe and a bunch of other things and so it's very very detailed and then this is what I get back and so this is basically a structured template of best practice and guiding principles of how to convert a high converting SAS landing page i have some people that I think are really good at doing this that I have mentioned in the deep research pond like Olga and thing and people like that to actually direct it to like learn from people that I wanted to learn from but like this is 30 pages long right it's a novel it's a whole book written just for me on how to create incredible landing pages and I think what most people are doing is they're just going in and say "Hey Chat GPT I'm a SAS brand that works in the event space and I want a cool landing page that will drive conversions and your results are inferior to my results because I am giving it a 33page template to work from to construct my landing pages and that's why our results are so much different you can create personalized informationational books just for yourself and based upon like what are the exact things you want to have in there and so what you're really doing is teaching the AI assistant to work in the way you work like our flow here so people can stay tuned is we're going to use deep research to create an extensive template we're going to use Gemini 2.5 Pro which is an incredible model to take that and build the outline of a landing page with all of copy and then we're going to use one of our favorite tools Lovable to actually show you how we can create that landing page and then we're going to do some secret sauce at the end you have to stay tuned to the end because then we are going to apply visual styling in a way that no one else is really doing it and so this is the first part and I'm going to send my little uh novel over to Kip who's actually going to pass this to Gemini and start to build the landing page okay so we have what I think is the most comprehensive rundown of what makes landing pages awesome based on specifically like we're thinking for like SAS technology companies but you could do this for any market any industry any any global region right you would just tweak the kind of deep research that you just outlined for everybody right everyone's going "Yeah but how do I do that what's the deep deep research prompt?" Uh again because you're listeners we're going to give you the prompt it's going to be in the comment section or in the description section you ready for this let's do it so we just released a great show talking about Gemini 2.5 Pro which is the model we're using today i broke down how 2.5 Pro I think builds the best marketing strategies of any models today and I did a deep research project and I showed you how to build that strategy in Gemini Pro and so if you have not watched that yet go watch that because that is going to help you understand what I'm doing right here if you're following along and you love what we're doing you want to do it yourself we at HubSpot have put all of these prompts and directions in one guide for you you can leverage your favorite AI tool whether it's Claude Gemini or Chat GBT to build stunning results driven landing pages at lightning speed if you're ready to transform your landing page conversion rate then you can get it right now scan the code or check it out in the link in the description below i took this strategy I took the deep research I did to build a strategy in Gemini and it's this massive deep research all about HubSpot's customer agent product which is our AI agent that helps you address customer support and customer inquiries basically and so I wanted to say like hey help me build a great strategy and Kieran it gave me a really amazing strategy because Gemini 2.5 Pro is a really good strategist And it builds an entire marketing campaign for me it tells me my target audience the key characteristics of those of that target audience who the key decision makers are the value proposition what the core pillars of of my messaging should be this is like I did not give it any proprietary information you could literally do this for any product on the internet right which is pretty wild and it tells me what channels to do and what channels to build out right and gives me success metrics it's really really good and then basically what I said is like great you can then go into Gemini and have any of those elements whether it be social posts email whatever you can have it go and build a detailed version of that so I just took the deep research that you sent over to me right which is the best practice on landing pages and I said "Hey can you use this research for the strategy you just outlined to build the best possible landing page for HubSpot's customer agent?" And so it basically what happened is it leveraged that all of the best practices that we outlined to build a really really qualified landing page to generate qualified leads what is the output here or is it text or a natural wireframe this is this is all going to be a text output that we're then if you look here there are core principles that it applied based on the deep research and then it gives us basically it tells us design for a clean clean single column flow prioritizing mobile readability right so it's essentially a textbased wireframe right because it's right now 2.0 I know 2.5 Pro is really good at reasoning but it's not great at like doing taking that reasoning and applying it to you know mockups or imagery it's not biodal yet right where we could probably also drop this into chat GPT 4.0 which I'll try in a minute while you're doing lovable and see what we get but basically gives this entire here's what the hero section should be here's how we describe here's the visual here's the primary call to action it's very very detailed right like this is like incredibly detailed like this is a master class in why it's got a whole differentiation section what the FAQs may be final call to action footer and then it even gives you implementation notes Kieran around AB testing page speed the what the demo how the demo request form should actually work pretty wild like the quality of this is like very very good right yeah gemini 2.4 everything everything you've showed me and I've used that model a little less cuz I've been so addicted to the image creation tool i have like not had time I had not time to do anything else other than like build funny images uh I need to we I have been me and my bro have been using this tool in uh cursor and it seems pretty incredible for coding but I haven't been prompting a lot with it but you show me a couple of prompts uh and it seems like pretty comprehensive for any kind of marketing strategic needs uh and this is like a pretty good example of going from a deep research project that took us took me about 15 minutes to put together which is like a best practice includes all the things we're trying to build on the landing page and then riffing with Gemini Product 2.5 to build a comprehensive landing page based upon the strategy you have and the guiding principles we have in that deep research project and then I think we're I think you're going to send that across to me and I'm going to see if lovable yeah I think out of that for lovable so check that by making landing pages here kieran while you're while you're past pacing this I would say we're probably 30 to 40 minutes of of actual work time up to this point between search and going back and forth with Gemini like I we're basically showing you how to build the world's best landing page in like under an hour under an hour which it's pretty insane like again the amount of time and effort you used to have to do for this stuff it's just like incredible how you can do it we're not going to just show you how you can build a land page we're going to actually show you how to do that and apply different visual stylings okay it's excited to do this its color style so it's going to apply its own styling and then I'm going to try to work with it to style it uh in some different ways so we can have some different looks well first of all Kieran I was going to show you because you're just going to think this is funny i was take while you were building the page in lovable I was um I I was going to go put it in chat GPT to see what chat GP would give us for an image right and I started with our corporate chat GPT at HubSpot and I forgot that 40 image isn't on enterprise accounts yet and so use this bad boy it's so bad so bad I've created an app that will be released as soon as I have the API for our listeners and other uh folks in my social channels which basically uh does a bunch of the things I do around styling and autocreates images for people autocreates ads for people let's see who mocks it up better so I gave chat GPT40 with image generation the same thing you gave to lovable Kieran and it gave me I think a fine okay landing page version it's still struggling it needs more GPUs and another round of cycling to handle all the text it got like a product image right though like I didn't give it any of the styling and everything it did better than I thought it was going to be the one to do actually is um go get in go to Claude and ask Claw 3.7 to build the landing page oh here we go i can do that right now while you're looking at lovable so this is what it's done and it's and the coffee is uh a problem the coffee is not very good but I actually think I can fix this pretty well so here's what we're going to do let me see we're gonna apply a copy style guide david Olivy okay here we go i'm doing the Claude i'm seeing what Claude is going to give us we'll end up having like three different options to be This is real vibe because we're going to flick between so many different things here so let's see how this works so this is peak vibe marketing right now we're going to go back to GPT we're going to take the original Gemini 2.5 Pro output we're going to say the following we're basically like doing a Twitch stream for Vive Marketing right now it's very weird very weird i can't see myself in this part of the world i know we should move to Twitch there you go that could be the next thing the following landing page structure can you drastically improve the copy using the attached copywriting principles more concise punchy and and and valuedriven the fact that we are able to do this is mind-blow mind-blowing like if you had told us a year ago hey you're going to be able to not just like build an a landing page that in real time but an an amazing landing page have AI write the code for you like it's like it's it's bonkers what's basically we're doing this without a single tool you know what I mean i got to tell you I I like I like my Claude example claude Claude Claude is giving me a good mockup of practices let's let's flip back to you and then we'll apply this and then I'll get lovable to do his different decoration okay here you go i want to see your take on So I gave the Claude the same info as we gave Lovable and I literally just said "Can you build this landing page?" You ready i like the stop drowning in sport tickets start scaling with trusted AI assistance seamlessly in HubSpot it's like the copy is pretty good like I would obviously do with some rewrites on it but it's not bad for a rough draft it didn't get I mean obviously has holders for product images but it put the demo buttons in has a support team section and then it has a really good like feature call out section one of the great things is that you can have support 247 it's really quick to set up it's got awesome citations it hits the the proof points well it's trusted by leading teams and put a placeholder for our logos there it has a testimonial in here it pulled a G2 ratings and that that it's sock 2 compliant that's pretty dope this is great man that's pretty great i think there's like uh let's see that is like that's unbelievable let's like as a oneot still is is incredibly impressive we're going back to we're going back to do something lovable here with a revised copy structure okay this is actually pretty good let me just I'll share my screen but yeah I want to see I want to see this in action my friend so it's it's started to fix the copy so you already trust Hubort S now supercharge with breeze an AI support agent that resolves up to 60% of routine inquires on its own so your team stays fresh for the tough stuff pretty good it's got some value props round the clock responses no more after hours backlog breeze answers questions instantly uh cited accurate answers pull from your approved knowledge base no wild guesses just trustworthy info these are really good build for husband no coded no separate tools just a seamless add-on it's got the video placeholder or request your personalized demo it's too many support tickets to get too little time your team it's got so you see do you see do you see what it's done to the copy this was a couple of paragraphs because I've applied a copy style it's tightening everything up and the the language it's used q never ends cost keeps rising and your best agents handling routine requires that flood it's a recipe for missing SLAs's overwhelmed staff and unhappy customers let's go how breeze look at this section how breeze transforms your support look at this 24/7 automation let's just hit publish right now oh my god this is so good i mean maybe too good trusted by lead B2B teams it's got the social proof here it's got some good social proof it's pulling in the same things here not just another chat but a fully integrated AI for serious support go it's got all the integration stuff easy use and it's got the ready to slash response times reduce support costs and delight your customers straight from HubSpot wow there you go and I want to buy our customer agent now after this landing page right i think this is so good like it shows you just a small bit of iteration so let's do one last little bit of like funny hold on i got one if you un unshare for a second I have a new claw version you I went and took the deep research that you did right on that we started the show with on landing page best practices and I literally just said hey Claude why don't you give me another version but like here's all of the deep research because before it had just gotten kind of an a landing page outline that was informed by it and based on these best practices give me a new page and so stop drowning in support tickets deliver 24-hour AI assistance right in HubSpot is is Good copy resolve 60% of inquiries instantly really good build trust with cited answers active in minutes not months active in minutes not months is a great line of what sorry what did you did you How did you ask it to improve the copy you look you see right here I took your PDF and said "Do a new version using the best practices attached." That's all I did isn't that wild well again like I I the thing people that no one else is teaching people is just the the if you can build context and research man and style guides are everything i mean look at this i would actually publish maybe with some design changes obviously but the copy is good and the design's not bad and then it got like this is really good Karen after hours gap customers need answers outside business hours but staffing 24/7 support is prohibitively expensive so it's like really hitting on the pain of why you need this thing right top talent gets frustrated handling routine inquiries instead of using their expertise on challenging cases we know that's true we've talked to our support team we know that's true it's way better copy five minute setup 20 it's like literally just a compare contrast here's all the problems you have here's how it addresses those and then it's got the customer hero section and and everything if you took the landing page you built and this landing page and put them together we would have literally the best landing page on this product that could exist i want to show you this so you want just quick show you this yeah go ahead and show this and then I'll show you i'll wrap up with the thing you wanted me to show we just showed that we we had done some pretty dope landing pages in Claude and uh Lovable right the other thing you can do that most people don't realize you can do is for any brand you can run a deep research project to get all of the styles so I had chat GPT basically do a deep research project to build a HubSpot creative style guide and it outlines how we use our logo it gives you the exact color palettes how we use imagery and iconography right right like this is a very very in-depth and you can do this for any brand if there's a brand you just like I really like this brand and I want to have a style like them you can build anything in any style and you don't need anything other than a deep research project to do that right which is pretty wild and so what I what I'll do real quick to see what it does is I will take all of this and then I will go boom i'll copy it i'll put it over into Claude i'll come down here and say using the following style info update the page and it's going to take all of the style info that like again could be any company because I didn't use any proprietary information from HubSpot i went and did a deep research project to go and collect all this and now it's going to code a new page and in a second I'm going to show you what that new page looks like i think that is probably going to do a better I wonder why so the thing I've So you're actually doing the visual this is an example of visual style and my visual stylings are different in that they are like styled on well-known brands well-known influence that's sorry I create my styles is like I aggregate together stylists based upon creators influencers brands and what I how creative are your styles versus like strategy based styles they're they're incredible they're like if I use them for ads they work incredibly well like unbelievably well so so Kieran why don't you walk through for everybody the steps we went through to build the world's best landing page in literally under an hour from nothing to code that you could then like deploy bug check you know you probably need a developer to do a few edits to it but it's like pretty close right like why don't you break that down we build land we built a detailed uh template for the best high converting B2B SAS page landing pages so we did that using a deep research prob that we went through kind of showed you some of that structure then that built a 33page template on how to structure and build high converted B2B landing pages we give that to Gemini 2.5 Pro gemini 2.55 Pro built a structure for a HubSpot landing page based upon the strategy that Kip had for that landing page so it's based on a product that we have so Gemini 2.4 2.5 Pro did the overall structure all of the copy we give that to Lovable we built the first version in Lovable and we realized wow the copy is a little bit too wordy so we applied another template which is a copywriting template which is created in a very similar way as we created the landing page template it's basically me doing some deep research on some of the best learnings from copywriters across the like the some of the best uh most famous copywriters of all time we distill all their learnings we create again a 30-page template and we applied that and we did a second version and that second version was done both in lovable and clawed and I would say claude was good lovable actually was much better at the second version and we actually had a page we would ship like maybe a couple of tweaks here or there but pretty much a great page we would ship then we decided to play around with visual styling and so I took a visual styling based upon well-known brands well-known influencers applied that in lovable it actually wasn't it didn't work the way I thought it would work it works really well for ads didn't work as great for landing pages but you are actually doing a version of that where you built a visual style palette like a brand palette again based upon a deep research prompt i can't keep saying that enough and you are rebuilding this site to adapt to that kind of brand color palette hey it's more compliant with HubSpot it made some of the copy worse Kieran like this headline is way worse than the previous headline but like it got the oranges right it got the it has our kind of background colors that we use and everything right so like the design is much better we would have to we have to say keep Yeah so it's how you merge design and copyrighted together exactly that's the big thing exactly these different templates which we can do some shows on that in the future too because that'll be an important topic but wow what's clear to me is that you can make the world's best landing page with AI in an hour and this before would have taken days or weeks right multiple resources and actual design and landing page tools just just just really really be like just to really emphasize that point we didn't use a single traditional design or landing page tool to do anything no we basically we would have to take this code and put it in a tool like HubSpot or or something similar to go and host that landing page but we got to all those steps before that right and it was pretty remarkable that we were able to do that and do it so quickly so this was a show uh that where we walked through everything we gave you a ton of secret sauce and you know now how to use AI to go build the best landing page for your product in less than an hour we'll see you real soon on the next episode of Marketing Against the Grain this data is wrong every freaking time have you heard of HubSpot hubspot is a CRM platform where everything is fully integrated whoa i can see the client's whole history calls support tickets emails and here's a task from 3 days ago I totally missed hubspot grow better