How to Transfer a Claude Design to WordPress (Beaver Builder AI)

Hey everyone! If you’ve been designing pages in Claude, you’ve probably had this thought: the design looks great, but how do I transfer a Claude design to WordPress without rebuilding it by hand?

Well, I have good news for you. Beaver Builder AI gives you two ways to do it. And the best part is both options let you fully edit the page like any other Beaver Builder page.

The first method I’ll walk you through uses a Design Kit. It’s the quickest way to get the page over. The second method uses the Beaver Builder AI MCP connector, and it converts the design to WordPress with native Beaver Builder modules: rows, columns, boxes, and so on.

I walk through both methods step by step in the video below so you can follow along. Everything in this post follows the same steps, so you can also read along or skip to the part you want.

TL;DR: Two ways to move a Claude design into WordPress with Beaver Builder AI. Design Kits are fastest. The MCP connector gives you native modules. Both are fully editable and work for your own site or a client site. Want to test it for yourself first? Try Beaver Builder AI free, no download required.

In this post

• What you need before you start
• Method 1: Design Kit
  • Step 1: Download the Design Kit
  • Step 2: Package the design in Claude
  • Step 3: Import the kit into WordPress
  • Step 4: Preview the page
  • Step 5: Edit it like any Beaver Builder page
• Method 2: MCP connector
  • Step 1: Open the MCP Connection settings
  • Step 2: Check the site requirements
  • Step 3: Add the connector in Claude
  • Step 4: Ask Claude to build the page
  • Step 5: Preview and check the modules
• Which method should you use?
• FAQ
• Try it on your site

What you need before you start

Here’s what I had installed for this tutorial. Get these set up first and both methods go a lot smoother.

• A WordPress site
• The Beaver Builder plugin
• The Beaver Themer plugin
• The Beaver Builder AI plugin. I’m on version 1.0.1, which needs Beaver Builder 2.11 or later.
• The MCP Adapter plugin (Method 2 only). Never set up the connector before? The how to set up Beaver Builder AI post walks through the install.
• A theme. I used the Beaver Builder theme and child theme.

Don’t have Beaver Builder yet? You don’t have to buy these individually. Most of them come bundled with a Beaver Builder plan, and the pricing page shows which plans include Beaver Builder AI. If you’re already a customer, the downloads are on your My Account page.

The design I’m moving is a sushi restaurant page built in Claude. Any page you design in Claude works the same way. Coming from Lovable instead? Same idea, different tool: how to convert a Lovable design to WordPress.

Method 1: Transfer a Claude design to WordPress with a Design Kit

This is the easiest and quickest way to do it. Five steps. (Not sure how a Design Kit differs from a Design System? Here’s the difference.)

Step 1: Download the Design Kit

In your WordPress dashboard, click Beaver Builder. That opens the Design Systems page, and you’ll see three tabs at the top: Design Systems, Design Kits, and Import a Kit.

Click Import a Kit, then click Download Design Kit. That gives you a zip file.

Step 2: Package the design in Claude

Go over to Claude and drop that Design Kit zip into your chat with the design. Then ask Claude to package it up. I used the microphone because it’s easier than typing, and said something like this:

Hey Claude, I just dropped in the design kit for you. Can you read the files in there and package up this design so I can transfer it into my Beaver Builder website? Let me know if you have any questions.

Claude might ask you a question or two along the way. Pick whatever fits your use case. When it’s done, download the zip it gives you.

Step 3: Import the kit into WordPress

Back in WordPress, click Beaver Builder to open Design Systems, then click the Import a Kit tab. Drag the zip into the import box and click Import.

Mine imported one page and 24 images. If your design has multiple pages, the kit can package those up too.

Want to see the images? Open the Media Library. Every photo from the design was pulled in for you.

Step 4: Preview the page

Beaver Builder AI drafts a page for you. Click Preview and take a look.

It looked just like the original design. All the content, all the sections, and even the animation effects came through.

You’ll notice your theme’s header and footer showing above and below the page. If you don’t want those, click Edit Page, find Template on the right side, and switch it from Default to No Header and Footer. Save the draft and view the page again.

Step 5: Edit it like any Beaver Builder page

Now for the question everyone asks. Can you edit it once it’s in WordPress?

Yes. With Design Kits, the sections come in as custom HTML modules. Click on one and you can type, delete, bold, italicize, change the heading level, and drag and drop.

Want more control? Click the three dots on a module and choose Styles. That opens a panel with a few tabs across the top:

• Content is where you edit the text, links, and images, and swap out icons. On the hero section that’s the eyebrow, the headline, the description, the button, and the photos.
• Design System applies your site’s design system settings.
• Code gives you the HTML, CSS, and JavaScript for that section if you want to customize it further. (The Design and Code tabs are on by default in 1.0.1. If you don’t see Code, turn on Code Settings in Beaver Builder AI > Settings.)
• Advanced has the things you’d expect from any Beaver Builder module: spacing, breakpoint visibility, and so on.

You can duplicate and delete sections too, just like any Beaver Builder module.

Happy with it? Click Done, then Publish. That’s it. Your Claude design is now a WordPress page.

Method 2: Transfer a Claude design to WordPress with the MCP connector

This method connects Claude to your WordPress site through the Beaver Builder AI MCP connector. Then Claude builds the page for you using native Beaver Builder modules.

This is the one to use if you want a page built with real rows, columns, and box modules, especially if you’re handing the site off to a client.

Step 1: Open the MCP Connection settings

In WordPress, go to Settings > Beaver Builder AI, then click MCP Connection.

You’ll see two options: connect via Beaver Builder AI or connect manually. I used connect via Beaver Builder AI. There’s also a short video on that page if you’ve never done this before.

Step 2: Check the site requirements

The page gives you a checklist. Make sure every item is done before you move on.

• Your site is publicly reachable over HTTPS. It can’t be behind a login.
• You have an active Beaver Builder license.
• The MCP Adapter plugin is installed and active. There’s a link on the page if you still need it.
• Permalinks are set to a pretty structure. Go to Settings > Permalinks and pick Post name. Fresh WordPress installs sometimes default to Plain, so check this one.
• You’re on WordPress 6.9 or later.

Once those are green, click Authorize.

Step 3: Add the connector in Claude

Copy the MCP URL from the Beaver Builder AI page. Then open Claude.

Click the plus button, go to Connectors, and click Add Connectors. Choose Add Custom Connector. Name it whatever you like (I call mine BBAI MCP), paste the URL, and click Continue. Claude asks you to authorize it, and then it’s ready.

Not sure it worked? Click the plus button again, hover over Connectors, and click Manage Connectors. Your connection should show as connected.

On the WordPress side, 1.0.1 added a Test Connection tool on the MCP Connection page that checks the connection live from your site. If it fails, the page now has host-specific instructions too. Some hosts, like WP Engine, strip the authorization header that the connector needs, and the fix is spelled out right there.

Step 4: Ask Claude to build the page

First thing I always do after connecting is ask Claude a simple question: “Can you see my site? Are you connected?” It confirmed it was live and had the full Beaver Builder AI tool set.

Then I gave it the build prompt. Something like this:

Use the MCP connector with Beaver Builder AI. Build me a new WordPress page with a new design system and put it in drafts so I can review it. Use native modules like columns, rows, and the box module. Try not to use the custom HTML module if you don’t have to. If you do need it, we can have a hybrid version.

One setting worth knowing before you prompt: in Beaver Builder AI > Settings you can choose whether the AI builds native sections with rows and columns or with box modules. I left it on the default for this one.

Here’s the nice part. If Claude runs into a section that native modules can’t handle well, it tells you. On my page it flagged one section and asked. I told it to build that one section with the custom HTML module and everything else native.

Then let it run. This takes a few minutes.

Step 5: Preview and check the modules

When Claude says the page is done, it’s sitting in drafts with a preview link. Click it, then click Preview.

Mine came out looking just like the original design. Switch the template to No Header and Footer the same way you did in Method 1 if you want a clean page.

Now open the page in Beaver Builder and click around. Open the Outline panel and you’ll see columns, boxes, flex rows, text editors, headings, buttons, and photo modules. All native.

Edit them the way you edit any Beaver Builder page. Move things, delete things, drag and drop, stack on more standard modules. And when it’s ready, click Publish.

Two small things 1.0.1 does for you here without asking: it corrects low-contrast text and button colors on pages built by a connected AI, and it repairs broken image links the same way the Beaver Builder AI chat already does.

Which method should you use?

Both transfer a Claude design to WordPress and both are fully editable. Here’s how I think about it. (For the bigger picture on Chat, MCP, and Design Kits, see three ways to build with Beaver Builder AI.)

Use a Design Kit when you want the page over fast and you’re fine editing custom HTML modules. It’s the least setup.

Use the MCP connector when you want native Beaver Builder modules from the start. It’s a better fit for client sites and for pages you’ll keep building on with standard modules.

If you run an agency, this is a real workflow saver. Design in Claude, transfer it to WordPress, edit it in Beaver Builder, and hand it off to the client. Pair it with a Design System and every new page Beaver Builder AI builds after that stays on brand.

FAQ

Try it on your site

Want to transfer a Claude design to WordPress on your own site? See Beaver Builder AI before you install anything. Try it free. Drop in your name and email and you get a link to a live playground. Nothing to download.

Already a Beaver Builder customer? Grab the Beaver Builder AI plugin from your My Account page. Not sure which plan includes it? The pricing page lays it out.

Setup docs live at docs.wpbeaverbuilder.com/bb-ai. For what’s new, read the 1.0 release post and the 1.0.1 update, which shipped the Test Connection tool and the native layout setting I mentioned above.

Tried it? I’d love to hear how it went. Send us your feedback.