WordPress and Claude Integration: The Hybrid Build | Hawk Academy

Guide

WordPress and Claude Integration: The Hybrid Build

Design the site in Claude, run it in WordPress. This is the method, the order to do it in, and the three things that catch people out.

What goes wrong when you let Claude finish the job?

What goes wrong is the last ten per cent. Claude gets a design ninety per cent right in a single pass, and then you try to prompt your way through the rest. Move that heading up. No, not that far. Make the gap smaller. Forty prompts later the page is worse than it was at prompt one, and you have lost an afternoon.

The failure is not the model. It is that you are describing a visual change in words to something that cannot see the page the way you can. Nudging a margin is a mouse job. It has always been a mouse job.

What is the hybrid build?

The hybrid build is using Claude for the pass it is good at and WordPress for the pass it is not. Claude designs the page in one go. The fiddling happens afterwards in your page builder, with a mouse, in about a tenth of the time.

You keep what WordPress is genuinely good at, which is letting a non-technical person change something without asking anyone. You skip the part of WordPress that is slow, which is building a decent-looking page from a blank template.

How do you run the hybrid build?

Run it in five steps, in this order. The order is the method: every step that gets skipped shows up as rework later.

  • Brief the design in one pass. Give Claude the whole page at once: purpose, audience, sections, the copy if you have it, and your existing brand colours and fonts. A whole-page brief produces a coherent page. Section-by-section briefing produces a page that looks assembled.
  • Take the output as a reference, not as the site. What comes back is a design you are going to rebuild, not a file you are going to upload. Treat it as the drawing.
  • Rebuild it in your page builder, section by section. This is the step people try to skip, and skipping it is what causes every problem below.
  • Fix the spacing and sizing with the mouse. The part you were trying to prompt. Ten minutes.
  • Check it on a phone before you publish. A design that came from a wide canvas will have decisions in it that a narrow screen disagrees with.

What catches people out?

Three things catch people out, and all three come from the same instinct: treating Claude's output as a finished site rather than a design to rebuild.

Rebuild sections as native page-builder elements, not pasted code blocks. Dropping raw code into a custom HTML block looks like it worked. It renders, it looks right, and it is now a black box: nobody can edit it in the builder, it ignores your global styles, and it will not respond to your theme's spacing controls. Rebuild each section using the builder's own heading, text, image and button elements. It takes longer once and saves you every time after.

The header and footer are usually missing, so bring them across deliberately. Claude's first pass tends to produce the page body and stop. Your site navigation, your footer, your legal links and your contact details are simply not there. Nothing errors, because a page without a header is a valid page. Check for them explicitly before you publish rather than discovering it from a visitor.

Watch for layout wrapping when the design lands in the builder. A row that sat in three neat columns in the design will sometimes wrap to two and one once it is inside your theme's container width. It is a width mismatch between the design canvas and your actual content area, and it is easy to miss on a desktop screen because it often only shows at certain widths. Resize the browser window slowly and watch the rows.

Which tools should you use for the bridge?

Use your existing page builder and nothing else, for now. There are plugins that claim to move a design straight into a builder, and we are not naming any of them here until we have tested them properly and know they are stable.

The method above is deliberately tool-agnostic, which means it works in whatever builder you already have. That also means it cannot break when a plugin stops being maintained, which is the failure mode worth avoiding on a site you have to keep running.

Who is the hybrid build actually for?

The hybrid build is for anyone whose site has to stay on WordPress. If your business sells real stock, has people logging in, or has a team publishing several times a week, WordPress is doing real work for you and moving off it would cost more than it saves.

That does not mean accepting a site that looks like a template. It means using Claude for the design pass and keeping the platform that lets everyone else in your business do their job.

Not sure which you should be on? Take the 5-Question Test, which asks five questions about your business and tells you which platform fits.