Micah Johnson 0:00

Welcome to the Biggest Goal podcast. I'm your co-host, Micah Johnson.

Alane Boyd 0:03

And I'm Alane Boyd. And today Micah and I are going to continue our conversation around the landing pages and how we're using Claude Design to launch them in just a matter of a few minutes, sometimes so quickly. And so we're going to deep dive into what this looks like and how we're doing it.

Micah Johnson 0:21

So I definitely want to talk about in this episode, Alane, like our tech stack and the process. And we're going to give away the farm here, tell everybody exactly how we do it so that they can go and copy us.

Alane Boyd 0:32

Michael, when I think about the amount of time that we have spent in the past to try to launch a landing page and how frustrated we would get with ourselves. And I mean, most of the time we never even went to launch.

Micah Johnson 0:47

No, I don't even want to think about it to be to be honest with you. Like it was among the most frustrating times in business. I think maybe not I've ever had, but it's up there, right? You you're trying to have this vision in your head, and you know you want to produce something, kick ass, and you know you want it to be a great experience for the people that you're driving to the page. You want them to experience your brand in this super cool way, and then you spend four weeks working on it, and it's just they just poo-poo on your parade.

Alane Boyd 1:23

Yeah, exactly. I mean, we and for our listeners, like we didn't always just try to do it on our own. We would try working with uh consultants that could create it or freelancers or an agency. We've tried everything, and it really comes down to can you articulate what you want and the amount of back and forth we had to get to one landing page. And I remember, you know, even this summer when we were starting to go down this path, like we've really got to start marketing ourselves. And, you know, my guy, I immediately get overwhelmed. So you're telling me like we're gonna be doing landing pages, we're gonna start sending ads, and I am freaking out, and I'm like starting to shut down because I think I know you freak out at this moment at those moments, Alane, when you just look at me and you're like, but how are we gonna fit that in?

Micah Johnson 2:12

Yeah, we're that's all right, but then we go and figure it out, right? Because we get to use all this cool technology that allows us to do this stuff, like you said, in minutes or an hour. Um, once you have this all dialed in, what we're talking about today, it is crazy.

Alane Boyd 2:30

It really is. And you know, with a few minutes of you showing me what we could do and how good it was, then I'm like, okay, I'm not so overwhelmed because I can see how this can fit in. It's not gonna be a three-month, six-month project of us just bouncing ourselves off the wall. Like we actually can get to a place where we can launch something fast.

Micah Johnson 2:52

I want to talk about effort because I think this is such a huge piece to it. You can just go to Claude and you can just put in a prompt and you can get a landing page. You can you can get a design back, but is it gonna be good? Is it gonna look like AI made it? The answers are no, it's not gonna be good. Yes, it's gonna look like AI made it. But if you don't think about just the fact that like I should like, I guess it's expectations and effort, right? If your expectations with AI and the work that you're doing with AI is I should only give it one prompt and everything should happen magically for me, then you have the wrong expectations. I don't know who needs to hear that right now, but hopefully somebody is like, oh shit, that's me. And you gotta have your expectation set that I'm still gonna put effort into it. And the effort scale, you know, it's like when we talk about that 80, 20 side of things. It used to be so much effort on the 80% that didn't matter, just trying to convey our ideas took the 80%. The 20% is where the movement happens, but you still have to put effort into that 20%. So it's like everything shifted. I guess what I'm trying to say is like everything shifted. There's still effort, you still have to have the expectation that you're gonna put effort, but you put effort into the 20%, not the 80% of nonsense.

Alane Boyd 4:22

I think this really goes down to AI is a tool that we can use to support us to get things done. And we are the expert or strategist or something like that, and we're working with AI to do those tedious pieces. And I think for a real designer like Micah, what you create versus what I create, you you always create a better result than me in that in this case because you have a design background. I don't. I am a if you just gave me a plain PowerPoint and you told me to design something, man, it is going to look pretty awful.

Micah Johnson 4:55

If you like listening to this podcast, we spend a lot of time putting this together. We'd love your support by going out and giving us a review. It helps the algorithm understand that people actually like what we're saying, and it helps us understand that you like what we're saying.

Alane Boyd 5:09

But whenever I use when I use the tools, it does come out pretty good. We have a design system that I can utilize. We I can articulate at least what's in my head and what I want. But when I see somebody like you using it, I do see an improvement. And I see that with teams that are using it as well, that create websites is hey, they're they're really good at this stuff, and now they have a tool to get their ideas done faster.

Micah Johnson 5:34

Yeah, and even the experts and the designers are not just doing it with one prompt. You still have to work with the tool to produce the output that you're looking for. That is like, I don't know, the big first takeaway that I that I would really like to get across. I'm not going to beat the dead horse anymore. Let's talk about the giant tech stack it takes to run something like this. How do we build landing pages, Alane? What do we need to actually do this?

Alane Boyd 6:01

Well, I don't know that this one's a big secret if you've been listening to our podcast, but using Claude and really the Claude Suite. So I've started calling it Micah the Claude Suite because we've got co-work. I mean, there's chat, so I guess chat, co-work, design, and code all part of it. So we're using pieces of Claude in this to help design it and ship it onto the website that we use.

Micah Johnson 6:27

Yeah. And I mean, nobody knows where Anthropic is going with their naming conventions right now because Claude and co-work, Claude Chat and Claude Co-Work are now just Claude, but then there still is Claude Code, but then Claude Design is going into cowork, but cowork's going into chat. So what do we is it just Claude? I don't know, it's making it more confusing. For right now, that's sweet.

Alane Boyd 6:52

And then you need to have a website host. And in our example and what we use, we're using Webflow. And we use we switched to Webflow years ago before any of this, and really because it was one of the leaders in the technology. We were using a different provider and really just so frustrated. And so you you had come and said, hey, let's switch this over to Webflow, and here's why. And I was like, yeah, this totally makes sense. And thank goodness we did. Cause now, even just having this as in Webflow, we have an MCP server to work with that has an API, and we're able to push stuff from Claude into Webflow so easily.

Micah Johnson 7:34

Yeah. One of the best moves I think we made, the when we talk about saving time and becoming more efficient as a business, we often think about what do we need to create as workflows and processes. We don't always, and maybe this would be a really interesting uh episode for us to think about, Alane, is all the decisions that we made to eliminate complexity from our work days. Like we went from WordPress to Webflow. WordPress was such a headache. We had the plugins, the hacking, the security issues, the slow, ugly ass interface. And then we went to, you can tell I'm not a big fan, then we went to Webflow. And Webflow is constantly iterating, constantly improving. No plugins, no headaches, no updates that we have to worry about. It's all handled on their side. And as AI came out, well, they introduced the API, they introduced the design bridge, they introduced the MCP server, they introduced the command line interface, and suddenly we've got this powerhouse of a tool set. But all that aside, that's the entire tech stack, the cloud suite and a host that has an MCP server that allows you to write stuff to create stuff on the host itself. That's the entire recipe or ingredient list of the recipe that you need.

Alane Boyd 8:57

And if you're not using Webflow and you're using something else, you know, do a quick search, see if it has an MCP server or see if it has a native connector in Claude. Maybe one of the other providers that you're using does.

Micah Johnson 9:13

Directly, yeah.

Alane Boyd 9:14

Yeah.

Micah Johnson 9:16

All right. So we've got our entire tech stack. We've got ClaudeSuite and a host with an MCP server. Our process is not that complicated either. So the recipe for making a landing page, we've got our ingredients. It's not that hard. We've got to start with the design system. So you mentioned that earlier, Alane. Maybe just for a couple of seconds, just describe what a design system is.

Alane Boyd 9:44

Yeah, and we talked about this on our previous episode about how we use cloud design to create our presentations. Now, the good thing is that once you create a design system, it is created. So whether you're creating it for presentations or creating it for landing pages or a one-sheeter, which I do all the time, is that I use the same design system. And so it's essentially a really fancy brand kit. It's got all of our brand colors, it's got our logos stored in it, it's got um the fonts that we use. And it also has stuff about our branding and our voice and our tone. And so it's a really developed uh brand kit from a for lack of a better word that turns us into the design system that we can apply to what we're building.

Micah Johnson 10:30

Yeah, I think if I could sum it all up, it is the uh way that Claude can create output that is not the generic standard stuff because it's using our voice, our brand, it's using our design system. So it outputs in that design system. It's phenomenal. All right. So we have to.

Alane Boyd 10:50

And no, I want to add one more thing, Micah. I want to add one more thing on that, is that the design system can be applied to the organization. So if you have a organization Claude account, then anybody within your organization can utilize that. So Micah and myself and our team are all using that same design system. You're not rebuilding it.

Micah Johnson 11:11

Great point. So you have an org-wide design system so that it really saves you a bunch of time. The next step in this is you just give Claude a bunch of information about what you want in this. It could be a transcript from an internal call about the landing page. Give Claude that. Who cares? It's unstructured data, doesn't need to be formatted, it doesn't need to be anything special, just enough for Claude to go through and go, okay, I see this design kit. I see what we're trying to do. Now, where am I going to take this? Like, what am I going to do with this? And how do I lay this all out? That's what Claude's looking for. But you can give it lots of stuff. It could be a transcript, it could be um a brochure, it could be, you know, a couple landing pages that you like the layout on as inspiration.

Alane Boyd 12:06

I love the inspiration one because I'll see things that I like, completely unrelated to what we're doing, but I like the way they styled something. So sometimes I'll feed it the whole landing pages, or other times I just take a screenshot of the one section. I say, hey, I like this section. Make this part look like that, or be inspired by that.

Micah Johnson 12:25

Yeah, it's so cool. And you can mix and match and put it together, and it's like a mood board that Claude is gonna happily take in and work with. Um, the other piece to all of this is well, I I wouldn't even say like it's a piece to it. This is usually where it stops for weeks, where you're going back and forth and going, all right, well, let me get to a wireframe. How's this layout? And then you go, I don't know, because I can't see anything in this damn wireframe. It's just a bunch of squares and boxes and X's. So is the layout good? Will it convert? I have no idea. And then you go weeks and weeks and weeks, and then you finally get some high fidelity stuff, and it still looks like crap. So then you got to make the logo bigger. Anyway, you get the point. What Claude does is take all your data, your inspiration, your mood board, and gives you a design back in like five minutes. So go make yourself a cup of coffee and come back and look at the design that it created from your design uh system and from the input you gave it.

Alane Boyd 13:29

And I I love that it's like a real thing. Now you can actually create a wireframe in design if you want it to in claw design. Uh, it does have that option. But the the live view, actually, like what is it really designing? And I love that for somebody that needs to collaborate with me. I mean, Micah, how many times have we gotten in an argument over a wireframe because you're telling me it's just a wireframe? I'm going, but this does not look good. And you're like, it can when we go to design it, it's not gonna look exactly like this. And you know, I'm getting so frustrated, you're getting frustrated. Well, now we can see it live of what it's gonna look like.

Micah Johnson 14:05

Yeah. And that brings us to the next step, which is refine it. What do we like? What do we don't like? Do we want to change a color? Alane, you and I used to get into these arguments all the time where we'd look at a design and you'd be like, I don't like it. And then I would be like, Okay, but why? And you would be like, I don't know. I just don't like it. And so I feel sorry for Claude, but it's now the bucks passed on to it, where we've got to look at a design. And if you don't like it, you're just telling Claude, hey, try something different. And, you know, I I think you and I interact with feedback differently with Claude, but it's the same end result.

Alane Boyd 14:50

Yeah, because you can you can share or I can share the design that we're working with, we can share it with each other and then collaborate on it. And so I can this is kind of getting into the details of how to use Claude design, but this is an important part when you want to get feedback from somebody else. So I can comment directly to call to Claude and say, I don't like the color of these buttons, change them to one of the other colors in our style kit. Or I can comment to Micah and say, hey, you know, what could we do here that would give us another option? I don't like the way that this is said. And it can be more of a collaboration between Micah and I. So now we can collaborate with the AI, which is Claude, or collaborate with our humans.

Micah Johnson 15:33

Well, it's really zany is all of this is real time. So like I can leave comments and be in the design. Alane can leave feedback, comments, responses, replies in the threads and be in the design. And then Claude sitting there, who can also we can at mention Claude, who will then leave comments back in the thread of the progress that it made or answer questions that we give it, just like it's one of us, which is it honestly, it's actually really cool.

Alane Boyd 16:06

It is. I I I'm loving it, it's so much fun. I mean, we've got it, we're we've been doing this for our biggest goal website and creating landing pages, but I've also been playing around it with my speaking website for Elainboyd.com and created the coolest animated map for it. And that's another piece that we're not talking about yet, but that it'll create the HTML for animation.

Micah Johnson 16:31

Yeah, and we'll get to that in in our next segment here. But so we've got we've refined the design. We're like, yes, this is what we want it to be. It's fully interactive. It's you've got animation, you've got all the like it is the page that you're looking at in Claude right now. So how do you get it to your web host? Well, this is the actually what used to be again a super hard time-consuming part is you'd have to transform the design into code into your host. And now you click one button or ask Claude, hey, give me the zip file for this, or give me the share link with this. You go to Claude Code and you go, Hey, can you put this web, can you put this landing page on our website? That's literally it. If if Claude is connected up to your host through MCP or a command line interface, a CLI, you can just ask it, hey, can you put this on our website? It will do everything that you need it to do in the right order, in the right way, and even recommend, like, hey, what should we call this page? What should the URL be? What subfolder should this be? And here are some ideas.

Alane Boyd 17:42

And I want to clarify too, because we're we're moving it to claud code to move it to the website provider to Webflow, but the HTML is actually being written in cloud design.

Micah Johnson 17:55

That's right.

Alane Boyd 17:55

So we're not re we're not writing code in code.

Micah Johnson 18:00

Yes. Yeah, now it it is so um differentiation of utility. We've got cloud design that is going to help us design its leaning towards design. Claud code can run, uh can have terminal access, can run command line commands, um, is designed for building. So that's why we move it from one to the other to make this happen. And it's part of the magic behind this that makes this really easy and seamless. Now, here's what's cool. You can then publish it to the website, go back to Cloud Design and be like, actually, uh, this I sat with this for a day. I don't like this. I want to change this. You change it in Cloud Design. You, for the most part, you don't even have to do any type of re-export. You go back to Cloud Code and be like, hey, I made some updates to the design. Here's the link. You give it the cloud design link, and it runs its own MCP server to Cloud Design and goes, cool, gotcha. I see the two updates you made. Let me deploy this for you. It goes through the whole deployment, pushes it to your website. You can double check it yourself, but Claude Design or Claude Code is actually going to sit there and monitor it for it to go live to confirm that it actually deployed for you. It's phenomenal.

Alane Boyd 19:13

I and I was really hung up on this too originally because I didn't want it to be messy in Webflow. And the way that it does everything, I am just blown away by.

Micah Johnson 19:27

So that's the entire process. There's, you know, some amazing things that we could point out in the design process as you're going through this that you get benefits. Like you have Claude that's powering all this, so it is writing all the code, it's giving you a live interface. If you want to have special hover effects, if you want to have animation, if you want to have um like illustrations that are actually not just photos, but part of the code, so it's more SEO friendly, all of that is possible.

Alane Boyd 20:00

I was just thinking, too. We also created a native form for our leads to fill out using, I don't know if we used code or if we built that in design, but it is a fully functional form that was in design. Okay. So we built a fully functional lead form that everybody fills out. And we also have pop-ups.

Micah Johnson 20:21

Yes, like exit intent. So, like if you go to close the page, it does a pop-up for you. All the code for that was written in claw design. And I know it's getting a little confusing. Well, like, why won't you use claude code to write code and claude design for design? But it's because the technology behind it is all the same. It is Claude as a model. It is, um, I guess we should note Opus 5.5 is the model you probably want to use for both of these things. It's phenomenal. Um, but it's all being designed in HTML, CSS, and JavaScript, which is the website technology. The other cool thing with this is you can go through, you can build an entire landing page. When you're in the design phase, you can start a brand new chat with Claude and go, hey, take a look at this landing page we just built together. How would you improve this? Or do some web research and identify other landing pages in my sector, in this industry? You know, what are the top ones? What are they have that we're missing? And then work through that iteratively to improve your design again in short, short periods of time.

Alane Boyd 21:34

And all of this is the, you know, we're the humans still leading this and still taking these actions. If we just let AI do all of it, we wouldn't be coming to the best result. It would look like everything else out there. So really, it's, you know, what are our ideas with instead of us going and doing the research and looking up other uh areas or other pages in our industry? Well, we don't have to be the person, but it was our idea to. Have a go and do that.

Micah Johnson 22:01

Oh, that's such a good point, Alane. Because you know, that's that's the effort that I was talking about before and setting the expectation. We got the idea, hey, do the web research. Yes, we could go to the web and do the web research. That would take us hours. Or we have Claude as a tool do the research for us, collect it, summarize it for us, and give us the information back. That would take three minutes. I'm gonna go with three minutes. And even if it's wrong, even if it missed stuff, fine. That gives me a starting point that allows me to dive deeper, but it still goes back to the effort is I had to decide to allow Claude to go do that. And then I still have to make judgment calls on is this the path forward in the landing page that I want to go with? I am not leaving that up to Claude.

Alane Boyd 22:52

And one other thing that I want to touch on, because I run into this quite a bit, is people, especially with some type of developer background, whether it's just web web development or a coder, is that they only want to use Claude code and they feel like that's the ultimate thing to use, even for the design of a website. And so, Michael, you have a really good way of explaining, you know, why is it that we don't want to just use code for all of this? Why do we want to use design?

Micah Johnson 23:22

Yeah, for me, it comes down to the workflow of produce of spending that effort of producing the body of work, right? So we could use Claude code to do a lot of the stuff that we're doing, but the workflow is tedious. It forces us to make a prompt or a request, a prompt to claude code, and then it's going to decide on how we think it should be updated based on what we wrote in writing. And if it misses it, we're going back to the prompt. And if it misses it again, we're going back and it sucks. It's great compared to what we used to have to do in some cases, but then shift over to claude design. Now we have this workflow that we could do where we can look at the design. But if I want to edit the text, I'm double-clicking, I'm editing the text. If I want to change the font size, I'm changing the font size. If I want to just select one element and give it specific feedback on just that one element, I'm clicking that element, I'm giving feedback just on that. So the workflow and the speed at which I can iterate and spin my effort is minimized by using a tool like Claude Design to get through the design phase versus trying to use a tool like Claude Code.

Alane Boyd 24:35

Yeah, really like you get a user interface basically to tweak the design and when you're in Claude Design. So you can go into edit mode and make tweaks yourself. Because I don't want all it, it it makes I feel like I'm suffering if I always have to use the prompt. Even in design, if I only had that way to communicate, even though it's light years ahead of what I could do before. But like some small changes, I just want to edit it and go on about my time.

Micah Johnson 25:01

Totally. You just want to do it. Like I don't want to have to spell out two sentences to change one word or capitalize a letter. Just capitalize the letter. You know, that's the workflow that I'm talking about.

Alane Boyd 25:15

There's some other benefits too that I've learned, even just from using this myself, is what happens on the back end. Everybody's worried about SEO or AI friendly. And it caught so much stuff that I didn't take the time to do before on my website. And so it's already, it's like your little AI employee that loves looking at all the edit SEO settings that you need to make sure that's in there.

Micah Johnson 25:42

Yeah. So I think that's a big one. SEO and becoming AI friendly. There's a lot of stuff that needs to go into the code for that, obviously. Um, but this is something that people don't think about a lot, is just how well formatted the code is. So if you do need to go in there or if you have somebody that's gonna work on it manually, it's already well formatted and it's well named. I know I've tried to manually build stuff over the years. I am not gonna name stuff properly. It is gonna be the dumb, it's I'm not gonna carry a naming convention. I'm gonna forget if I work on it multiple days, which it will take me. And when AI creates it, every section, every code element is properly named. It's using the right prefix, it's using the right suffix. It's got everything in there. So it's and it does it in seconds. And it doesn't sound like a lot, but long-term maintainability is increased because of this.

Alane Boyd 26:40

Well, and you know, that was the piece that was really important to me. I didn't want to have to go in and then search through four pages of HTML to find the edit that I want. And so with something like Webflow, it's keeping the formatting, it's keeping the sections, keeping everything really, really clean. So if you don't want to always edit and design and claude code, you want to just be in your website provider and make edits, you can do that.

Micah Johnson 27:05

Yeah. And I think that was one thing that I definitely wanted to bring up because we usually get a question when we at about this stage when we're telling people how we do this, is like, well, what happens if I want to go into, say, Webflow and make edits directly on the web page that was created by AI? And the answer is you can absolutely do that because the tooling and the uh infrastructure that's already in place with a tool like Claude and Webflow means Claude is taking the design and building it in a way that it works in the editor in Webflow. So all that heavy lifting is gone. But again, I don't even have to, like you said, Alane, I don't have to go to Claude Design to even make edits. Once it's published, I just go into Webflow if I want to.

Alane Boyd 27:49

Well, and there's a piece of it, and and you know, I don't know other website providers, um like I know Webflow, but we have a dev server that we can see before we publish it. And so it will make it live on the dev server for us so we can actually see what it looks like in Webflow before we push it live to our main site.

Micah Johnson 28:10

Yeah, and that is you, it it used to be so powerful. It's still great, right? It's still like double checking stuff, but it's very rare that we look at that and go, ooh, it caught something, honestly, because it's identical to the code that was written in Claude Design. So it's a nice to have, and it helps Claude. Um, I would say when we get into more advanced stuff, like uh like the forms you talked about and processing data and testing things, Claude code can help us test whole workflows, like let's simulate people entering the form and triggering the animations and doing the hovers and all of that kind of stuff. Perfect for the dev server, right? But just looking at it, Claude is already going to look at it in the mobile view, the template view, the full desktop view, double check all of that for you as well, give you snapshots if you want it. You can watch it do it live because it has a built-in browser. I mean, it's insane. If you get this set up, it's just absolutely insane. Yeah, let's jump into this was all fine and dandy when you get it set up. And this is my favorite trend that we have in our podcast episodes right now, Alane. The BO report, the biggest obstacle that people face for getting into something like this.

Alane Boyd 29:26

I've really noticed that people don't want to upset their designers by saying, hey, try something like Claude Design. And it baffles me because technology is changing. It's, you know, I don't go, hey, you know, fax me that contract. Or hey, next time you're near a payphone, pick it up and call me. Or designers are not going in a black room and doing their photography and then doing manual typesetting and using physical hand tools like they did, you know, 40, 50 years ago. Like, no, they're using computers. Design has evolved, but suddenly it's like, oh, well, we're not letting our designers evolve with that, or my designers won't evolve with that. And so you've you've got to adapt at some point, or you're gonna be that person saying, hey, call me on your payphone or fax me. No, we've got to make sure that our designers don't see that it that this is a threat, that they see this as a tool to help them. And I'm starting to hear, like, oh my gosh, I just had to create a magazine page and it used to take me three hours. And now I told it exactly what I wanted with the design system, and I did it in three minutes, and it looked awesome. I mean, those are the wins that we really want and that I love hearing. And so support your design team, help them see where this is really a tool in their tool set and not something that's going to take their job because we really need designers to see that this is a new strategy for them.