Claude Code just changed Web Design Forever (FREE PLUGIN!)

So there's a brand new update that allows Claude Code to rebuild any website's UI live in seconds, right? And this is a brand new CLI, it's called AI Designer MCP Server, right? So basically what this allows you to do is generate and refine production-ready UI designs directly inside Claude Code. So if we've got Claude Code on the right-hand side ready to go over here, and if we click on New Session, and then we'll open up a new folder, so we'll set up this one as Website Designer, open up, and then we can just get it to get started with this, right?

So I'm going to paste in the documentation here, and we'll say set this up so you can design websites for me using this. Basically what this allows us to do is we can point Claude Code at any sort of website UI that we actually really like, and then we can instantly make Claude Code 100 times better at designing, right? This makes it way more powerful at designing and creating UI and that sort of thing. So there's a lot of technical documentation.

You can use this inside your CLI with Claude Code and that sort of thing, but the way that I'm going to use it is directly inside Claude Code on the app, right? Because it's easier, simpler, doesn't require any sort of technical expertise, and anyone watching this can use it too, right? So you can see here how it works. So we can say, for example, clone, and then the website using the AI Designer MCP, right?

And that's what we've set up over here. This is the AI Designer MCP. So let's try this now. I'm going to say, okay, clone Julian Golding, or in fact, we'll try clone AIprofitboardroom.com using the AI Designer MCP.

Now you could set this up in any CLI, right? So I could do the same thing and I could run it inside, for example, Claude Code, inside Codex, even inside OpenClaude, I think would work as well with this, which is pretty crazy. So any sort of AI agent that's running terminal commands could use this. And it's not just for cloning websites.

You can also do this, for example, for generating new designs, right? Compacting repos. There's actually a few different things here. So you can see we've got clone, which replicates a visual style and layout of a website with a URL.

You've got, for example, inspire. So it uses the URL as visual inspiration for a new design. And you can just say something like, make something like this, but for our brand, right? You can use the improves the enhance.

So it actually improves the existing design of the URL. But the main thing is you're getting a powerful improvement in UI because Claude straight out of the box isn't that great. So we're going to try this right now. And you can see we still need to connect the MCP, which is what we're doing right now.

And some cool examples of this, like it can design patterns. It can create layouts, components, structure, website. It can create like checkout pages, product pages, dashboards for you. All sorts of cool stuff.

So run MCP inside here. And then we just need to sign in as well to authenticate this. And we'll just log in. So you can see it here.

It says authentication successful. And then it's using this new skill we set up, right? So skill AI designer. Now, if you're using it directly inside the app, you might have some troubles with the OAuth authentication like you see right here.

Just keep troubleshooting until it's eventually fixed. It just took me a couple of minutes to get that set up. The cool thing about this is like you could use this for, you know, inspiring yourself from like, you know, billion dollar companies. And you could learn how to create similar websites like them.

Now, if you're on the free account, you get five credits and a clone costs one credit, right? So I'm just cloning my own website here just as an example. And now it's using this generate design skill, right? So you can see the prompt here.

So it's using this prompt, which is fully built in with the documentation over here. And literally just to install this, you just copy and paste that. And then you go over here and you can install and clone websites or use them for inspiration or improve the UI in your own website as well. Now, we could actually have multiple agents working in parallel because we're using core code, the new version on desktop, right?

So if we click on new session here, we can stick inside the same folder here, right? And we can say, okay, improve the of AIprofitborn.com using the AI designer MCP, right? That's an example. You could have multiple agents just running in parallel at the same time, creating multiple different things.

The other option that you have as well is for deploying the website, you can use Netlify's MCP server, right? Which allows agents basically code the website and then deploy it to a live domain. So as an example of that, I actually used OpenCloud with the Netlify MCP to deploy this website itself, right? And so if you're creating new websites with new designs inside Cloud Code, you can just get a Netlify access key, plug it into Cloud, give you the documentation for the MCP, and then Cloud can deploy and build websites for you as well.

Now, whilst we're waiting for that to load, let me talk you through exactly what this is and how it works, all right? So what if you could just design an entire website by typing, right? No design skills, no Figma, no hiring web designers. You just type what you want and build a beautiful website that appears in seconds, right?

That's exactly what AI Designer MCP does. And it helps you do it with Cloud Code, with OpenCloud, with whatever different AI agent you want to use. Now, what is AI Designer? Well, AI Designer is a tool that designs websites for you using AI, right?

So you describe what you want in plain English. It builds a website with proper code, colors, layouts, and everything. It's like having a world-class web designer sitting next to you 24-7. But it costs a fraction of the price.

In fact, it's free, as we've seen today. And it works quickly, not in weeks. Now, you might be wondering at this point, what is MCP, right? So MCP stands for Model Context Protocol.

Kind of like a plug socket, right? Cloud Code is a lamp, AI Designer is a power station, and MCP is a cable that connects them together. So once they're connected, Cloud can literally talk to AI Designer and design websites on your behalf, which means you never have to leave Cloud Code, right? It's all in one chat window.

Now, to get started with this, all you need is Cloud Code or some sort of AI agent. You know, it could be OpenCloud, could be Hermes, whatever you like to use. Have Node.js installed, have an AI Designer account, and a terminal command line. That's pretty much it.

Now, what can it actually do? Well, let's break that down into four main things. Number one is the AI Udesigner, right? So you describe a page, it builds the four things for proper code, and you can just use a simple prompt like this.

Now, the other cool thing about this is if you have an idea in your head, you can type it out, and AI Designer turns it into a working clickable prompt. You've also got the website cloner, right? So if you see a website you love, you can paste a URL, and AI Designer creates a design, but it can customize it to you, right? And your products or your website, et cetera.

And there's four different modes. So you got default, prompt only. This is when you just have no reference, but you just want to create a website, right? You want to design something from scratch.

Then you have inspire, right? So you can use this when you've seen a website you love and want something similar, but for your brand. So you can give it a URL, uses it as a visual inspiration. So for example, I could say like, make something inspired by this website, but for my SEO agency.

And then you also have enhance, right? So you can use this when you want to improve a website that already exists. You can give it a URL of your own website. It redesigns it whilst keeping the same goals and structure.

Now, in terms of the credit system, so AI Designer uses the credit system, basically prompt only designs use credits from your plan, right? Anything that involves scanning a real URL would cost an extra credit. And you can check your remaining credits by just asking, check my AI Designer credit status, right? And if you're on the free plan, you get five credits.

And then everything gets saved locally in this folder, right? AI Designer, which we've got over here. Now you can also iterate on these designs so you don't have to accept the first version. You can iterate on it.

Just tell Claude what you want to change, right? And it uses the previous design as a starting point. And then you can refine it as many times as you need to. And then you can see an example of what the website will actually do in the outputs right here.

So thanks so much for watching. If you want to get a full guide on using AI Designer and Claude Code, you can get that inside the AI Profit Boardroom. And this is my AI automation community that helps you save time, grow and scale with AI automation. Inside the community, you can ask questions, get help and support whenever you need to.

Inside the calendar, you can jump on weekly coaching calls where we go deep on this sort of stuff. Tons of people in there using Claude and you can ask questions about your setup, share your screen, et cetera. Inside the map, you can connect with people in your local city who are using Claude just like you. And then also inside the classroom, you get all of my new daily trainings, including the full guide on Claude Code and AI Designer.

And of course on Hermes and OpenCourt AI Agents, if you like that sort of stuff. So thanks so much for watching. Feel free to check out link in the comments description or go to the AIProfitBoardroom.com.