[Claude + Stitch = WordPress] – How To Build WordPress Elementor Website using FREE AI Tools

Want to design a professional WordPress homepage using AI without spending a single dollar? In this step-by-step guide, I’ll show you exactly how to combine Google Stitch, Gemini AI Studio, and Claude AI to generate a fully working Elementor layout no paid tools, no premium plugins required.

This is the written version of the full video tutorial. Let’s dive in.

What You’ll Need (All Free)

Before we start, make sure you have the following tools ready:

• Google Stitch AI-powered UI design generator by Google
• Google AI Studio (ai-studio.google.com) for prompt refinement using Gemini
• Claude AI (claude.ai) for generating Elementor-compatible JSON code
• WordPress with the free Elementor page builder plugin installed

No credit card. No paid subscriptions. Just free tools working together.

Step 1: Write Your Initial Prompt

The first step is to write a basic prompt describing the website you want to build. For this tutorial, we’re designing a homepage for a plumbing business.

Your prompt doesn’t need to be perfect at this stage. Just include:

• The type of business
• The main services offered
• Any specific sections you want (hero, services, contact, etc.)

Example basic prompt:

Design a website for a plumbing business. Main services include emergency plumbing, pipe repair, drain cleaning, water heater installation, and bathroom fitting.

The more details you can add like your phone number, business address, tagline, and brand colors the better your final design will be. AI performs best when given rich, specific context.

Step 2: Refine Your Prompt Using Gemini AI Studio

A basic prompt will give you basic results. To get a high-quality design from Google Stitch, you need a detailed and well-structured prompt. This is where Gemini AI Studio comes in.

1. Go to ai-studio.google.com
2. Select the latest Gemini Flash model (fast and free) or Gemini Pro for more detail
3. Type: “Please write a detailed design prompt based on the following details:” and paste your basic prompt
4. Hit enter and Gemini will generate multiple refined prompt options
5. Pick the version that includes the most complete layout details hero section, service cards, CTA buttons, footer, etc.

Copy your chosen refined prompt. This is what you’ll feed into Google Stitch.

Step 3: Generate Your Website Design in Google Stitch

Now it’s time to bring your design to life visually.

1. Open Google Stitch
2. Make sure to select the Web version (not mobile app)
3. Paste your refined prompt into the input field
4. Hit enter and wait for Stitch to generate the design

Google Stitch will produce one or more design variations. You can also give it follow-up prompts to improve the design further — for example, asking it to adjust colors, add sections, or change the layout style.

Understanding the Design.md File

One of the most powerful features of Google Stitch is the design.md file it generates alongside your design. This markdown file contains:

• Color palette and hover states
• Button styles
• Typography guidelines
• Layout structure

This file is critical for the next step because it gives Claude AI the full design context it needs to generate accurate Elementor code.

Step 4: Export Your Design from Google Stitch

Once you’re happy with a design:

1. Click on the design you want to export
2. Click the Export button
3. Select Code to Clipboard to copy the full HTML code

Also, click on Edit → design.md and copy that content separately. You’ll need both the HTML code and the design.md file for Claude.

Step 5: Generate Elementor JSON Using Claude AI

This is where the magic happens. Claude AI will take your design files and convert them into an Elementor-compatible JSON format that you can import directly into WordPress.

1. Open claude.ai
2. Select the Claude Sonnet model (or Claude Opus for higher accuracy)
3. Paste your design.md content first and let Claude read it
4. Then paste the HTML code from Google Stitch
5. Use the following prompt:

Attached is the design.md and attached is the HTML code. I want you to generate Elementor JSON format so I can import it in WordPress Elementor. Output JSON only no explanations, no markdown formatting.

6. Hit enter and wait for Claude to generate the JSON output

Step 6: Import the JSON into WordPress Elementor

Now let’s take that JSON code and bring it into your WordPress site.

1. Go to your WordPress Dashboard
2. Navigate to Pages → Add New
3. Name your page (e.g., “Home Page”) and click Publish
4. Click Edit with Elementor
5. Inside Elementor, click the Template icon (folder icon)
6. Click the Upload arrow (import icon)
7. Click Select File and upload the JSON file downloaded from Claude

Troubleshooting: JSON Import Error

If you get an error like “The source does not support import”, don’t worry; this is common. It happens because Claude didn’t have full context on Elementor’s JSON structure.

Here’s how to fix it:

1. Download a real Elementor template JSON from the official Elementor Template Kit
2. Go back to Claude and upload that template file
3. Say: “Please read this for more context. The JSON you provided is not working. Please fix it using this template as a structural reference.”
4. Claude will generate a corrected V2 JSON
5. Download the new file and try importing again

This second attempt should work correctly.

Step 7: Review and Fine-Tune Your Elementor Layout

Once imported successfully, your Elementor page will display a layout very similar to your Google Stitch design, including the navigation, hero section, color scheme, buttons, and content sections.

The result won’t be pixel-perfect, but you’ll be 70–80% of the way there, which is a massive head start compared to building from scratch.

From here, you can:

• Swap placeholder images with real photos
• Update text with your actual business content
• Fine-tune spacing, fonts, and colors inside Elementor
• Add animations or interactive elements

Bonus: What Is Elementor MCP?

If you want to skip the JSON export and import process entirely, there’s an even more powerful method Elementor MCP (Model Context Protocol).

With Elementor MCP, you can connect Claude directly to your Elementor editor and generate complete page layouts through a simple chat no downloading, no uploading, no manual JSON handling.

If you’d like a full tutorial on Elementor MCP, comment “Elementor MCP” below the video and I’ll create a dedicated guide for it.

Final Thoughts

Building a WordPress homepage used to take hours of manual design work. With this AI-powered workflow Google Stitch for design, Gemini for prompt refinement, and Claude for code generation you can go from a basic idea to a working Elementor layout in under 15 minutes, completely free.

The key to getting the best results is quality input. The more detailed your initial prompt, the better your design will be. Add real business details, specific services, brand colors, and contact information for the most accurate output.