My Claude Code marketing stack (It just works)

0:00Amir is back on the pod. Thank you. By the end of this episode, what are people going to learn? Today we're going to cover three aspects of building business, using new tools to actually build out landing pages, and then using other tools like HumbleLytics to actually create high converting landing pages and running experiments. So we're going to cover how to actually use Idea Browser to build the right amount of context and planning to come up with an idea and build a landing page behind it, validate it, refine the design using paper design, and then going into HumbleX and then running an experiment and tracking data to then come back and keep optimizing for conversions.

0:36And you're going to commit to giving all the sauce. You're not holding back. raw we're gonna go gonna go through everything all the sauce by the end of this you're gonna learn what it takes to take an idea validate it refine it build a landing page with a nice design that's not vibe coded and then get the right data to make some money okay because there's a lot of tutorials that sort of promise that right then you end up with like a purple vibe coded landing page do i ever let you down no you don't i don't you know that's true there you go all right let's Let's get into it. All right, so.

1:14Idea Browser came out with something really cool I really like, which is basically you can now directly connect Idea Browser to Cloud Code as an MCP. What's really interesting about it is, you know, you guys used to focus a lot on finding the right idea and then building it. But what was missing was how do you track the natural progression of how the business is evolving over time with the right context and documents to then come back and reference to say, okay, cool, this is the idea I had. Here's how I started with ICP positioning. Now I wanna come back and refine this or help me figure out kind of what to pitch for or who to go after as my customers.

1:49So I was playing around with Jordan earlier today. We were on a live stream and we found this really cool idea, which was an AI sparring partner for B2B sales teams. The idea was how do we build a tool that kind of essentially helps reps practice on prospects real time and get them to essentially go through simulations of going through a sales call and getting feedback on what they can improve on. We put together a quick landing page. We made some designs and then got some data in there and started tracking it. So for today's episode, we're going to build on top of this. We're going to refine the messaging.

2:24We're going to go through some sections on the website, refine the copy and design, show you how to use paper for that, and then also So yeah, get some experiments and A-B testing in there. Cool. So what we have so far is we have this one specific file, which is like an offer definition and talk tracks. It tells you who your target customer is, the transformation, the offer, the value, competitive positioning. What's really cool is you guys also have skills in here, which you can use to then build on top of the idea. so I actually want to use the lead magnet legend here this specific skill to build a specific lead landing page site to kind of get someone to come and sign up and you know go through this process so we're going to open up terminal and we already have all the MCPs connected so if I go to MCP you can see I have idea browser I have paper all that we're going to go through it so I'm going to say connect to idea idea browser MCP look at my AI B2B sparring partner project hold the right context then use the lead magnet skill to create a by the way I just gotta say this because people are gonna hate on you for the comments in the comments you type your your prompts you don't use voice listen I love whisper flow but tell me how I'm gonna do this while I'm doing the pod.

3:48Okay. All right. Just, just, you gotta bear with me here. Okay. So when you're at home, are you using whisper flow or are you still typing? I am. So I'm using, I usually use whisper flow when I'm initially starting a project or some, some session and it's like a long, it depends on honestly on the context of how much information I'm going to put in the terminal. But yeah, no, I got whisper flow, you know, I'm, I'm, I'm up to date with tools. So what we're doing right now is we've pulled the right project context. And so like we have context right here that's built as a file and then um we're then we also have a growth strategy that we worked on earlier and then from there we're going to uh build out a lead magnet specifically for this idea so we have this ai b2b sparring partner um what's really cool is you got to have you guys have this like activity streak to keep building on kind of your business and that's like the biggest problem these days like everyone can build landing pages everyone has ideas is how do you actually know where to get customers?

4:44How do you actually grow it? That's the next gap that we're all trying to solve for right now. I think we've all tried the vibe coding tools. We've all built stuff. I do think that having the right idea is important. Finding the right niche is important. But the other thing is just how do you get customers to honestly just give you confidence to keep going. Exactly. Yeah, and we're going to eventually get there, and I think you guys do a really good job of this. I'm not promoting. I'm promoting Idea Browser, don't get me wrong, but I'm actually using this tool myself now because that was kind of the biggest gap I had myself.

5:23With HumbleLytics, it was like, okay, cool, I have all these great ideas, and I've been understanding who our customer is and trying to get customers through trial and error. And I was telling Jordan earlier, I was like, I wish I had Idea Browser sooner so that I can come back and use these specific skills to understand, okay, cool, what is the right growth strategy? Because a lot of what you guys have has been fully refined. And we were going through this earlier today and it was interviewing me and asking me questions. And I was like, this is so impressive. I wish I had HumbleLytics for this specifically so that I can come back and say, okay, cool.

5:54HumbleLytics used to go after director of marketing in this specific field with this kind of messaging. And yeah, so kudos to you guys for building a really cool product with this. And I think a lot of people now can actually use this to build the idea and then also help build the business as well. Um, so we, going back to cloud code, we were connected to MCP. We have built out the lead magnet, which is basically five objections that kill fright software deals. So we actually niched down. We built this AI B2B sparring partner in the fright software industry, and it's going to say, you're going to want to create a PDF guide.

6:27Um, give them all the, yep. So this is great. Okay, cool. So we, we have the idea of the lead magnet and it should now actually save the file in here. Let's go back. Boom. now we have the file. So it's really cool. Like you have context of the ideas it came with and it's added here. Now we're going to come back and use the scale. I got to come back here. We have the, where is this? The landing page architect. So using, and basically what we're going to do now is for the people that don't know, Paper is, it's a really cool tool where essentially it's connected. So I'm going to take a step back.

7:08Typically with Figma, you had designers creating static assets in Figma, landing page designs, and heading off to engineering teams, right? The missing gap was now we have a lot of people that are building landing pages and websites with cloud code directly in code and refining it through there and then losing track of like what they're iterating on and not having the ability to be able to kind of refine this. So with Paper, what you're able to do is actually have an interface connected to cloud code where you're ideating, creating iterations of iterations directly in the design and then coming up with what direction you want to go with and then having it in code.

7:43So it's kind of like the intermediary step that we were missing before where people were just directly building in code. And you can use Paper. Are there any other competitors that people use or just stick to Paper? I mean, so Figma just recently came out with their bidirectional ACP, MCP, ACP. I'm in your world, man. Totally. Yeah, MCP, where you can both design, like you can take a design and build it to code or code to design to go bidirectional, which this is essentially what paper already is. But I just feel like the tooling and the interface and the experience around paper is a lot nicer, in my opinion, and it just works a lot better.

8:22So we're now connected to, we've captured the lead magnet. We have the landing page scale architect being added as well with the offer that we want to have. And now we want to actually build out the page using paper. So while that's going through it, I want to talk about kind of how you can refine your designs as well. So oftentimes you see people with kind of these vibe coded designs and they're not entirely sure how to actually go with like the right direction of building out a design system. What I typically like to do is always give Claude a reference image of an existing design that I like.

8:58So for example, I'll go into an existing site or have some bookmarks of sites I like, and I'll take the screenshots and I'll drop it into Claude. And I'll say extrapolate the key design elements from these pages and help me create a design system. So what you're seeing right now, for example, is a design system that I've created using Claude based on reference images so that we can kind of reference back into for future sessions so if i want to come back and create a new section or a new component my landing page i can say reference design style guide as like the basis as you're creating new components so that you have that consistency um now i want to show an example like again a lot of people have this misconception that vibe coded design is bad this has all been fully vibe coded we built all these animations all these components using Cloud.

9:47And it doesn't seem that way. It seems very polished, very well refined. And the way to do that is you refine it through paper and then give example components and illustrations from other websites or libraries to build on top of. So for example, I use this tool quite a lot. It's called Tailark, Tailark Pro. And they have a lot of great existing blocks and illustrations that you can use. And you can actually install these and use it as a reference. So I'll go back into paper and I'll show you kind of how, oh, nice. Right now we're seeing cloud code design and build directly in paper on what this lead magnet looks like.

10:25That's really cool. Really, really cool. I love the little kind of section by section it's building out. So I think this is perfect. Actually, this is a great segue to that. So we're going to let it build out the landing page. then I'm going to show you how you can actually use tail arc as a reference point to then improve the design of this. So it goes from something like this to something a little bit more tailored like this, for example. By the way, there's an ant on the table just there. Do we let the ant watch your demonstration or do we sort of move him aside? What do you think? I think we'll just put him on the...

11:07I mean, where do we put him? I mean I have nothing against the end he's chilling he's getting the direct sauce we can give the end some sauce he's a napkin in case

11:23okay cool so we're building out the section which is pretty cool now like a lot of people say okay cool why don't I just build this directly in code why do I have to actually use paper the idea is that you can use paper to help build out different variations So if I want to try different layouts, I can just do it directly in here, make some refinements myself, especially for designers. I think this is super powerful for designers that want to just jump in and start changing things themselves without having to kind of use cloud code again or existing components they have. So we'll let this finish.

11:52Then I want to show you some examples of what I've also created in paper to show you what's possible if you keep refining it and go through it. Perfect. So we're all done here. Now, what does this look like in actual real practice if you spend time refining this? So this is all designed in paper. I've given the design style guide I have in HumbleLytics. I've said, here's the components you have and use these components to refine it. So I actually build out some of these sections in here and then port it over to code. Or I even use it to create static assets that I want to use in ads, in thumbnails, whatever it is.

12:26This is all purely like built using Claude. Now, how do you go back to actually refine the design here? So what I do typically is I'll go into Tailarc and find a section that I like. So we have this like content area section. I'll go into, let's go into content right here. Okay, cool. I like this right here. Or maybe, yeah, we'll use this one. Cool. So I'll go back in the terminal and I'll say install this Tailarc component and use it for the content section in the lead magnet. First design it in paper. And then we just need to pull the API key for Tailarc. Cool. I've actually never heard of Tailarc.

13:16Really? Yeah. It's just another UI library. I mean, I'm not sure who's behind it. I think it's like an indie founder or something like that. It looks clean. Yeah, super clean. It's the way to go. So, you know, kudos or shout out to whoever built this. I think it's an indie person, whoever it is. You've done a great job. Keep doing it. Yeah, I'm a fan. I'm a big fan. They got taste, that's for sure. So what we're doing right now, we're just installing TailArk so that we can install the right components here. And yeah, what's special about this is that you can take those components that I showed you earlier.

13:51So for example, we're going to do the content one, this one specifically, and I can just drop it in as well, a screenshot to say like install this, use this component, and then I'll go back into paper and say use it for this section here. What's also interesting is showing Tailarc, showing Idea Browser, the MCP, it's sort of a glimpse into the future of software. In the past we would go and just use SaaS. Now it's like the work is getting done in the terminal. Nailed it. Again, it's becoming the interface for work for everything. If you remember our first episode, I was like, cursor. You were right.

14:32So you said, I think your exact words were something like. Like, yeah, I think the mistake I made was I said cursor. That's what you said. Yeah, cursor is the interface of work, or it's the future of the interface of work. I would say now terminal. The terminal is the interface of work. We were early. We were early. We were early. We were early. We were like, markdowns are going to become a thing. You're going to do all your work in cursor, all of it in terminal. People thought we were crazy. Yeah, like here we are today, man. And we're showing you this and someone probably listening to this is probably like, you guys are crazy.

15:08A hundred percent. You know, another thing, for example, was like you're now seeing people building out markdown pages on the websites to make it easier for agents to access. Right. You look at what's happening now. People are giving agents wallets. What's going on here? They're giving you wallets. They're giving them emails, inboxes, stuff like that. So it's insane to see the evolution of that. And we're seeing, actually, tangent, I have a thesis. The thesis is that more agents are going to actually visit websites than humans. I mean, I'm 100 % certain of that. I saw that Gartner had a research report that said 20 % of commerce on the internet by 2030 will be agents, meaning agents are buying things.

16:10Basically, where it's going is agents doing more and more things. So obviously, yeah, there's going to be way more agents than humans. Therefore, there's going to be way more consumption of agents of products. Yeah. And it's like the multiplier effect too, right? Because you have people running multiple open clause or multiple agents on behalf of one person. And who was it? There was a report saying, I don't know if they were serious, but they're saying, yeah, we should put a tax on agents. Right. Because it's like, yeah, it's making us more productive. There was a whole thing. Think about human beings, right?

16:47If you're running a company and you want to hire someone, you have to pay payroll tax on that person. Of course, governments are going to be like, well, it's kind of like you're hiring a person. Therefore, there should be some taxes that agents have to pay. There's an arbitrage opportunity right there. You as a single human now have an army of agents working for you on your behalf. There are multiplier effect of what your income is or whatever it is that you're doing. more productive yeah where's like you know you're making more money yeah i wouldn't be surprised at some point we have some agent tax it's like on your taxes like list out the agents you have but um but anyways uh back to kind of talking about the future of web yeah like we're also seeing right now um more websites being built to be agent friendly right fire crawl came fire call So CloudFrid came out with their endpoint to be able to crawl websites, to give access to agents, to be able to get the data they need.

17:47And we actually had our website built in Webflow, then we migrated to Framer, and then we fully built it in custom code. Why? Because we wanted to be able to use the agent as our CMS. So use Cloud Code to directly update our CMS and the ability to give access to other tools to quickly ship changes, run tests, give access to our agents and MCPs, which is you can now kind of do with Web Phone Framer, but it's not as open as you want it to be essentially. Makes sense. Yeah, that's kind of the thought process behind it. Let's go back. Okay, nice. So yeah, we're getting a much nicer, refined design here.

18:25And then if we wanted to, we can go back and maybe find more components to drop. So let's look at maybe... So one of the things I really liked about your website, the HumbleLytics website, is the animations were really good. how do you think about if we wanted to update the designs here to be a little more animated how would we do that? so right now we're doing it right now so I basically went into here so this one has a very subtle animation I copied this component and I dropped it back into terminal in Cloud Code I said hey add this section and then add a subtle animation and the goal I always say you don't want to over animate things it's interesting to see how agents respond to constraints and guardrails, especially around like, hey, make subtle changes, subtle animation, subtle design refinements.

19:17I'm actually very intentional with that word when I use it with agents, because like if you say improve the design, it's so broad and generic. Whereas you say, hey, work on refining the design, make sure you have consistent layouts and themes and keep it subtle enough to make sure there's like cohesiveness across the entire page. I find that prompt works a lot better than just saying improve the design. Keep it subtle, stupid. Yeah, keep it subtle. Exactly, exactly. There you go. So, you know, while that's happening, I'll say, when you're done, make the changes in the code and push it and tell me the URL route for it and add a section on the homepage to the magnet.

20:00Cool. We already have the site right now

20:05and we're going to now add that lead magnet section. So we were actually earlier today with Jordan and I in the live stream, we were building out the home section, the hero section, and we started working on the steps below it. But now what we're going to do is build a lead magnet page using what we just covered in paper and the designs. And then, yeah, we're going to push it live to the website and then get some analytics in there and run some experiments to see what drives more conversions. Cool. Yeah, and then for the audience, keep in mind, like we're doing this really really quickly we're speed running through this you know um obviously like if you look at this design it's a lot more refined than what it would be typically i would spend a couple hours going through this going through specifically like different illustrations or blocks or sections i just want to cover like the key principles of how i approach it and then you can come back and like use these different components to refine each individual section any questions thoughts yeah i think uh i was just just thinking about this like We all have these expectations that you're going to one prompt something, two prompt something, three prompt.

21:07So I'm happy you said that it's probably going to take a couple hours if you really do want to get it dialed. So I don't want people to go through this whole process and be like, well, when Amir did it, it looks so much better. Well, Amir, first of all, you had the library, so that was helping. But also, it takes time, right? It takes a lot of time. I mean, it doesn't take a lot of time if you think about it. It just takes, like, if Amir from 2017 saw this and heard that you said it took a lot of time, you'd be like, what is Amir on? No, yeah, no. But it takes some amount of time. It takes time, taste, and skill to know what you got to do and how to do it, right?

21:56It's like we've made it so easy to achieve the tasks. how do you give the agents the right direction and approach to say here's how you need to do it the taste taste is what we know we've been talking about a lot yeah and and direction right like this particular component needs subtle animation yeah here's a reference of that exactly exactly like i built this component from scratch not from scratch off an existing component that was i think let's actually find it so you found a component here exactly so i found a component here we're going to find it because I know I'll tell you where it is so this is for example right here so we had this component and this is it right here I ported this one over but I said add a solid animation to switch through it for example or this analytics query right here so this one is this one right now that specific component I think it was it was one of these one of these cards essentially and yeah I took it and I said hey based on this component oh right here this one it was this one and I turned it into this which is I think it looks great so cool so we've built out the design of the guide page in here and now we're going to see if it's live on the website so let's push this and then we're going to go to guide boom so now we have it we have the sections here okay so now let's get some analytics in here to see how many people actually could sign up for this lead magnet so i just want to say one thing this lead magnet looks gorgeous like think about this lead magnet looks better than 99.99999 percent of lead mags that exist right so people listening to this like this is uh think think about you know don't just create one lead magnet right like every few weeks create new league magnets optimize your lead magnets and you're going to be able to outperform because you're going to know how to do and create gorgeous looking lead magnets exactly and we did we did this in like 30 minutes again like you get the right components the right direction you can do some research on the best ones pour them over as reference styles and then make that refinement so right now while you're going through it i found this kind of decent component i was like why don't we just try this design instead and add it so let's see what happens.

24:21Okay, cool. It's going to adopt it and it's going to have that split layout. All right. So we've got this lead magnet. We'll wait while it's refining the design. We're going to come back and essentially get some analytics installed and look at some click tracking, form submissions, and run some experiments to see if I were to change this headline, for example, what would this look like? And what would increase more form submissions for our leads? And we use this approach at HumbleLytics. We just started actually where we built like an autonomous cro agents where we have direct skills and mcps connected to a cloud so we directly connect to our track our analytics and experimentation tool our marketing site which is why we port it over to custom code we wouldn't have been able to do this through upflow and then we have google ads the idea is how can we spin up multiple sub pages that are personalized campaigns like personalized campaign landing pages based on the campaigns we have so like if i'm running a a pain point campaign on Google ads and have five ad sets, I want each one to have its own personalized landing page.

25:25And I want to A-B test each individual landing page to see what headline resonates the most or what layout, for example. You're able to do this with the custom code site really quickly with Cloud Code. With Framer or Webflow, you have to create the pages, create the sections, come back and update it. You know what I mean? So that's kind of the whole thesis we were talking about earlier where it's like the feature of websites is custom code and the agent is the CMS. And then you have it running and you can even set up like, so what we do is we have like a cron job now directly in cloud code because they support automated tasks to say every week go into like run this specific task.

25:59So what we have is Google ads directly connected to cloud through the API. We have three cloud skills, a paid media manager that pulls data from meta and Google. We have a CR optimizer that runs A-B tests. And then we have a final report that just gives us a report of like, here's how many users you had signed up. It connects to Stripe, ChartMogul, all the different tools that we have. And then we have HumbleLitics that essentially hits our endpoint to give you recommendations, actually uses Firecrawl to script the pages, and then helps you kind of say, okay, here's what you need to optimize for.

26:29Helps you run the experiment all through Cloud, and then it manages the results for you. I mean, that is just so cool that we live in a world where you can do that. I know. Yeah, yeah, yeah. And the best part is you can actually use this with Idea Browser to pull all that context and save it as a file back into Idea Browser. Jordan and I were talking about this and we were like, yo, we can do this now. Imagine you do a weekly report, you pull all the data, you add it into Idea Browser and now Idea Browser has context of how growth has been over time. Which is sort of the unlock, right? Yeah. If you have that, you're just going to get better results, you're going to compound and that's how you can compete in right yeah exactly um so we just added the component to the we installed this new component but i realized the mistake we made was we got rid of the form so we're adding it back in but yeah like the to your point uh we actually before this we were tracking all the context directly in obsidian as well so we have a master like performance log yeah it says like here's how this a b tested here's how much money you made here's what you need to improve on and we just come back to this context.

27:42So we have this all set up now. We have this landing page and let's go back to the homepage and maybe run an AB experiment on this homepage to see if we can increase click-through rates. So what I'll do is I'll spin up cloud again, and then we're going to go into, so with HumbleLytics, you can just go directly to the API, create an API key, get your property details and instructions to hit the cloud. But what, you know, you get the basic analytics you typically see where people are visiting from traffic you know the channels everything you want if you're looking to like run paid ad campaigns you get full attribution directly in here so you can see exactly what channels are making you money you can have heat maps to see scroll depth what people are clicking on the fold experience you can even create funnels so for example if you want to go like you know from page to guide you can even run it it'll show you what people went through his steps and then you can run a b experiments so we have zero right now we're going to use clod to actually run an experiment so we're just going to copy this just going to no we're going to have a we have a dedicated skill for this but i thought just to show people the steps so using this approach creates an AB experiment, no code type for the headline.

29:02So just what the headline. So you have a scale for this? We do. Yeah. Yeah. I'll share the link afterwards that people can use where essentially we'll help you get set up with like Combolytics, run experiments, get recommendations. But we have endpoints right now that you can hit to say, okay, like tell your agent or cloud code, hit the specific endpoint, the recommendations endpoint, and it'll actually scrape your site, pull traffic insights, pull all the existing data you have in Humboldtics and even Idea Browser and then give you a very detailed report on here's what you should focus on for your landing page or what you should test.

29:36Nice. So it's pulling insights based on analytics. We have a 40 % average scroll, 25 % bounce rate. Here's the page content. Here's what your control should be. And then here's what should be the variant. Okay, cool. We should now go back into experiments we now have an A-B test running directly through here which is crazy. It's actually insane. And we did this without even deploying a change because our script dynamically updates the content on the site without you having to go to your developers and say, hey, can you create this new page or push it for us? So this is what we had. If I refresh this, maybe a couple times because it's distributing traffic, let's see.