Visit Claude: https://claude.ai/design
Import Design To WordPress: https://www.darrelwilson.com/hostinger
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.