I (ACTUALLY) built a WordPress website in 2026 using Claude Design and Elementor
Visit Claude Design:
https://claude.ai/design
Import design to WordPress:
https://hostinger.com/darrel10
Get NovaMira for free:
https://www.darrelwilson.com/novamira
Download Claude:
https://claude.com/download
In this web design tutorial with Claude AI, I'll show you how to create a complete website using Claude AI, build a professional design system, and then import that site into WordPress to fully customize it with Elementor.
Websites mentioned:
https://designmd.ai/explore?page=1
https://getdesign.md/
Evernote Prompts (migrated to Tiberium):
https://tiberium.app/p/2FwUcExQQqN2
In this tutorial, you'll learn how to use Claude Design to create a website and then import that design into WordPress with Elementor to fully customize it.
Instead of using a basic AI website builder where you have to modify prompts repeatedly, this workflow combines the best of both worlds: Claude helps you create a modern and clean web design, while WordPress with Elementor gives you complete control over the final site.
We'll also use NovaMira to connect Claude to WordPress. NovaMira allows AI agents to access WordPress via MCP, enabling tools like Claude to work directly with your WordPress environment instead of just providing suggestions or code snippets. According to NovaMira, it can provide access to WordPress files, database queries, WP-CLI commands, PHP execution, plugins, themes, and page builders like Elementor.
In this video, I'll show you the entire process: using Claude Design to create your website's structure, connecting Claude to WordPress via NovaMira, and using Elementor to edit and customize the page. It's perfect for beginners, web designers, freelancers, agencies, and anyone who wants to build WordPress sites faster using artificial intelligence.
Timestamps
0:00 Introduction
0:37 Why editing only in Claude is complicated
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: getdesign.md
5:37 Pasting a design system into Claude
6:28 Creating a second design system (Lamborghini)
8:05 Creating your first website with AI
8:25 The 3 ways to create a website
9:02 Method 2: Using a pre-made prompt
9:31 Method 3: Screenshot method
10:08 ThemeForest + Go Full Page Screenshot extension
10:58 Free prompts (Evernote link)
12:18 Completing the prompt
12:38 Adding SEO keywords
13:01 Defining the Design and Page Direction
14:30 Running the Prompt
15:23 Demo with Screenshot (Essentials Theme)
16:28 Reviewing the Finished Real Estate Website
17:51 Reviewing the Created Site with Screenshot
19:22 Summary Before Moving to WordPress
19:44 Setting Up Hosting with Hostinger
19:59 Choosing a Plan (Business Recommended)
20:37 Billing Period
21:02 Discount Code: Darrel10
21:28 Creating an Account and Making a Payment
22:06 Hostinger Questions and WordPress Installation
23:56 Verifying Domain and Account
24:40 Logging into Your WordPress Site
25:51 Why We Install Plugins
26:16 Installing the Astra Theme
26:38 Installing Elementor and WPForms
27:27 Installing XPro
27:53 Why Use XPro (Free Header and Footer Builder)
28:38 Installing the Nova Mirror Plugin
29:26 Adjusting Elementor Settings
30:35 Installing Node.js
31:36 Connecting WordPress with Claude
32:30 Downloading Claude Desktop
32:55 Editing the Connection Settings
34:11 Downloading the Project in ZIP Format
34:29 Import Prompt (Evernote Link)
35:13 Importing the Site to WordPress
36:06 Reviewing the Imported WordPress Site
37:40 Editing the Site with Elementor
39:18 Correcting Global Colors and Fonts
41:12 Designing the Header and Footer with XPro
44:25 Conclusion
You will learn how to use Claude to plan your website, create an attractive design, structure your pages, improve your text, and then customize everything within it. from Elementor. The goal is simple: to use AI to accelerate the design process while maintaining the flexibility and control of WordPress.
NovaMira is designed for development and staging environments. Its own website recommends using backups because it gives the AI advanced access to your WordPress installation.
By the end of this video, you'll understand how to combine Claude Design, WordPress, Elementor, and NovaMira to create a modern, AI-powered website creation workflow.