AI

I Built a WordPress Website in 2026 Using Claude Design & Elementor

Darrel Wilson
Darrel Wilson•Jun 12, 2026

Why It Matters

The approach gives agencies a scalable way to produce custom WordPress sites with minimal manual design, accelerating time‑to‑market and reducing costs while preserving full element control for clients.

Key Takeaways

  • •Claude Design adds AI-driven design system to WordPress builds
  • •Importing AI sites retains Elementor modules for full editability
  • •Use designmd.ai or GetDesignMD for ready-made color palettes
  • •Prompt variations (generic, custom, screenshot) affect site complexity
  • •Workflow cuts design time, lowers credit costs, streamlines client delivery

Summary

The video demonstrates how to build a full‑featured WordPress site in 2026 by leveraging Claude’s new Design system and Elementor’s drag‑and‑drop builder. Claude Design lets users define colors, fonts and UI components in a design system, then generate an AI‑crafted website that can be exported directly into WordPress.

Once imported, the site retains Elementor’s native modules—buttons, text blocks, columns—so editors can manipulate each element as if the site were built manually. The presenter shows how to pull ready‑made palettes from designmd.ai and GetDesignMD, paste them into Claude, and generate a prototype with a single click, dramatically cutting design iteration time.

Examples include a “Genesis” blue‑purple system and a luxury “Lamborghini” yellow‑black scheme, both applied to a real‑estate prototype called Wilson Estate. The creator also shares three prompt strategies—generic, custom prompt, and prompt with a screenshot—plus a ready‑to‑copy prompt template that embeds business details and SEO keywords for higher search relevance.

By combining Claude’s AI generation with Elementor’s flexibility, developers can deliver client‑ready sites faster, lower AI credit expenses, and maintain full control over styling and content. This workflow promises to reshape freelance and agency web production, making AI‑assisted design a practical, cost‑effective alternative to traditional hand‑coding.

Original Description

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

Comments

Want to join the conversation?

Loading comments...