Building a website used to mean wrestling with themes, nudging sections for hours, and fixing mobile spacing one headache at a time. This method flips that process. Claude AI creates the first draft, and WordPress gives you full control over the final result.
That split matters because AI is fast at design, but it gets clumsy when you keep editing tiny details through prompts alone. The cleaner workflow is to generate the site once, then move it into WordPress and edit it with Elementor.
Why this Claude and WordPress workflow works
The biggest mistake in AI web design is trying to finish the whole site inside the chatbot. After enough prompts, the design often drifts. Buttons get awkward, spacing breaks, and the mobile version starts to look worse instead of better.
The method shown here avoids that trap. Claude handles the heavy lifting at the start. It creates a full five-page site in HTML, with structure, copy, color direction, and imagery. Then WordPress takes over, so text, images, spacing, buttons, and sections can be edited in a visual builder instead of through endless prompt tweaks.
AI is strongest at the first draft. WordPress is where the real editing should happen.
That balance is what makes this approach useful for small businesses, freelancers, and anyone who wants a site live without hand-coding every block. You get the speed of AI and the control of a normal WordPress build.
In the walkthrough, the process is split into three steps. First, generate the design in Claude Desktop. Second, set up WordPress on a live domain. Third, import the design into Elementor and clean up the few things AI usually gets wrong.
A sample real estate site shows how polished the output can look. The homepage includes a strong hero section, service highlights, testimonials, listings, and a contact area. The demo used in the video is visible on the Wilson Estates example site. It looks far closer to a finished business site than the usual AI rough draft.
Step 1: Create the website in Claude Desktop
Claude Desktop is required for this workflow because the browser version does not support the MCP connection used later for WordPress. The first move is to install Claude Desktop and open the desktop app, not the web app.
Once Claude is open, the site starts with one detailed prompt. The structure in the walkthrough is simple but smart. It asks Claude to build a complete five-page business website in HTML, make it modern and professional, and shape the design around the business type. The example business is a Las Vegas real estate brand called Wilson Estates, with goals like generating leads, booking calls, and showcasing listings.
The prompt gets better because it includes SEO phrases early. That keeps Claude from filling the site with vague copy. In the real estate example, keywords like “real estate services in Las Vegas” and “Las Vegas realtor” guide the content. A dog groomer in Nashville would use local service terms instead. That small detail makes the output sound more like a business and less like filler text.
If you want the same base structure, the original setup uses this Evernote prompt note. The prompt also leaves room for design direction, so you can ask for a split-screen layout, a specific color palette, or a more editorial homepage.
The five core pages in the example are:
- Home
- About
- Services
- Listings
- Contact
Claude can also create extra pages, such as a team page or portfolio page, if those are added to the prompt. In the demo, the app used Opus with adaptive thinking, but the free version can still generate sites. Expect the first pass to take about three to five minutes.
Review the first draft before you move on
The first version often looks better in a browser than it does inside Claude’s preview. In the walkthrough, images did not appear correctly in the app preview at first, but they loaded once the pages were opened in Chrome.
That first browser check matters because it tells you whether the structure is solid. In the example site, the homepage, about page, listings section, and contact form were already attractive. The listings page even included a filterable gallery. That is a strong starting point for a prompt-driven build.
Still, the site should be polished before it goes into WordPress. A short cleanup prompt helps:
- Fix design inconsistencies
- Make sure links work
- Debug the site for issues
- Correct any mobile menu problems
In the example, the mobile menu button text was missing. One polish prompt fixed it. That quick repair is worth doing now because it reduces problems later during the import.
The key is restraint. Make broad improvements in Claude, not endless micro-edits. If the layout is there and the pages work, stop. WordPress is where the detailed adjustments belong.
Step 2: Set up WordPress on a live domain
The walkthrough uses Hostinger’s WordPress setup page for hosting and domain setup. The recommended plan is Business because it supports up to 50 websites and uses NVMe storage, which is faster than the SSD storage on the Premium plan. Cloud Startup is framed as overkill for someone getting started.
There is also a coupon code, Darrel10, mentioned in the tutorial. The pricing example points out that a 12-month plan is the lower-cost entry point and still includes a free domain, while 48 months gives the largest discount.
After checkout, Hostinger walks through a standard setup flow:
- choose who the site is for
- create a website
- make WordPress login credentials
- claim the free domain
- enter owner details
- select the main audience location
- install WordPress
The setup also includes a small but important step: verify both your hosting account email and your domain email. Until that happens, WordPress may run on a temporary domain. The walkthrough warns that if verification is not completed within 30 days, the account can be refunded and closed.
Once the site is live, there are two ways to log in. The direct way is to type your domain followed by /wp-admin. The other option is through Hostinger’s panel, where the WP Admin button logs you in without re-entering credentials. That backup path is useful if you forget the WordPress password.
Install the theme and plugins Claude needs
After WordPress is running, the next step is the tool stack. The theme used in the walkthrough is Astra. It tested better than several other themes and works well as a clean base.
Then come the plugins. This stack is what makes the import process work:
| Tool | What it does |
|---|---|
| Astra | Provides the base theme |
| Elementor | Builds and edits the page layout |
| WPForms | Handles the contact form |
| XPro Theme Builder for Elementor Free | Creates custom headers and footers |
| XPro Elementor Addons | Supports the XPro builder |
| NovaMira | Connects WordPress and Claude, and helps Claude understand Elementor |
The standout plugin is NovaMira. It is not installed from the standard WordPress repository. Instead, you download the ZIP file, upload it manually in Plugins -> Add New -> Upload Plugin, then activate it.
XPro matters for a practical reason. Free Elementor does not build custom headers and footers on its own. XPro fills that gap, and it does it in a way Claude handles better than most theme customizers. According to the walkthrough, theme customizers caused more errors during AI imports than this plugin-based method.
Step 3: Prepare Elementor and connect Claude to WordPress
Before importing anything, Elementor needs a couple of setting changes. First, the Atomic Editor is turned off. It is an experimental feature and is not the best fit for this workflow. Second, the “Container” option under Elementor Features must be active.
That second setting matters because Claude tends to use the older section and inner-section structure unless it is pushed toward Flexbox containers. Containers are the current method in Elementor, and they reduce layout issues later. If you skip that setting, Claude may build with an older structure that is harder to fix.
The walkthrough also installs Node.js on the local machine. That sounds unrelated, but it solves a real issue. Sometimes Claude builds parts of a project in React instead of plain HTML. When that happens, exports can fail unless Node.js is installed. The install is simple, and the tutorial treats it as a safety net that smooths out the transition.
Next comes the Claude connection. In WordPress, NovaMira generates the configuration needed for Claude Desktop. Inside the plugin settings, AI abilities are enabled for the site, and an application password is created. Then the JSON configuration for Claude Desktop is copied.
Back in Claude Desktop, that JSON goes into the claude desktop config file under Developer settings. The existing file contents are deleted, the new config is pasted in, and the file is saved, not “Save As.” After restarting Claude, the MCP shows as running. That is the signal that WordPress and Claude are connected.
If you want another reference for that connection flow, this Claude to WordPress MCP walkthrough covers the same idea from a narrower angle.
Import the design into Elementor
With the connection live, Claude can convert the HTML site into a WordPress build. This part uses a second prompt, and the wording matters.
The prompt tells Claude to create a new menu for the pages, set the homepage, convert the design for Elementor, use native Elementor elements instead of HTML widgets, create the header and footer with XPro, save those templates in the XPro library, and use WPForms on the contact page. The site URL is also included with the full https version so the install lands in the correct location.
During the first run, Claude may ask for permission to use actions tied to the WordPress site. The walkthrough says to choose “Always allow.” It may also fail to understand NovaMira the first time. If that happens, repeat the prompt and explicitly say NovaMira should help with Elementor. In the demo, that solved the issue.
The import took around 12 minutes in the example. When it finished, most of the site had been rebuilt with native Elementor elements, which is what you want. Native elements are editable. Random HTML blocks are not.
Still, the first WordPress version was not perfect. The header was missing. The footer was half there. A few sections were wrapping badly. One testimonial area had fallen back to a custom HTML widget instead of a native Elementor block.
That is normal for this method. Claude gets most of the site into place. Then a short cleanup pass finishes the job.
Fix the common problems after import
The missing header and footer usually come from XPro settings, not from a total failure. In the walkthrough, the templates existed, but one was saved as a draft and the display conditions were not applied correctly. Claude was asked to debug the issue and make sure both templates displayed and were visible in the library. After that, the header appeared and the footer loaded as well.
The layout issues came from Flexbox settings. Claude often wraps containers when it should not. That creates broken rows, stacked columns, and awkward spacing. The fix is usually small. Open the container, change Wrap to “No Wrap,” and realign the content. In the hero section, a quick vertical alignment change cleaned up the spacing. The same fix solved multiple sections farther down the page.
Images also need attention. Many of the AI-generated images are pulled from URLs rather than stored in the WordPress media library. In the demo, a background image from Unsplash was uploaded manually and applied to a section to improve the look. That is a clean way to replace temporary visuals with branded assets.
The one thing to watch for is leftover HTML widgets. Claude usually tries to use Elementor’s native blocks, but sometimes it creates a custom HTML widget to mimic a design it cannot rebuild properly. In the example, one testimonial section had to be replaced manually with a native Elementor testimonial block.
That final pass is where the site becomes yours. The design is already there. The cleanup is more like tuning a car than building one from scratch.
Final thoughts
This workflow works because it gives each tool the job it handles best. Claude creates the design fast, and WordPress gives you the control AI still lacks.
The result is a faster path from blank screen to live site, with fewer prompt battles and a cleaner edit process. If you want AI to help build your website in 2026, this is one of the clearest ways to do it without giving up control of the finished product.
