How Claude Code’s lead designer builds with AI

[00:00] What I'm actually going to show today is what I would consider a pretty practical demo of some of the workflows that I think will help up-level people who are using Cloud Code. [00:11] The way I like to describe it, and in some of my experience so far in the industry, we're kind of operating in these really compressed time horizons. But the way that we work at Anthropic, because we just have access and we're playing all the time and all day, it feels like we're always looking for the next way to work and make ourselves more optimal. [00:30] popular internally for how we work. And hopefully this will all help you up level. One thing I'll call out is that I am a CLI diehard. Like I've designed the CLI, like Cloud is in there. I think it's just like, like I used to design CLI products even before AI. So know that like, this is not how you need to work. The desktop app is much more accessible. And like, you can do everything that I showed today on the desktop app as well. But this is going to be on an open source repo. Does everyone know what Excalibur is? Does anyone know what it is? It's [01:00] Product's super great that they're open source. You can always contribute. If you actually want to practice, they're a really great one because they have a great backlog of issues and a pretty open community. First tip, if you don't know it, is that you should always be starting your work in a work tree. Does everyone do this or does anyone know what this is? [01:14] All right. So work trees are pretty complicated. And generally, I don't think you need to know what they are.

[01:30] each other and you're doing one thing in one and another thing in another and they're overwriting each other and they're competing, work trees keep [01:35] makes an isolated copy of your repository so that you can do multiple parallel tasks. So if you find yourself having multiple windows open and doing multiple things at once, or you see your engineers who have four or five clouds open, know that they either have multiple copies of the repository on their laptop, and they might call it like repo one, repo two, repo three, [01:54] or they're using work trees. And I recommend work trees because it's a little bit easier to manage. And to start it up, you just do cloud dash dash work tree. And so you can kind of see in the branch there, it's in a work tree and it already checked out a new branch for me. So pro tip number one, if you're multi-clotting, use work trees. [02:11] The second pro tip I'll give, I know not everyone has access to this, depending on your organization. So I just say like, I am always in Opus 1 million context, just so you don't have to think about it. And then I am always in fast mode. [02:27] Yeah. [02:28] Yeah. So... [02:31] Once again, I know it's not accessible to everyone. [02:34] . [02:35] And I am going to do this so that we can fast forward through the demo a little bit because I only have 15 minutes. But I do think that it does make a little bit of a difference. Okay. And then I'm a big typo writer. Claude is actually really good at getting typos if you type them. But I put this here so that y'all could see it. [02:54] This is a prompt that I'm just going to get Excalibur to add a new autocomplete feature.

[03:00] That's it. [03:01] No design specs. No, just like I want to add autocomplete. I want to see what it looks like. A few things I'm going to call out here that I think are important when you're prompting. The first is I built myself a slash prototype skill. [03:12] I asked Cloud to build this. You could build in like two seconds. All it does is get Cloud to generate n number of options, default to five of a different implementation of a feature, generate it in the HTML file, preview it, and then iterate on it a few times. And I can enter that n and I can enter what the feature is going to be. I did not write this. No one ever writes their skills by hand anymore. If anyone tells you they do, they're lying. Everyone just prompts them. And then a few things I will add in here is I always ask Cloud to pick an option for me first. [03:42] think it's actually fun to see what cloud comes up with so historically i used to be like oh like prototype and then i'll choose now i'm like oh prototype and then you should choose what you're going to do and then tell me why and then i say another one is like feel free to research online now if i were doing this in my production code which i'd say like please look at slack google docs any discussions and like like big query like look at all these sources and figure out which is the best one but given that this is an open source repo online research is fine and then you know [04:12] option, verify, get the styles to match. Really important one, put up a PR with a screenshot. Claude is actually really good at this, and I actually don't review the outputs anymore of Claude in the transcript. I'm typically reviewing a PR that Claude put up that has a recording of the feature it implemented. And then a new feature that we released, I think, a few months ago is Loop.

[04:30] Does anyone, has anyone used this before? Loop is pretty much just cycle. [04:36] Keep going. So loop until you're done just means keep going at this until it's fully done. And so I'll show some more applications of loop in the future, but it's like a pretty standard prompt. If an engineer asked me to build something, this is like, well, to be honest, they would probably do this on their own without me and then send me a vibe coded prototype. But if I was doing it from the ground up, this is how I would do it. [04:57] Oh, the other pro tip that I forgot to mention, I'm always and everyone at Anthropic is always in auto mode. So auto mode is our... [05:06] kind of work around for lower permission modes. We have a classifier that will detect whether or not a risky action is being taken on your computer. So you don't have to be sitting there being like, yes, I accept. Yes, yes, yes, yes. So you should be using it in this way and it'll go a lot faster. [05:20] Now I've done a lot of these demos before, and Cloud takes a long time to work. So typically, if I were doing this, I'd actually spin up a bunch of these. But because we're here and I'm trying to showcase a workflow tonight, I'm actually going to show a few other things I do on this side while Cloud is working. [05:34] but I [05:36] I think these are a few tenants that I hold true as I'm working today, and they're going to kind of inform some of the workflows that I'm going to show all of you today.

[05:47] tragically, and most LOMs are not good at design. [05:51] yet. So what this means is that you should still very much be in the loop for the craft and the decision making. It doesn't mean this is going to be holding true forever, but a lot of my workflows revolve around the idea that I still need to be the one making a decision about what actually goes into the product. Perfect. So you can see here, sorry, this is going to be a little back and forth, that Claude has used my prototype skill to list a bunch of different options of what Tab to Complete could look like. And so it's showing all the different ways. I'll typically like previews. [06:21] Sometimes Claude asked me for one. Does anyone have a preference on one that they like? [06:25] Thank you. [06:27] Two. All right. I'm going to go two. That's it. All right. The second is that I actually, yes, coding is automated, but I hand off so much of my work that is not coding to Claude. And if you're not doing that, then you're actually not using Claude in the most, I think, like automated way. We really need to start thinking about more than just code when we think about AI automation. [06:57] - Yeah. [06:57] doesn't mean not everything should ship. And that's a pretty important distinction that we need to start making as we're adding more features and as everyone has the ability to access code and push a production, we need better systems that scale. [07:10] And so some ways that we're fighting this internally today is I actually use Cloud in the web. Does anyone have this internally at their teams or companies? You might have it with your own internal infrastructure, but I have like Cloud in the cloud or Cloud in the web is a service that we offer. And I use it as a way to send like hundreds of tiny little polish fixes all the time that I find in the app. They're not worth spinning up a new session for. They're not worth dedicated time.

[07:39] engineers that's there's too many of them so every now and then i ask claude to squash them all into one pr for me and sometimes they just get auto approved because they're tiny css changes and no one really needs to review them so i would say like this is a really great way to maintain craft and quality in your products and it's something that you can do on the side as claude is working [07:57] A second one is that almost everyone at Anthropic actually always has Claude's running and always has Claude's running to help merge PRs. So one thing that I never do anymore, actually, is once an idea is done, I'm never actually in CI. I'm never reviewing until merge. I'm never addressing code review comments and stuff like that. It's actually all fully automated now. And so there's two tricks that I do to do that. The first is... All right, perfect. So now you can see I asked Claude to verify. [08:24] So Claude is opening... [08:26] Chrome right now, and it's going to test that it's working, but I'm just going to... We can watch it if you want. If you guys have the Cloud in Chrome, I would highly recommend using it because if you're doing front-end changes, it's actually the best way to have Cloud be able to self-verify. And you can see the ADHD way we all work right now where we're doing one thing and then Cloud pops in and it's doing another thing. But I'm just going to let that go. These are the commands. The first one I do actually when I make big code changes is just a really good way to... [08:55] like do a little bit of a hygiene check. Simplify and code review are internal to our repository, but I guarantee you if your engineering team is using AI, they have an equivalent of that that kind of prunes your code base. So ask your engineering partners, like what skills do you guys have to simplify your PRs? And then they'll be able to put them up. And then this commit push PR is one that runs a bunch of checks that we have internally as well. So these are all ones that our team has built. Some of them are available externally, but I also know that all your engineering teams have dev prod teams

[09:25] using them. And then the second one is one that almost everyone, engineering, non-engineering, has at Anthropic. This is built into a skill, but I wrote out the full command that we used to use, which is just to review any open PRs and just get them over the finish line. And the somewhat annoying thing, but really great thing that we have is because it's connected to Slack, it will DM people if they are on your code review as well, or it'll DM the stamp channel and ping who's on call. So the full integration of your suite is where it's at. [09:54] And then the last one, which I think has been the most game changing for me personally, as our product suite has grown, is actually I have a cloud code routine, which is a scheduled task if you use cloud cowork. And what this does is it scrapes all of our repositories for any front end changes that anyone has implemented. [10:23] Google Docs, like any kind of data that it has access to. If a designer was not involved in it, it will flag that it shipped without a designer or not. [10:34] If it shipped without a designer, it will come up with an adversarial or it'll review the design and then it will typically come up with an adversarial design in a PR already drafted. [10:48] DM it to the engineer who shipped that feature, and then ask them to work with the designer on that feature.

[10:59] I tested this a few times and I had to turn off the DMing because Claude was actually really bad at design, unfortunately. And we did have to like it's and like that goes back to my first one. Like Claude is not good at design yet. But I think this is a level of automation that you have to be thinking like not just the first step, but like the next step, the next step, the next step after that. Like you want to be pushing it so far that it's like building the actual end product. And I think we have a lot of forgiveness right now in the industry because we're all testing how these workflows work. So people were very forgiving when I first tried this and it was really bad. [11:29] but I'm always ready for when the next model is going to come out and this is actually going to be ready and available because I have it all written up so when we're testing the next one I'll just throw that up again and see if it'll work and it typically gets better. [11:40] Yeah. And so these are the three tips, if I could like really impress on you of like workflows that we're using that have really like just augmented how the team works. These are the three things I demoed today. And then if we go back to... [11:54] Thank you. [11:55] the session, you can see that Claude is now recording a screenshot from Claude in Chrome here. It does it through a series of GIFs. It's going to post it up and then it's going to open the PR. [12:09] Yeah, but that's it for my demo. Hopefully this is helpful and hopefully this helps you guys all use Claude code.