How to Turn a Claude Design Export into a WordPress Site

Claude Design is a quick way to get a site’s structure, content and look right. What it gives you is HTML: good to look at, hard for a team to edit. This guide shows how Claude Code, connected to WordPress through Fabrement, turns that export into a real WordPress site of native Gutenberg blocks. It follows one real build: our own 8-page agency site, which we expected to take half a day and which took less than 2 hours.

The whole build on video: the Claude Design site, one prompt, and the WordPress result side by side.

Key takeaways

You need a WordPress site with the free Fabrement plugin, Claude Code connected to it over MCP, and the HTML export of your Claude Design project.
The agent treats the HTML as the design source and rebuilds each section as a native Gutenberg block with editable fields. Nothing is pasted in as raw HTML.
Our 8-page site came out with a design system, header, footer, menus, a post type for case studies, a working contact form and SEO fields, in less than 2 hours.
Three lines in the prompt make a long run trustworthy: log every decision, check the result against the original, and list what could not be carried over.

Hand this to your AI first: fabrement.com/AGENTS.md. One link, and your agent knows what Fabrement can do on your site and how to connect to it.

Requirements

What	Needed
WordPress	A site you administer, WordPress 6.9 or newer with HTTPS, and Fabrement installed and signed in. A fresh install is easiest.
PHP	PHP 8.0 or newer for the plugin. Use 8.2 or newer: older branches no longer get security fixes.
Claude Code	Connected to the site over MCP. Step by step: how to connect Claude to WordPress.
The export	Your Claude Design project as standalone HTML, CSS and JavaScript, as a zip.
Claude plan	Enough usage for a long session: our 8-page build kept Claude working for about an hour. Check your plan’s limits before you start.

The steps

1. Export the project from Claude Design

Export the project as standalone HTML and keep the files together in one zip: the pages, the CSS, the JavaScript and the images. Get the structure and the content right before you export. Changing a section’s purpose is easier in Claude Design than after the rebuild.

2. Connect Claude Code to WordPress

Install Fabrement on the WordPress site, sign it in, and connect Claude Code from Fabrement → MCP Connection. The Claude guide covers every way to connect, with the commands to copy.

3. Give it the zip and the prompt

Attach the zip in a new Claude Code session and send the request. This is the prompt from the video, with our names replaced by placeholders:

The attached zip is a static website (HTML + CSS + JS, [number] pages).

Turn these plain HTML, CSS and JS files into a real WordPress site, using the Fabrement MCP server [your server name].

Work fully autonomously: don't ask questions and don't wait for confirmations. Resolve every ambiguity yourself and log each decision for the final report. This is a fresh install, so you may create, overwrite or delete anything on it.

Deliver the same design as native Fabrement blocks: a design system built from the site's tokens, header and footer, menus, all pages, a custom post type for [repeating content, such as case studies] with its archive, a working contact form, and SEO. Publish the pages as the last step, after verification.

Check every page on desktop and mobile against the original and fix the differences. When done, give a short report: what was built, the decisions you made, and what couldn't be carried over and why.

On a site that is already live, remove the line that allows deleting anything, and ask for drafts instead of publishing.

4. Let it run, then read the report

The agent sets up the design system first, then builds the header, footer and each section as a block, assembles the pages, creates the post type, the form and the SEO fields, and compares every page with the original on desktop and mobile. Our build ran for about an hour on the clock. The report at the end lists what it built, every decision it made on its own, and what it could not carry over. Read that list before anything else: it tells you exactly where to look.

5. Review and publish

Check the pages on desktop and mobile. Ask for changes in the same chat, for example “make the hero shorter on mobile”, or edit text and images yourself in the WordPress editor: every block stays editable there.

Free plugin

Fabrement: the workplace for your AI agent

A free plugin for WordPress 6.9 or newer. Once your AI is connected, your agent can do all of this on your site.

Download Plugin

Why the prompt works

“Log each decision for the final report.” Without it, a long run either stops to ask every few minutes or guesses silently. With it, the agent keeps going and you review its decisions in one list at the end.
“Check every page against the original.” The agent compares its own work with the source before it reports back, which removes most of the “it said done, but it isn’t” moments.
“What couldn’t be carried over and why.” Ask for the gaps explicitly, or you get a confident “all done”. With this line you get an honest list of what to check yourself.

What comes out, and what does not

The pages look like the Claude Design version, but underneath they are WordPress: every section is a native Gutenberg block with fields for its text, images and buttons, all on one design system, so a block added later matches the rest. Repeating content, such as case studies or team members, becomes a post type with its own archive, and the contact form is rebuilt with Contact Form 7. What stays behind is app logic: logins, databases and other back-end features in the export are not converted.

Converting HTML from other tools works the same way. The landing page HTML to WordPress covers exports from Lovable, Bolt or v0 and plain static sites.

FAQ

Frequently asked questions

Do I need Claude Code, or does claude.ai work too?

Any Claude client connected to Fabrement can do it: claude.ai, the desktop app or Claude Code. We used Claude Code because a long build with a zip of files is most comfortable there.

Can Claude Design go straight into Elementor instead?

Fabrement does not build page-builder layouts. The agent builds native Gutenberg blocks, so the site has no page builder underneath, each page loads only the code of its own blocks, and every section has real fields your team can edit.

How long does it take?

Our 8-page site took less than 2 hours, about an hour of it the agent working on its own. Bigger sites take longer and use more of your Claude plan.

Can I do this on a site that is already live?

Yes, but start from a copy or a fresh install when you can. On a live site, remove the permission to delete anything from the prompt and ask for drafts: new pages stay unpublished until you approve them.

What does it cost?

The Fabrement plugin is free. Claude Code runs on your own paid Claude plan.

Sources

Fabrement steps from our own AGENTS.md (plugin version 1.5.0) and the plugin’s MCP Connection screen. The build shown is our own agency redesign, recorded on 21 October 2026; the prompt is the one used in the video. Checked on 22 October 2026. If a step has changed, tell us and we will correct it.