Visit Claude: https://claude.ai/design Import Design To WordPress: https://www.darrelwilson.com/hostinger Get NovaMira Free: https://www.darrelwilson.com/novamira Download Claude: https://claude.com/download In this Claude AI website design tutorial, I’ll show you how to build a complete website using Claude AI, create a clean design system, and then import that website into WordPress so you can fully customize it with a page builder. Websites I mentioned: https://designmd.ai/explore?page=1 https://getdesign.md/ Evernote Prompts: https://lite.evernote.com/note/d7194168-f28f-81a6-d288-7fa79b4c054d In this tutorial, I’ll show you how to use Claude Design to create a website and then bring that design into WordPress with Elementor so you can fully customize it. Instead of using a basic AI website builder where you’re stuck prompting over and over again, this workflow gives you the best of both worlds: Claude helps you create a clean, modern website design, and WordPress with Elementor gives you full control over the final website. We’ll also use Novamira to connect Claude with WordPress. Novamira gives AI agents access to WordPress through MCP, allowing tools like Claude to work directly with your WordPress environment instead of just giving you random suggestions or code snippets. Novamira says it can give AI agents access to WordPress files, database queries, WP-CLI commands, PHP execution, plugins, themes, and page builders like Elementor. In this video, I’ll walk you through the full process of using Claude Design for your website layout, connecting Claude to WordPress with Novamira, and using Elementor to edit and customize the website. This is perfect for beginners, web designers, freelancers, agencies, and anyone who wants to build WordPress websites faster with AI. TimeStamps 0:00 Intro 0:37 Why editing in Claude alone is painful 2:27 Opening Claude Design (Pro plan, browser only) 3:05 Creating a design system 3:39 Resource 1: designmd.ai 4:29 Resource 2: getdesignmd.com 5:37 Pasting a design system into Claude 6:28 Building a 2nd design system (Lamborghini) 8:05 Creating your first AI website 8:25 The 3 ways to build a site 9:02 Method 2: the pre-made prompt 9:31 Method 3: the screenshot method 10:08 Theme Forest + Go Full Page extension 10:58 The free prompts (Evernote link) 12:18 Filling out the prompt 12:38 Adding SEO keywords 13:01 Setting the design direction + pages 14:30 Running the prompt 15:23 Screenshot demo (Essentials theme) 16:28 Reviewing the finished real estate site 17:51 Reviewing the screenshot-based site 19:22 Recap before moving to WordPress 19:44 Setting up hosting with Hostinger 19:59 Choosing a plan (go Business) 20:37 Billing period 21:02 Coupon code (Darrel10) 21:28 Creating account + payment 22:06 Hostinger questions + WordPress install 23:56 Verifying your domain + account 24:40 Logging into your live WordPress site 25:51 Why we install plugins 26:16 Installing the Astra theme 26:38 Installing Elementor + WPForms 27:27 Installing XPro 27:53 Why XPro (free header/footer builder) 28:38 Installing the Nova Mirror plugin 29:26 Adjusting Elementor settings 30:35 Installing Node.js 31:36 Connecting WordPress to Claude 32:30 Downloading Claude Desktop 32:55 Editing the desktop config to connect 34:11 Downloading the project as a zip 34:29 The import prompt (Evernote link) 35:13 Running the import to WordPress 36:06 Reviewing the imported WordPress site 37:40 Editing the site with Elementor 39:18 Fixing global colors + fonts 41:12 Designing the header & footer with XPro 44:25 Outro You’ll learn how to use Claude to plan your website, generate a beautiful design, structure your pages, improve your copy, and then customize everything inside Elementor. The goal is simple: use AI to speed up the design process, but still keep the flexibility and control of WordPress. Novamira is designed for development and staging environments, and their own site recommends using it with backups because it gives AI powerful access to your WordPress installation. By the end of this video, you’ll understand how to use Claude Design, WordPress, Elementor, and Novamira together to build a modern AI-powered website workflow. What You’ll Learn How to use Claude Design to make a website How to connect Claude with WordPress using Novamira How to use Claude with Elementor How to turn an AI website design into a real WordPress website How to customize your AI website with Elementor How AI can speed up WordPress web design Why WordPress and Elementor are still useful in the AI website era This is the future of building websites: Claude helps you design faster, Novamira connects Claude to WordPress, and Elementor gives you the freedom to edit and customize everything.