So, we've been talking a lot on Hard Fork recently about vibe coding. Actually, we've been talking about it for more than a year when I built Casey his own hot tub time machine using Claude.
So, it is quite pink. It's pink on pink, which is a color scheme that you don't see a lot outside of the Barbie franchise. But now, these tools have gotten really good, and the newest ones like Claude Code are capable of building entire websites, apps, or even code bases from scratch. But it's still not quite intuitive. Does the guestbook counter work now?
Okay. And if you're not a programmer, the command line interface can be pretty intimidating. And like lots of code is scrolling past, but like do you understand what any of this is or is doing?
I do. Thanks for asking. Any other questions?
So today we're going to do our very own vibe coding demo. Building our own website from scratch. And you'll see how it turns out. All right, Casey, it's time to vibe code. Let's do it. What do I do first?
So, step one, go to the Claude Code website. Just Google Claude Code. It'll give you a little command line prompt that you can just copy and paste. And then you open up the terminal app on your computer. All right, I'm seeing this. And I'm going to go to the terminal app and I'm going to say boom, go for it.
Well, so in fact, Kevin, it's giving me the words setting up Claude Code. And in fact, it just said Claude Code successfully installed.
Okay, great. So now type in claude to just start that process up.
It is important that I make the following disclosure. My boyfriend works at Anthropic and I would go a step further and say if you are feeling like this is edging into shill territory, I really do think you could probably do a lot of similar things with Codex, which is OpenAI's sort of Claude Code equivalent. I'm told Google has one as well, but due to the ongoing disaster of Google marketing, I truly cannot remember what it's called. Maybe you could Google it.
Perfect. So maybe try that. And that's a good chance to make my disclosure, too, which is that I work for the New York Times, which is suing OpenAI, Microsoft, and Perplexity over alleged copyright violations related to the training of AI models. So now Claude sort of lives in your computer and can do anything that you can.
You're telling me that he lives in my MacBook rent-free?
Son of a gun. All right, I'm now looking at Claude in the terminal, Kevin. Okay, so now we just need to think about what we want to do. So, I think we should build a website for Hard Fork and have it sort of populate with our latest episodes. Maybe some descriptions of past episodes. What are some other features you might want in this thing?
I think that sounds really fun. Even just seeing a feed of most recent episodes would be fun. It could maybe put some, you know, bios for me and you, that sort of thing.
Okay, so just like start typing into Claude Code. Just say like we want a Hard Fork website. Tell me what you're typing. I'm typing, "Let's make a website for our podcast, Hard Fork. We'd like it to include a feed of our recent episodes and short bios for the hosts. Casey Newton, handsome, and Kevin Roose, question mark." Let's see what happens now.
It's going to use the front-end design skill. Kevin, tell us a bit about what a Claude skill is. So the Claude skill is basically a set of instructions that are executable and basically it's for tasks that it wants to be able to do in a more sort of specific and focused way. So there all kinds of people have built all kinds of Claude Code skills but this is one that handles front-end web development which is basically the sort of you know making the website.
Yeah. So these are some custom instructions that Claude is now following as it's putting together this site for us. Now I should note that Claude has opened up a Chrome browser tab for me. Claude, if you allow it to, can take control of your web browser and do things with your permission. So, that's going to be involved as we build this website. Now, as I go back to the terminal, Claude tells me it's going to build a distinctive website for us. But first, it's going to gather information because, of course, at this moment, Claude, shame on him, has no idea what Hard Fork is, right? We should also give it some design advice or else it's just going to go off and do its own thing. So, is there any like website that you would compare ours to in the ideal state? What does this look like? Well, Claude is already doing some web searches so it can learn a little bit about me, you, and the show. Funnily enough, the New York Times actually blocks Claude from accessing it. So, it is going to have to do a bit of a workaround, but it's now telling me it has all the info it needs, and it's going to create a distinctive site. Now, I agree with you. If we were doing this for real, I would want to go in and give it some instructions about what kind of website to build, but in the moment, I just kind of want to see what it does by default. And of course, if we don't like it, we can make some changes.
Hit enter and see what happens. A fun thing about Claude Code is that as it works it shows you basically just a random set of verbs to tell you what it's doing. So right now Claude is telling me that it is moonwalking.
Is it asking you for permissions?
I have done something a little bit dangerous here which is I'm using a mode called dangerously skip permissions. That means that Claude is not asking me for permission for every single thing that it is doing. The reason that I'm doing that is because we are in what they call a sandbox environment. We are not putting something out onto the worldwide web where, you know, we could potentially get ourselves into trouble. If you're doing this at home, you may not want to dangerously skip permissions, particularly if you're planning to take your site live onto the web.
Yeah, if you're scared, if you like to live in fear, don't dangerously skip permissions. But if you want to experience the thrill of vibe coding close to the metal, all right, then dangerously skip those.
Terminal is now asking me for access to files in my downloads folder, and I'm feeling lucky, so I'll say sure.
There's like a big security risk here. You are giving it permission to add files, delete files, move files, execute programs on your computer. And there have been some horror stories out there of people who have like, you know, given Claude Code a task and like come back and find that their computer is bricked or something like that or that it's like deleted an entire directory of files that were very important to you. Yes. So, it's always great to run a backup of everything.
Yeah, it does come with a warning label, but it should come with an even bigger one. What could go wrong? It also, for some reason, wants access to Apple Music, my music and video activity, and my media library. And Kevin, what if I told you that the Hard Fork website is already done?
So, honestly, looks so cool.
So, I mean, a couple things to say about this. Number one, a show about the future that's already here. That is the real Hard Fork tagline. We did not tell it that that was our tagline. It just kind of found it. And I'm seeing a play button for the most recent episode. Should we see what happens if I click it?
Do it. All right. So, it's pulled up the 50 most iconic technologies of 2025. Not our most recent episode. So, it looks like it pulled up some episodes from November, but let's go ahead and see what happens. So, I click on the most recent episode and it's opened up the Apple podcast app. So, you know, that's okay. And it looks like all right, we do not actually have a live player embedded on the site. Okay. So, let's maybe click on the hosts and it's got short bios for us.
We look great. It has identified me as the handsome one.
And it calls Kevin the one who talks to chat bots, which is pretty accurate, I would say. You'll notice that there are sort of placeholders here for head shots. We did not give it head shots, but the bios look good. It's put links to the show on Spotify. Let's see if the Spotify link works. Yeah, that's a working Spotify link. So, you know, again, as you do this yourself, I just want you to notice how many things it got right without us telling it anything. So now this is where I think we get into the really fun part, Kevin, which is we get to change the site by typing into the box. So what are some things you might want to change on the site?
Before we start adding bells and whistles here, like let's try to get this thing to the point where we might actually want to use it. So can you just like let Claude know that that's not our actual logo and it should try its best to find our logo and redesign the site to make it look more like the vibe of the show?
This is like a pretty big ask. Like this is sort of the moment when you're working with a designer where you say like, "Hey, we really love this, but could you do it completely differently?" And one thing that I like about the Claude Code interface is it shows you, it doesn't show you every single step. There'd be like way too much text to go through, but it does show you when it has like dispatched sub agents to handle various tasks. So it'll say, "Oh, I've, you know, one sub agent is going to redesign the site while the other one tries to grab the logo." And it's just kind of fun to see under the hood a little bit. Yeah, it's fun to sort of be a feudal lord presiding over a vast army of serfs saying, "Yeah, see that you do, Claude, and hurry along." Yeah, I'm late for the banquet. What features do you want to add to our site?
Well, so I just want to make sure that the feed of episodes is up to date and that there's a button that I can click and go right to that episode on YouTube. I built something similar for my own site over at cnewton.org and you can go see like a working feed of recent Hard Fork episodes. I was amazed when I was able to build it with, you know, again, just typing into a box.
Yeah. So, Kevin, is this all free or what?
No, not exactly. You have to pay for a Claude subscription. I believe the cheapest plan is about $20 a month. There are also versions of this made by OpenAI and Google. All of them work roughly in equivalent ways.
Yeah. So, feel free to check those out if for whatever reason Claude isn't doing it for you. Right now, Claude is trying to figure out what our logo looks like. And so, it just said to me via the terminal that the Hard Fork logo is a vibrant yellow with playful illustrated characters, and it's going to zoom in on a screenshot it took to take a better look at the result to sort of let it better capture the flavor of the show.
You can also queue up messages so that when it's finished doing this, it will do some of our other things. Do you want to queue up a message or two?
It's not going to interrupt it.
It'll just add it to the queue.
Okay. So you can say like, you know, describe the feature that you're talking about. And when it's done figuring out the logo business, it'll attend to that. Now, what else would you like me to add to the queue, Kevin?
I would like there to be a guest book like the old GeoCities sites of yore where our listeners can go and either rate the show or give us some feedback in a way that will appear publicly to all the other listeners.
All right, so we now entered a couple things into the queue. The redesign is currently underway. Right now it's thought for about five minutes and spent about 2,000 tokens. I mean, I think it's not uncommon for a lot to spend five or so minutes on a task. If it's going longer than 10, you're probably doing something dangerous and should stop.
Yeah, you're developing a novel bioweapon if it takes more than 10 minutes.
All right. Claude says that the light mode is looking much better. They are having trouble loading the artwork image but it's going to go try to grab something from our YouTube channel. So this is something else that's sort of interesting about Claude Code is that it will run into these various roadblocks but instead of just coming back to you like an intern would and saying hey I don't know how to do this it will try to think of the next best way to accomplish the task and typically it'll just go try to do it. So, right now it is on our YouTube channel and Claude is trying to grab our logo and you know this I will say tends to be the slowest part of the Claude Code process that I've noticed. Whenever it has to visit the web, you know Claude can't see like people can see. It has to tediously scroll through pages, take screenshots, analyze the screenshot, and then sort of go from there. I guess when I say it doesn't sound that much different from what a human is doing, but it's just much slower than the way we do it.
Yeah. And it also is like I'm running into this a lot when I try to do things using YouTube or certain publisher websites like the New York Times and others have actually started to implement some like anti-bot provisions on their websites. And so there are sort of a number of sites now where Claude Code just like literally can't go because it encounters this like error that is specific to like AI bots trying to crawl a site.
Yeah. And there are some good reasons for that that we've talked about on the show. Yeah. And if you haven't heard them, go listen to our entire back catalog. It's a fun thing to do while you're using Claude Code.
