Claude AI Artifacts Create Website Landing Page: New Capabilities by Anthropic
Other Videos📅 2024-06-30
Transcript
[00:00] if you were with me in my previous video we created an entire game using Cloud's artifacts and this was the game we created in this video and I'm doing this intro while playing the game so that's pretty cool in this video though we're going to go ahead and I just lost we're going to go ahead and create an entire website landing page get the source code check it out this video game we got the entire source code now let's get the entire source code for our website landing page I think the last time I was pretty excited about a new artificial intelligence update was probably the gbt store was probably gbt 4
[00:30] this new update from anthropic is extremely impressive like this got me excited for AI again and it basically refreshes what we've seen in the market in the past couple six to eight months now there's been a lot of transformative stuff when it comes to AI image generation even as far as video generation but there seemed to be lackluster advancements when it came to really pushing these prompts and the outputs to the next level no I'm not sponsored by anthropic but what I will say is these artifacts are pretty pretty cool and that example you saw in the
[01:01] beginning of the video is an example of artifact what artifacts allows us to do is a ton of stuff the first two videos I'm going to do on them is just to show you how to do code to UI so this video let's do this website landing page and first understand how to enable it we're going to go ahead and come down to our profile I'm going hit it I'm going to go feature preview simply hit on and we're going to go let's create a landing page today to begin let's give Claude Sonet some context we're going to say we are creating a landing page today in react let's do one based on a
[01:35] new product which is a an 8bit picture it's worth 9.99 and it's instant delivery I could give more context here we have artifacts enabled let's hit enter we are starting to generate some code here this is how it structures it's UI here I'm going to go and shrink down a little bit we'll have the visual aspect to our right then we'll have the let's talk to it to our left now I can easily see this in the future being kind of like a gbt UI where basically we could create specialized
[02:06] version of artifacts to do whatever the heck we want this video we're just checking out making a landing page here and we already got pretty far here this is giving me like stripe Vibes to be honest with you I actually want to test something real quick notice how there's no image I'm going to give it a publicly available link to an image and see if we can actually grab that I'm going to come over to some test data here that should all be publicly available let's find out it is not let's make it available this is all test data anyway so it's not that big of a deal on my end when it done here we're going to go ahead and use
[02:38] this dog's face as the image test I'm going to go ahead and get a copy of the link copy link and say use this image as the product image let's see if this works I don't think this is going to work I'd be actually very impressed if it does work okay it does not work that's out the window it will work though if you grab the code and then import it that way so roll back what I just did right there I'm going to go ahead and edit the initial prompt here ask another question okay let's make the color of this landing page pink hit
[03:10] save let's roll back that mistake generating code build out a website in five minutes so we got our pink landing page let's go ahead and have it create an image that we can use but with a bit create an image for the product but use 8 bit design and have it be a dog question in the comments if you had to choose between getting a dog or a cat which one are you going to get and then once you know which one you're going to get what breed are you going to get what okay we'll take it Claude CLA on it
[03:40] might not be an artist here but we'll take it's a bit I'm going to go and say add this to the landing page I cannot spell now this is cool so we got our 8bit photo is $9.99 maybe it's an nft by my nfts you probably heard that before in 2021 some of y'all are like I'm never touching an nft again and then some of y'all are like check out this nft that just got released okay side not side not now let's go ahead and see if we can take this further we got a landing page here obviously we can do
[04:11] more work let's see if we can actually make a second page when I click by now when I click by now can we have a popup for the users email we won't get difficult here I'm actually curious if it's able to implement like layering into this logic here would y'all buy this dog for $999 it look looks like it lost a dog let's go and see if we can do pop-ups though ooh he can do popups that's cool that's really cool let's go and add the dog back though and there we go now
[04:42] this might not look amazing it probably would have passed in like 2001 but this is the idea here y'all we're getting to the point we can automatically code out an entire landing page and just do it through completely talking to an AI model which is super cool so if we want to take this one step further here we can copy the code like that or alternatively download the actual file once you download the file you can open it into a software like vs code and you can see everything it has here start playing around so that my friends is why we're probably going to do more videos on cloud artifacts so make sure to subscribe here so you can see what else we can do with this really cool new tech
[05:13] that just landed in the markets check out my video showing you how to create a video game with it yes a video game Guess how high of a score I got in that game right now and I'll see you in the next video Corbin you said you made a video game with this yeah in like under 12 minutes pretty cool these are random videos off your clicks this my face and I'll see you in the next video