Make Claude a better designer & builder

0:00If you're new to coding with Claude code and code X and all these other tools, we're going to give you tools that will make you a better developer by helping you stop and think through and plan out better, by helping you improve your designs and you're going to see some before and after shots, and by helping you think through how you can keep improving your work. All of these are free and available for you. Of course, we've got the report that I'm going to share in the description, and let's get started. Presented by Zapier, the AI automation company. Adam, this one I've seen for so long. Awesome design MD. Let

0:30me click into it and show what it is. I'd love for you to just talk about it for a moment and then I'm going to show what I've done with this. Yeah, I mean, I one I want to I would love to see what you've built with it, but I I think a lot of these LLMs are bad at design. By default, uh they don't know how to build designs that are that are both interesting, compelling, but then also coherent. And so what I'm seeing a lot of, and this is a great example, is a set of skills and a package that helps constrain the AI's

1:01power and then add in all these layers of what does it take to make a user interface that looks good and that's easy to use? All of that comes through when you use a package like this. And and the big problem Adam that I see is all of us are creating websites that look exactly like Claude code. Same color, same everything, and Claude design does this to the hilt. And so here we can come in and we can basically pick the design that we like, like maybe we like lovable. Mhm. And they basically distill lovable's colors, lovable style into a package that we can use in Claude

1:35code and now even in Claude design. And so I have actually taken this and said, what if we use the x.ai design language? And here's what that would look like on these slides. And what if we used a design language of say, uh this is lovable, this one is Spotify, this is Zapier, and that's what it does. And it's really easy to use. In fact, let me see if I can share how I did that and [snorts] show people how how simple it is. I use VS code, as you know, since

2:06you're the one who introduced me to it. I just said, I want you to uh copy the text directly from their site Mhm. and then I said, I want you to design it. It created design.md and then it created the the image, the page for me, and then I did the same thing for

2:21other other designs that I wanted. Like Spotify. Very easy to do. you know, you're you're using this to mimic these other brands' designs, but but a really powerful way to use this is, let's say you want to build a new PowerPoint or a new web app for your business, well you could point it at your business's website, and suddenly Claude knows your design language. It knows your logo, your colors, your font, and it'll pull all that into everything you create. So everything is automatically going to come out custom to you and looking very on brand. It's super easy to use. I highly recommend it, and like I said, they even have a

2:55version that you can use if what you're trying to do is um is do it in Claude design, which I really appreciate. All right, let's uh switch something else. Go to the next one. This one is G stack. We've seen this talked about so much. It's from Gary Tan. It's his collection of basically specialists packaged as a skill. Have you Have you seen this? Do you have any strong opinions on it cuz I'm about to

3:21show what it looks like. I've I've seen it. I've used it. Let me tell you why I think someone that's trying to learn how to vibe code apps should should use this. You know, you look over there on the right, it says 23 specialists and eight power tools. The reality is, if you're a software engineer like myself and you've been doing this for for a decade or two, well, you you bring a lot of expertise to the table and you know how to act as a designer and a front-end engineer, but if you're just vibe coding from scratch, you really need a set of skills like

3:49this to plug in so that it can fill in your gaps. The things that you're not going to think about, a stack like this will help you think about them. It will help you remember to do it. It'll be much more proactive and say, "Hey, have you thought about this? Have you tested it this way?" So these It's almost irresponsible to not be using a package like this, honestly, if if you don't

4:08come in with the experience. He gets so much flak on on Twitter for this because it's just a set of skills. What do you think of that? Like here, this is the the CEO office hours. Yeah, I'd I'd be one of the people giving him lots of flak for that. I I think in in some sense these things are easy to create and I don't know that it seems all that authentic coming from him. Obviously, he's got experience. I'm sure people on his team are helping him put this together. It's not just him

4:36coding every day, although it may be. Uh but but I Yeah, I mean, I I think the what I don't love about uh such a large package of these is that it takes [clears throat] away your ability as the creator to do something wild and different and unique to you. You know, some of the other ones we're going to look at today, I think are far more customizable than than what you're showing me right here. And so I worry that using someone's pile of skills like this is just going to shut down creativity. And now you're going to be building apps that look like everyone

5:07else that's that's using the G stack. But it's not just for design. It's also for thinking through your ideas, for retro, for pair programming, that kind of thing. it'll suggest the same technologies over and over again. It'll suggest the same frameworks. It'll suggest the same user behaviors. Like it has biases built in, and because there's so many files in there, you you really couldn't realistically customize all of that to to to be genuinely custom for you. All

5:34right, and again, I'd use this also. It's such an easy thing to use that to me it feels like a simple add-on. You can see I actually had it in there before. Um it's deadly. You You want it. You already have it. I said, "Okay, yeah, right. Just remove and start over." And then I got to use the design skill, which is you saw, it didn't really make much change to my slides, but it's fairly easy, right? Just everything's a slash away. Isn't Isn't

6:02that how I get to it? Office hours. There you go. That's it. And then you just start clicking and it asks you some questions and then it moves you through it. Yep. Easy peasy. Easy peasy. This one is called superpowers. Stop letting your code agent jump straight into code. It asks um it makes you ask what you're really building first or answer what you're really building first, then it dives into the workflow. Um

6:29what do you think of this one? First of all, it's an amazing pattern uh and it's a anti-pattern I see a lot with new AI builders is they walk in and they say, "AI, I want to see an app. Build me an app that can do this, this, and this." And that's just not how experts are are using these tools. Uh when someone that's really well-versed [clears throat] in both AI and product building, they sit down and and they spend a lot of time planning. They spend a lot of time researching. They spend a lot of time thinking, asking questions, answering questions. And then by the

6:58time you're ready to build, the thing that you build is nuanced. It's good. It has a point of view on why it should exist. It's not just some like average AI thing. So anything that can get you to slow down will help the AI to slow down. So I I like this cycle of of tools that that focus on it. And it's not, you know, compared to maybe Gary's uh package, like this one has a clear point of view. It's like, "Hey, I'm I'm just here to bring you a handful of good software engineering principles that you probably don't know, and I'm going to help you plan this project better than

7:32than you would if you just sit down with regular Claude code." How much time do you spend thinking through before you start building something? Cuz I just go right into building and then I figure it out. Yeah, if you know, let's let's say I've got 5 hours to work on a project, I might spend an hour and a half or two kind of researching and planning. I'm pulling design examples. I'm gathering data. I'm looking at other apps. I'm defining functionality. Maybe I'm looking at mock-ups or little prototypes. And then it's not until the hour and a half or two-hour mark where I decide to say, "Great. Now let's start building our

8:07app." And that's the the minute the first line of code is is written. All right. Let's go into the next thing, which is Zapier MCP. Here's what this does. It basically brings in thousands of apps, thousands of tools, Gmail, calendar, Asana, Notion, so many others into anything that I build. And what I love about it is I can go in and decide what I want to give it access to. So I'm not just saying, "Here, uh Claude code, you have access to my Gmail." What I'm doing is I'm going into Zapier MCP. I'm saying, "I want you to have access to my Gmail, but only to reading Gmail and writing

8:46draft, and I want you to have access to calendar and Asana and Notion and so on." And once I've decided what I want to give access to, I get a single connection that I can give back to whatever I'm building, whether it's a personal assistant, or I like to create dashboards that give me insights into what's going on online. All that is what

9:04uh Zapier MCP makes really easy to do. And what I love about Zapier is these aren't just people who are vibe coding a solution for me. They're the company that's been battle-tested for over 10 years, and I've been a customer member of theirs for as long as they've been around. Highly recommend them. They're used by enterprise, they're used by small creators, and I'm glad that they're here to superpower everything we

9:25do as my sponsor. All right. Awesome Claude skills. This is something that you said to me you've seen so many times. What is this? Yeah, this this uh pattern of awesome something is a common pattern you'll see in in software and and product spaces. And it's basically someone that's that's taken the time and put in the effort to go and figure out, "Hey, in all these different categories," like if you scroll up to the table of contents here, there's a bunch of different categories of skills that you might want. And I'm sitting here and I'm like, "Oh man, I want to edit video edit images." Well,

10:01great. I'm going to go to the media and content section and I'm like, "Oh yeah, this YouTube trans that's actually I might download this one because that's a problem I have all the time. I'm trying to get my AI agents to grab transcripts from YouTube." And so, it's nice to have a repository like this bookmarked because it's just the the best like Yellow Pages but but for all of these awesome skills that you can plug in. So,

10:24it's not This isn't anything on its own. It's just this It's just a list, but it's it's definitely worth a bookmark. I've been really looking for a good YouTube transcript service. I I don't know if this is the right one for me to try, but I I'm looking for it and I want to make sure that I get a good one. You know, that you would start I would always start from these Andrew cuz I bet there's a thousand different YouTube transcript skills out there, but it takes a little bit for something to make

10:49it onto a list like this and so great. They've like taken away some of the work instead of testing 10, maybe you only have to test this one and you're ready to go. Look at this, video downloader. We do this all the time using shady web apps. Um by the way, my background is not as cool as it usually is because I'm in

11:05your office [clears throat] here in St. Louis. Anything I should be doing while I'm here? Uh you know, go climb the arch, eat some Imo's pizza, Ted Drewes. It's a little chilly today, but otherwise I'd say let's go get some Ted Drewes after this. Frozen custard. Climb it? You can actually climb the arch? You can Well, you don't climb it. You go up in this like rickety old elevator that j- j- j- takes you to the top. You get

11:26to hang out. It's a wonderful view. I was going to say I'm a bit of a wuss when it comes to heights. All I want to do is sit in office at a desk, but I'm up for going out. All right. Let's go on to the next one. Uh This is the Claude Code Mastery Project Starter Kit. We're talking about a set of slash commands and hooks. You liked this when you and I were talking before we got started. What do you like about

11:49this? Yeah, you know, all of these skills And and by the way, this is a this is a smaller project only 296 uh stars. I just wanted to use it as an example. What do you like about this? All these skills are nice because they they let the AI kind of have a little bit more information about what you're trying to build. It makes the AI a little more proactive. This one blends together those skills, but also some template. You know, when I start a new web app in Claude Code, I'm not starting from scratch. I'm not starting from skills. I copy and paste a template just

12:23like this, but that I built for myself and it's got all the tools that I want installed already. It's got a handful of skills. And what I would take from this Andrew is I'd say, "Well, awesome. This looks like a really good template. Everybody here should start from a template so that you can build

12:38consistently, you know what to expect." And it really giving the that structure along with the skills helps the AI figure out, "Oh yeah, this is how Adam wants to build." And because this one is a little bit smaller than some of the others, this is easy to customize. So, you could point What's in this template? When you say What's that? When you say template, what are we looking at here

12:59exactly? What is this? when when we're looking at one of these skills projects, you know, if you click on the dot Claude folder there at the very top, Got it. I see it. And then inside here, there's skills, there's hooks, there's commands. These are the things you're downloading when you're downloading G stack or one of these other packages of skills. Well, in this, you notice there's other folders. There's a source

13:23folder. There's a scripts folder. There's a project docs folder. A docs, a content folder. So, all of these things are are basically placeholders for how the LLM is actually going to build your app. So, instead of the app having to decide, "Oh, there should be a docs folder. Oh, there should be a content folder. Oh, should there should be a

13:42scripts folder." They're already there. So, Claude Code doesn't have to invent all this stuff from scratch every time. I see. And so, they're saying when I when you create start with these sets of folders that with this structure and build from there. Yeah. Yeah, I've got a you know, one one word that's used a lot is boilerplate. I've got a boilerplate that I use that comes with some skills, but it's also got my design language already baked in. It's got my logo already in there. All this stuff that I don't want to the you know, Claude Code to have to figure out every time because

14:15it's the same for every app I build. So, should I be using this or just learning from it or do I customize it? How do I use this? I would either take this one and and point you know, give the URL here to Claude Code and say, "Hey, I want to customize this for my own purposes." Or if you have a project that you've already built, take that, point Claude Code at the project you've built and give it the link to this and say, "Hey, Claude Code, I want to make a template that's using all of the design language and you know, user experience decisions I made in this custom app and then I

14:50want to make a template that's as robust as this one that's here on GitHub. Combine those for me and make me a custom template that's just for me." And so, when you sit down to start building using Claude Code or whatever What's the tool that you use? You don't use VS Code. What are you using? I use VS Code sometimes. I use T3 Code which is this tool by

15:12Theo Von. There's a bunch of different ways to do it. They're all talking to either Codex or Claude Code under the hood. And then I have my own set of templates that on my computer I basically copy and paste or I'll point Claude to the folder where it is and say, "Hey, that's the template I want to use for this project. Let's get it going." And then Claude will copy

15:31all the files. all the files. Got it. So, when I start a project, it's not an empty folder. There's there's a bunch of empty folders. There's some folders that have content and context in them like logos, design, context about who I am, what our business is. All that just comes into every project for me for free. And I have a handful of these. I have one for creating memos, one for creating internal web apps, another for

15:55creating external web apps. You know, we've got we've got a a pile of them. I almost always start from scratch. I mean, I pull in files individually one at a time. I feel like, "Okay, I've got a brand new empty container." But I I Honestly, I found it exhausting trying to like build all that stuff and I it's just repetitive. And you know, as a software engineer, if I do something four times, I'm going to I'm going to automate it the fifth time. And so, yeah, I I make a bunch of templates. And they're so easy to make. I built them out with Claude Code, right? I did

16:26exactly what I told you, which is I pointed it at a couple apps that I had built and said I wanted it to create a template that would let me, you know, bootstrap one of these apps up up from nothing. And that's just what it did. Let us know in the comments if you want us to do a session where Adam just walks us through how he creates templates or the templates that he has when he's

16:46when he's building. All right. Anthropic skills. This is actually like the most popular thing I think for people who are getting started, right? It's the collection of dependable skills that do useful things that we should all be aware of. Yeah, these guys are testing these. They're they're validating them. Tons of people have used them. So, if if a thing that you want to build is a skill on this list, like I'd be using I'd be using this skill over anything else. It's just going to work. And as they keep updating the models, you might not think about this Andrew, but the new models work differently than the old models. And so,

17:25as the new models change, Anthropic's going to keep skills like this up to date with, "Oh, here's the way that you need to instruct the new model." And so, you're basically getting that for free from the source rather than relying on one of these third parties that may or may not update it, may or may not be good, may or may not be tested. Like this stuff is all super legit. That's a great one. Use this skill whenever the user wants to do anything with PDF files. It includes reading and extracting text tables from PDFs, combining or merging multiple PDFs into one, splitting, and so on. And this is

17:56the PDF one. If you're working with Claude Code one. There's there's an Excel one I think at the bottom. Yeah, there you go. At the bottom of the list. XLSX. I used that one all the time. So, so Claude sometimes struggles with Excel files because you know, the context it's not like a paragraph where kind of all the information is self-contained. Like the headers are maybe thousands of rows away from the piece of data you're looking at. And so, I find that it loses its place. It loses structure. It will transpose rows across each other, but when you use a skill like this, they've basically given it

18:30the instructions to understand how to process the Excel file, how to either create it or read it. And so, it just makes the anything you're trying to do far more reliable. All right. And of course, you can get the full report with all of these links below in the description. Just click the link and you'll get everything that we've talked about here. We'll continue with one

18:54more. Ah, this one is so fun. Caveman, you've got to tell people what this is and how it can actually save them money on tokens and on on usage. Yeah. Caveman make less spend Andrew. This is This is exactly what it sounds like which is you know, the the AI is very verbose. We're very verbose. We give it a lot of information. And all those tokens, that's money. And in some cases, it's even worse. It's time. You know, if if the AI is going to spend all the time to send back a thousand tokens, well, what if it could have sent you a hundred tokens? You would have gotten it cheaper

19:35and faster. And what these guys have proven, if you if you click in, they've actually run a bunch of tests on this. Lowering the amount of tokens improves the thinking accuracy as well. So, somewhere in here I think go keep scrolling down. I think there's a chart where they've gone through. Yeah. Where did they do that? there was. Maybe I saw it in another So,

19:55saved, yeah. Somewhere there's a quality one. Eval Yeah, no, that's the evals. Um Maybe it was a a news article I was reading. But essentially what we're looking at here is I love the demos and they they've got a small, medium, and large. But look, they're saying normally Claude Code might have might talk with you with a lot of words like this and you would of course just use a lot of words to communicate back to it. If you can shorten what it says to you and what you say to it to something like this from something like this, you go from 69 tokens for this message to 19 tokens for

20:31this message. You still communicate essentially the same thing but with less. Let me ask you this though, Adam. This really demos well. It's kind of fun and you can really shorten things. The thing that I think is sometimes there's more nuance in the big in the verbose response. How Why do I care about saving 50 tokens? Yeah, you know rather spend the money and get accuracy

20:54and understanding. I'll I'll I'll give you a graph that we can put up on screen for this, but it's it's been studied many times that the longer the chat session is, the worse the thinking accuracy of the model. So, literally every token that the model generates or every token that the model consumes gets a little bit dumber. Gets a little bit dumber, a little bit dumber. And so, in your conversation, if you Yeah, you might think that the nuance is great, but as it gets longer and longer and longer, it's actually getting dumber. It's not following along as well. And so, in a lot of cases, that

21:29nuance is actually not helpful. It's it's actively making uh the the quality of the model worse. And all these models have a have a limit as well called the context window where, you know, look with the current Claude models, it's a million tokens. They literally cannot see more than a million tokens. And so, if you want to have a long conversation, if you want to build something, if you want to process a book, well, after a million tokens, it can't see it. So, the the tokens that it looked at first, those are just gone. Those words, they're out of the memory. So, if you use something like Caveman, what happens

22:02is it compresses a little bit. Well, now you can fit more of the story. You can fit more of the application. You can have a longer conversation, get more done all in this one window uh without like losing data from the beginning. All right. So, it is improving accuracy. And as it says right here, it's also making it more fun. Well, I knew when you're basically talking to uh a a

22:25caveman. Um but this is also this is something that I do appreciate. The wall of text that you get from LLMs justifying themselves with the pleasantries just drives me freaking crazy. Especially on Opus 4.7, I have so many times in the last week had to write back, "I'm not going to read all of

22:42that. Tell it to me more concisely." Like I wish I had had this as like a little toggle where I could have just No, caveman it for me, please. But be open with me. You haven't installed this even though you shared this with me. You don't use this day to day. Why not? Uh I'm lazy, you know, installing stuff on my computer takes even a moment of my time. I think I would like to try it. What I What I would like to see though is like I would like it to be a toggle where sometimes I can turn it off and sometimes I can leave it on. I think that's probably not

23:12really how it works. This gets installed and and what it does is is there are hooks so that every time you send a message to AI or every time AI sends a message [clears throat] back to you, you can actually when you install something like Caveman, it'll interrupt that and say, "Ooh, Adam's about to get a response from the LLM. Let me change it for him." And then it'll send me the the caveman's version automatically. But that's like not again always easy to turn on and off. So, you know, I don't know that I always want to talk to it

23:43this way. I get that. All right. We'll have it of course in the report for people to see um including some of the demos that we have here. This one keeps popping up, Adam, as like the most popular uh repo of the week. We've talked about it before. It's always worth including. What is this? Tell people. Yeah, I mean this guy is like one of the most preeminent AI researchers. He's created a lot of the the research that is driving this boom of LLMs. So, he clearly knows what he's doing. And then he's still with it. He is at the forefront. He's testing things. He sees

24:25not just where things are going but also what's wrong with the way things are today. And so, these skills are kind of his bridge based on his advice, the way he talks about the models. This is a bridge between how Andre would would like the AI to work, but it doesn't quite do it yet. And so, if you give the AI these skills, it sort of almost does things the way that that it should do it instead of the the limited way that we've got today. So, this isn't by him, but this is based off of, you know, his advice for the world. He's on tons of

24:57podcasts. He's producing research. This is kind of distilled uh version of his knowledge. And if I if I start using this, what's going to happen? How is it going to change the way that that I interact with Claude Code and the results that I get? look look look at those four. So, number one, we've actually seen pop up in a couple of the packages you've shown me today, which is, "Hey, uh it's actually really useful to do a little bit of research and thinking and planning before you start to build. But the LLMs will very happily just run and build. If you say, "Build me an app," yes, sir,

25:31I'm going to build you an app. And so, having a skill like this top [clears throat] one slows the LLM down, which improves the quality both of your thinking and of the LLM's building. And these other ones, it's it's the same deal like simplicity first. Oh, man, the I was just reading a report where uh you know, the LLM in in almost 70% of cases

25:52will rather build a package that exists. Let's say you want to like load PDFs. The LLM would rather build a custom PDF loader than find off-the-shelf some existing package that we've been using for 20 years that loads PDFs in code. The LLM's like, "No, I want to build it." And so, it's like not simple. It's

26:12always trying to create custom stuff. And custom things can be nice, but they're also really hard to maintain. Uh they can be buggy. And then here like if 200 lines could be 50, rewrite it. Like Yeah, I don't like LLMs just produce produce produce. So, you need to slow it down. You need to constrain it. Surgical changes is something that as you You won't see this in your first week vibe coding. Cuz in when you're vibe coding, you know, at the at the start like your app is 20 files. It's really simple. You have three screens in your app. By the time you've got 20 screens and there's a

26:46thousand files, every single change that you try to make in your app, the AI is going to say, "Awesome. Here's the 80 files I need to change." And it's slow. It causes bugs. It breaks behavior that, you know, you've already fixed 10 times. And so, you need to remind it constantly. And you know, me as an engineer, I do this just as I'm prompting. But if you're not doing it, you need something to remind it to to make really really really surgical

27:13changes. Let me do the final one, goal-driven execution. Yeah, uh define success criteria. That's a That's a thing another like foot gun that new vibe coders will will not do, which is they don't they don't tell the AI what great looks like. They tell AI what they want it to do. Build me an app that can search maps for restaurants. Well, that's not success. Success is I want an app that can search restaurants that can really show things that match my preferences and my criteria. And like it takes again a little bit of thinking and like what does great look like? Not what is done. What does great look like? And

27:52so, a skill like this that's plugged in will not just help slow you down so that you can define great, but then it's also going to build in these checks. So, in in software engineering, we call them tests, which is, "Hey, if I'm going to process some data, I should have a little test that can run and test my logic." So, instead of just waiting for me to go in and test the whole app every time, it can in an automated way check to see, "Does the math still work? Does the output look right?" And so, this this skill kind of does all that for

28:22you. All right. We got a lot going on here. Here's the number one. And of course, people can download this report and they are doing this. This is like our most most downloaded anything here at the uh on the channel. People keep wanting these reports. Um and so, you'll get to see all the cross-cutting themes. Here's the big one for me that I'm taking away. It's skills are the new unit of distribution. That skills are how I've now learned to stop repeating myself. And the big thing is people like Gary now are taking their internal skills and they're packaging it for other people to help them get more

28:57be more disciplined, get better results. I'm a new entrepreneur right now, uh man, I need a set of skills. I don't just want to create some SaaS platform and try and get people to invite and use it. Like no, I want to build something as a skill. It can seem a little funny cuz mostly you can't charge for them. People can download them. They can share them. But man, like this is like go and look at all the charts there of of how many stars these are getting, how many times people are downloading it. Like this is the way to get in front of

29:26customers right now. I see. So, it's a way to promote yourself. And yeah, I absolutely see that. The other thing that I'm learning for myself is it's a way for me to be more intentional about how I'm creating things and repeat with improvements instead of just start from scratch. I have a skill now that creates this. I will say this to you, Adam. It does take for freaking ever to create these skills. I think that what I'm going to do is I'm going to say, "Hey Claude, just create the skill out of everything we've said." and I'm going to get it quickly cuz it's just markdown files. It

29:52takes for freaking ever. I have it on a separate monitor. I give it feedback and it's worth it, but it's Well, go back to some of the skills we were looking at, Andrew. You got to slow down. You've got a plan. You've got to have some tests built in. Like, the process is really, really well known.

30:08We've been doing this for a long time. Just Just because AI is here and can type really quickly doesn't mean that the process isn't still worth it. And yeah, all this stuff is is a little bit harder to create than you would think. Very easy to make a demo. It's very hard to make something that's legitimately

30:23awesome. All right. Thank you. See you all in the comments. Bye, everyone.