AI Audits a Website in Minutes with Claude + MCP

Key Takeaways

Hello there. I thought it'd be fun to take a look at one of the awesome things that you can do with Claude using an MCP tool. MCP, if you haven't heard of it, is an open source standard that allows platforms like Claude to connect to outside data sources and other platforms and tools. It opens an entire new dimension of capability. So, I've created a very simple prompt here. You are my expert UX designer. Take a look at all of these aspects of this website and provide feedback. And the website that I'm picking on here, lawnsprinklers.com. I just kind of picked it randomly. I've already set up Claude with this prompt. Let's let it go. Here is where Claude starts bringing me an MCP. There's an MCP tool called Playwright, which will open up a web browser and allow Claude to navigate the site itself. When you have MCP servers running, Claude will want permission to use them. So, I'm going to allow it. Claude is now browsing itself. I'm actually not the one controlling that window right now. You'll see that based on my prompt, it's taking screenshots. It's checking mobile responsiveness. It's looking at page load speeds, accessibility issues, navigation structure, and it's going to provide feedback on all of these different elements based on my prompt. See, navigated to the contact us page. Pretty cool. All right, and it looks like we have our report. So, the visual hierarchy rating, three out of five, and you can see it provided a whole bunch of feedback here. Observations, recommendations, navigation structure, three out of five. Consistency rating, three out of five. Accessibility, two out of five. That's a problem. Page load speed, three out of five. Not terrible. Mobile responsiveness, two out of five. Definitely opportunity there. Call to action effectiveness, three out of five. And you get the picture. But, here's where it gets really cool. Create a mock-up of recommended improvements to this site. Claude's actually going to now create a mock-up of improvements based on its examination of the site and its feedback. The mock-up won't be anything that's production ready, but it could be a great example for creating pitch materials and proposals or even sending an example to a prospective client. Once Cloud is finished, there's going to be a preview. There you have it. Uh full mock-up of a revised site. It does look like it organized the information a little bit better. Took a look at the nav. For a mock-up, this is extremely useful and it could save you a ton of work and time. Pretty amazing if you ask me. And it even has image dimensions for where you might place images. So, I hope this was helpful. If you want more examples like this, let me know and I'd love to share them. And if you want to talk about it, please reach out. Thanks for watching.