How to convert a Claude Design to WordPress

What output did Claude Design give you?

Claude creates two kinds of output, and each takes a different route. Check which one you have before you start, because it decides how long the conversion takes.

What Claude gave you	What it is	Route
HTML artifact	A self-contained .html file: the code, styles and scripts are all inside it.	This article. It is already flat HTML, exactly the input the converter needs.
React artifact	A component. The page only appears after JavaScript runs, and the HTML around it is an empty element the app mounts into.	The Lovable walkthrough: the same kind of input, the same extra step.

If you are not sure, open the file and look inside the <body>. If you see your headings and paragraphs there, you have an HTML artifact and you are in the right place. When the body is one empty <div> and a script tag, you have the other kind.

Export from Claude Design into a folder, images included

The input is always a folder on your disk. The address of a live site is not a supported input, and that is on purpose. A copy of a published page keeps only the rendered result and loses what the source file knows.

So export the design from Claude (download the artifact), create a folder and save the file in it as index.html. If the design links to images that are not inside the file, put them next to it, in the same relative places the code expects.

mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images        # if the design uses any images

One page, or more?

One artifact is one page, and a one-page site converts without any trouble. It becomes the front page of the theme. If you want a site with About and Contact pages, ask Claude for those too and save each one as its own .html file in the same folder. File names matter: the analysis reads them and understands a file called blog.html or about.html by its name.

If you stay at five files or fewer, the whole conversion fits in the free tier.

What your computer needs to convert a Claude Design to WordPress

The shorter route also runs on your machine, and the requirements don’t shrink. The browser and the temporary WordPress are there to check the result, not to produce it:

• Node 20 or newer and Python 3 with the Playwright and Pillow packages.
• Docker with the docker compose command. It starts a temporary WordPress on your computer, and the converter installs the theme there before you see it.
• php-cli, because every PHP file goes through a syntax check before it goes into the ZIP.
• jq, curl, bash and tar. The target WordPress must be version 6.6 or newer.

The first step checks all of this. It separates what it can install by itself inside your own folders from what you have to decide. It won’t install Docker for you unless you ask.

Run the Claude Design to WordPress conversion

Claude Code

/plugin marketplace add iOSDevSK/html2wp-cc-plugin
/plugin install html2wp@html2wp

python3 -m playwright install chromium

Codex

codex plugin marketplace add iOSDevSK/html2wp-codex-plugin
codex plugin add html2wp@html2wp

Then, from anywhere, type:

/html2wp:html2wp

convert ./my-site

The folder path is the whole instruction. You write no config file and you don’t choose a build command. In Codex, type convert ./my-site with html2wp. If you would rather not work in a terminal, you can open the same folder in the html2wp desktop app (a guide with screenshots).

Flash takes about 30 minutes and Full about an hour, depending on the number of pages and how fast your computer is. A one-page artifact sits at the shorter end, but the checks always run in full, however small the input.

What it decides for you, and what it asks

Before it generates anything, it measures your files. It lists the pages and works out which parts of the code are shared and which are unique. It also finds the design tokens, anything that looks like a blog and which pages stand alone. Then it writes down what it plans to do and converts according to that plan.

A generated design often runs into two things:

• Every design variant is kept. If your pages don’t share the same header, it doesn’t pick a winner and flatten the rest. Instead it creates a template part for each variant and connects every page to the one it actually used. Artifacts from different Claude chats often differ more than you remember.
• Curly braces in your text survive. The intermediate step uses a JSX-like format. Otherwise a JSON or CSS sample in your text would break the build or show up on the page as {. The converter handles them, so the braces stay braces on the page.

Repeating groups, for example cards, testimonials or an FAQ, are saved as collections instead of hard-coded markup. Because of that, you can really edit them later, and they don’t just look editable.

The review you cannot skip

The converter puts each page into one image next to its original, and you read every one from top to bottom.

In one conversion, a section lower down the page was missing, and the pixel comparison showed a difference of only 0.4%, so it passed the check. By their nature, numeric checks cannot see three kinds of defect. The first is a control that looks perfect but does nothing. The second is a value hard-coded from the one page a template came from. The third is anything that only shows up after you scroll, click or submit a form.

Also check whether you can edit the content. A page can match to the pixel, and yet nobody can edit its FAQ or feature grid from wp-admin. It has happened, and this review caught it, not any automated check.

Editing after a Claude Design to WordPress conversion: theme, Visual Edit or page builder

Two files land in your folder: the theme ZIP and, next to it, CONVERSION-REPORT.md. The report lists what the conversion covered, what the review found and what is still open. You install it like any WordPress theme (Appearance → Themes → Add New → Upload Theme).

The theme stands on its own. Pages, blog, forms, menus, SEO and redirects are all its own code. It needs no plugin to run and never talks to our server. Blog posts are written in the block editor, while page text stays in the HTML. To edit pages without code there are two options: Visual Edit and a page builder.

A page builder is a good choice when the design is only a starting point. It is a bad one when the design is what you deliver. If you are converting so that the generated design survives in WordPress, rebuilding it as widgets cancels the reason you started. But if someone else will redo the layout next quarter, their experience with Elementor may be worth more than a faithful design.

Lite or Pro, if you choose Visual Edit

The AI chat runs on your own API key. We don’t sell you tokens, and you settle what they cost with your provider.

Price, and what the conversion refuses

Free for everyone, with no key and no sign-up: three conversions of five pages each and five re-runs in total. Both numbers count per IP address, so an office with one address gets one allowance. The free tier is for trying the tool, personal sites and non-commercial work.

A Pro licence removes the page limit and makes conversions and re-runs unlimited. It also unlocks the step that turns a shop into WooCommerce. That step is never free: the app refuses a free conversion of a site with a shop outright, rather than doing half of it. You can buy Pro monthly or yearly on the pricing page, and during the beta the first payment is 30% off.

One caveat: this is a beta. The checks catch most differences, not all of them. That is why reading each page next to its original is part of the process and not an optional polish. It is also why you should first convert something of your own for free, and only then trust it.

A step-by-step guide to the whole process is in the documentation for the html2wp app. If your artifact is React, the Lovable to WordPress guide describes that route.