Kyle Skelly — Claude Code + Seedance 2.0 = Insane Websites

Source: YouTube Channel: Kyle Skelly (46200 subs) Duration: 8:49 Views: 236104 · Likes: 7062 Video: Watch on YouTube

Try Seedance 2.0 now - https://higgsfield.ai/s/seedance-2-0-kyleslyf-ibZwaG Learn how to create stunning, professional-looking websites using Claude Code and generate AI assets.

Get The Figma File: https://www.patreon.com/c/kyleskelly Become a Future-Proof designer - https://futuredesigner.io/ Follow me on: https://x.com/KyleSkelly Purchase my vector pack! : https://kyleskelly.gumroad.com/l/rough-edge-pack

In this full walkthrough, I’ll show you how I designed a beautiful animated landing page using modern AI workflows and clean design practices.

Whether you’re a designer, developer, or indie creator, this tutorial will help you create visually impressive sites faster than ever before — with no code required.

What you’ll learn: – The different ways to get a design into Claude – How to fine-tune your design in claude – Bring it to life using AI assets – Pushing your website live

Key Insights

In today’s video, I’m going to show you guys how to create really impressive websites using Claude code. And to bring it to life, we’re going to use Seed ants 2.0, which is a new model available on Higgs Field. And Higgs Field are also the sponsor of today’s video. Let’s go. You guys can either follow along with this video with your own design, or I’ll put the link for this design in the description, so you could use this specifically. If you pay for Figma, you can go down here, and then you can click on dev mode, and then right over here where it says MC P, you can just copy this example prompt. But to make this as inclusive as possible, let’s say you don’t have a Figma subscription, then we can just do it this way. We’ll just take a screenshot of our design like this, and we’ll pull Claude. So, we’ll drag this screenshot into here, and we’ll give it this prompt here. Make this into a full-screen hero section of website. The font is Manrope. The H1 is 80 pixel size. We’ll make sure that Opus 4.6 is selected, and we’ll run it. And this here is what it’s given us. So, this has done a pretty good job, you know. It’s even managed to kind of make a button, and where we didn’t have an actual icon file, it’s kind of just made one. Now, at this point in my workflow, this is typically where I go from the desktop app into terminal using Claude. Now, you can simply just ask Claude, “I want to continue this with Claude in the terminal. How do I do that?” So, now we’ve got our website on the left, and we’ve got Claude on the right. This here is where we can make micro adjustments. So, like for example, the H1 should be regular and semi-bold weight, and then the star icon at the end of the 3D magic is not shown correctly. Let’s run this. So, now we can refresh page, and that’s looking pretty good. Now, it’s actually using an emoji, but we’ll keep that for now. So, in the Figma, I’ve got this SVG, this sort of grids type thing. Well, we’re going to export this out as an SVG. In our project folder, we’ll make a new folder called images, and then we’ll [snorts] save this as grid.svg. Now, we’ll ask it, “Add the grid.svg that’s in the images folder to the full-screen background. It should sit behind everything, filling the entire page.” And look at that. Instantly, we’ve got this, and it scales appropriately. How cool is that? Now, what I think would be quite cool is if we start to blur out the edges, so this is less intense. Let’s add a radial mask to this to create a vignette mask. And then, how cool is that? You can see it’s literally fading off from the edge. And let’s just say, tighten it up a bit. Cuz we want to kind of bring that mask in a little bit. I don’t quite like how the lines are coming over to the navigation links up there. So, we’ll refresh it. And then now you can see it’s a little bit tighter. Now, the design doesn’t quite match our Figma yet, so we can take our logo file, and we can save that out. Just got to make sure it’s in to in the right folder. We could take this icon down here, and we’ll say we’ll call this button icon, and then we’ll take this one here, and we’ll call that star. Then we’ll just say, “Replace our logo file with logo.svg in images, the button icon with svg, and then the star icon.” Then we’ll refresh it, and then now we can see our logo is in there, our icon is down there, and we’ve got our star icon there. So, now for the part that’s really going to bring this together and look really unique, we’re going to use Higgs Field to generate some images, and then we’re going to turn those images into videos using Seed ants 2.0. So, let’s do that. This is Higgs Field here, and Higgs Field’s really good because they have access to all these different AI models. And what we’re going to do to start this off, we’re going to click on Nano Banana 2, and we’re going to go down here, and we want to create these two sort of Pixar style characters. So, we’re going to give it this prompt here. Create a Pixar style char

Transcript continues…