# Claude Code for Outbound: How We Used Claude to Design Our Website **Creator:** Joe Rhew **Platform:** youtube **Duration:** 13m **Source:** https://www.youtube.com/watch?v=dmS9DRD-aT8 ## Summary The video details the process of building a website, focusing on implementing a landing page based on previously defined specifications and best practices. The creator uses various tools and plugins to streamline the development process, emphasizing the importance of maintaining separate work environments to avoid code conflicts. - The session begins with a recap of previous work on website copy and feature set. - The creator utilizes the Superpowers plugin for brainstorming and building a spec for the landing page. - A new Git work tree is created to manage different branches and avoid code collisions. - Multiple coding agents are launched to expedite the development of various components simultaneously. - Initial design choices are critiqued, revealing a need for aesthetic improvements to avoid a generic AI-generated look. - The Impeccable plugin is employed to refine the design, focusing on enhancing the visual appeal and user experience. - The creator discusses the importance of aligning the website's aesthetics with the service-oriented nature of the business. - The video concludes with a preview of the website's progress and plans for further refinements in future sessions. ## Transcript [[0:00]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=0s) But this was based on like an afternoon's work. All right, so this is the fun part. Now, uh we're going to get started and actually build out the website. Um in the last episode, we worked on specking out the uh the copy and getting the feature set uh by researching the code base, right? We researched the best practices around uh landing page copywriting. We put those two together and worked with cloud code to come up with the right messaging, the right sections for the website. And now we're actually going to build it out uh which is very visual. So hopefully this one will be uh quite fun. And um this is the implementation plan we used. We started using superpowers which is one of my favorite plugins uh to start brainstorming and then to actually build a spec for the landing page. Then we created the implementation plan and now we're going to work with cloud code to actually implement and superpowers always asks do you want this to be sub aent driven or inline and I'm going to say sub aent driven but whenever I do codebase work I always like to create a new git work tree because then I can do I can spin up multiple agents to work on different parts of the codebase without them clashing into each other like overriding parts of of the code that might be present in both. Um so you're think of a git work tree as like different branches, right? I mean there is already a terminology called branch. [[1:40]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=100s) Uh but work tree what it enables you to do is um for every work tree you can set a different branch so that none of the code that you're writing on different branches actually collide with one another. Anyways, um so I'm going to do that, but so I'm going to tell it um can you create a new git work tree for this and give me uh oh, why am I why am I typing? And uh make sure to copy over the design spec as well as the implementation plan files uh into that git work tree. uh create a new branch for that git work tree off of uh staging and uh tell me the path to that git work tree and uh give me a an instructional prompt uh to work with a new coding agent in that git work tree. I will uh spin up a new session. [[2:30]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=150s) So I'm doing all of this so that I can have um a separate window a separate work tree know a clear delineation of like all the different work that I'm doing. See, you can see here I'm I'm doing some work around um creating like client reports. Uh so that's a feature that I'm working on and I want to make sure that this website work which is quite different. This is front-end marketing site and the other is more like backend. Uh but I just don't want them to collide in any way. So uh I'm going to do this. [[3:02]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=182s) Perfect. So it it gives me everything. So what I'm going to do is uh I'm going to create a new thing. I'm going to rename it uh and call it agent website. It's the same as the first one. I'm I'm using uh CMUX by the way for this. um which is a great interface for uh spinning up multiple coding agents or sorry cloud code um to work on like different projects and different parts of um the uh the codebase. It supports like get work tree and everything. So it's great um so I would highly recommend it. I I'll probably do a a deep dive of Semox. Um, but anyways, so what I'm going to do is go to this repo right here and I can literally just copy it and say here we go. [[4:07]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=247s) So, uh, the other agent already gave me the prompt, right? So, I'm working in this um, execute the implementation plan. Got it. The key context is this. Blah blah blah. Okay, great. All client names and data must use placeholders. Perfect. I'm going to pause. I just realized this is probably going to take a while uh in real time, but obviously I don't want you to just sit around and, you know, watch me do other work or whatever. So, I'm just going to pause and then just restart whenever there's something interesting or whenever there's like steps to approve and things like that. So let me just pause here. [[4:46]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=286s) Nice. So it's it it set up the project scaffolding which takes a little bit of time but here you can see that um it launched six different agents where uh each of the components or not each but like clusters of components are being built by separate agents which is pretty awesome. So that really speeds up the process instead of cloud code doing one by one. Um it's orchestrating sub agents to create these um different tasks uh together which is great. I have I've given it zero uh feedback in terms of what color what like typography to use. So I'm kind of curious to see what it's going to look like. My guess is that it's going to look like a very generic AI generated slop site. Uh probably like dark background maybe um purple uh like like a very cheap knockoff version of I don't know like stripe linear. Uh but we'll we'll um we'll iterate on that as well once it's uh once it's there because I think the the structure is good enough. uh we just got to make sort of the aesthetics look a little bit more pleasing. At least to me, it's a very subjective thing. So, um so I'll pause again and then we'll kind of see uh when the website uh gets created and then we'll see what it looks like. [[6:22]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=382s) All right, apparently it's done. So, let's see what it looks like. Um, I'm going to say run the server and I will copy this. Perfect. Cool. Yeah. Oh, got it. So, this actually uses um it it picked out some of the um colors uh am font I think that I used in the uh in our internal facing dashboard, our admin dashboard. And so I recognize these colors um which is cool. So it has pretty much all this stuff here which is great. Uh nice. [[7:12]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=432s) Yeah. So, it has to be honest like I don't love these colors. So, I'm going to Okay, we're blah blah blah. Okay, great. Um definitely going to change these colors. And then like these have to be built out still. But this is pretty good for a Vzero. Um so what we'll do is um I like this plugin called Impeccable. you can see like it designs things uh in a more thoughtful way and just like less AI slop I guess. Um and it's uh it's a tool uh it's it's a it's a plugin um on cloud code so you can definitely use this as well. Uh see it works with cloud code here. Um so what I can do is yeah I think that's fine. Okay great. Um so let's see. [[8:10]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=490s) I really like Zed, which is the ID that I use. Um Um I really like just like the subtle texture on the back. Uh it's like fuzzy wool kind of texture. A little bit of like these lines. Um yeah, I just think it looks really nice. So I like Yeah, I still like zed a lot. Um and linear, but both of them I think have like dark backgrounds and tend to skew a little bit more technical. I think um because we're not exposing any of the technical aspect that much. Uh what I mean by that what I mean by that is the user doesn't actually interface with our tool. We do right. So we do still want to I think give off that vibe of being technical but not so much because we're not selling the tool. We're selling we're selling our services. We're selling the outcome. Right? Um, so I think I want to skew a little bit more lean towards being warm. Um, and here's an agency site that I actually really like a lot. [[9:14]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=554s) It was called plane ah little planes. Here we go. Came across this um, my friend shared it with me and I thought uh, just really liked uh, how it looked. It's almost like obviously we can't use this. Um, this is like a I think they're like a brand design agency, so obviously going for very different things, but I kind of like how clean it is. Um, and so I'm going to give this to them and see what happens. [[9:49]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=589s) Obviously, they're going for a very different aesthetic. It's very uh because they're like they do brand and design, but um like I like the SIF uh like font, right? And I think that could work really well with ours as well. Um yeah, so I just want to see what you come up with. We'll see. Quiet, confidence, intrigued, curiosity, relieved clarity, confidence, and then curiosity. [[10:20]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=620s) Um, I like confidence and curiosity. All right, great. Here we go. Let's see what this looks like. Okay, so we've written some set of like highle instructions and then what we're going to do is do a critique from impeccable as well where it's going to look at the site and then say this is how we're going to critique um or this is like impeccable critique of the website. [[11:00]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=660s) So now we have the full critique. Um it looks Yeah, it looks AI generated, right? So Claude built this marketing page. Um so it has all of these things, right? Uh yeah. So I would say impeccable specifically is really good at catching AI generated design, which is something that we definitely want to avoid here. And so what I'll do is um it'll start giving me all of these priority issues and I'm just going to say implement all of them and see let's see where we are. [[11:37]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=697s) I'm going to go for the full overhaul. Um oh instrument I want to see options uh as bold as possible or significant rework. All right. submit answers. So, we'll see what this looks like. Okay, so we picked um instrument as the font and then I'm just going to say run all of these and then we'll see what this looks like. [[12:11]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=731s) All right, so this is the first like full pass with Impeccable and you can see already um the colors have changed. It feels less like generic um AI. Uh I like a lot of these. Some of these obviously will have to change. Um like this. I'm not really sure what's going on here. Uh yeah, some of these will definitely change. But you can already see that it's like so much better. And I don't know why this is left align, but um you know, some of this uh already looks a lot better. So, I'll probably go through a couple more passes and I'll probably do a similar thing where I critique it, but just focus on each of the sections, right? [[12:55]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=775s) And then see what it looks like. Um, but this was based on like an afternoon's work, right? Where um we created a um some context around best practices on website copy generation as well as our codebase. Uh, and then we got claw to create this. And then we used impeccable to make this um a little bit better looking. I think one thing that it doesn't uh that often they fail is like let's see like responsive um design. But yeah, anyways uh it looks it looks okay actually. So anyways, um you can see that this looks pretty good already and I'll probably do a couple more passes uh probably in a separate video actually. [[13:53]](https://www.youtube.com/watch?v=dmS9DRD-aT8&t=833s) Uh so this is what it looks like.