Themeisle Docs

Appearance

Designing WordPress Pages with Claude (WP Blocks Forge) ​

WP Blocks Forge lets you point Claude at your WordPress site and have it design a real page for you — not a screenshot, not a pile of static HTML, but valid, fully editable Gutenberg blocks built directly into your theme.

This guide walks you through everything: installing the plugins, connecting Claude, verifying the link, building your first page, editing it, iterating on the design, and how the global colors and fonts land in your theme Customizer.

Experimental feature. WP Blocks Forge is experimental and free for all ThemeIsle Agency customers while we gather feedback — just ask us to enable it on your account. Some details below may change as the product matures. Test on a staging site before using it on a live production site.

In this article

See it in action ​

Two short walk-throughs of Claude building and editing real WordPress pages through Blocks Forge:

What is WP Blocks Forge? ​

If you have ever asked an AI to "build a WordPress page," you have probably hit one of two walls:

  • The tool imports static HTML into WordPress. It might look fine on the front end, but you can't actually edit it in the block editor — the content is locked.
  • The tool generates a bare, standalone theme that has nothing to do with the site (and theme) you already use.

And even when something does land in the block editor, pasting block markup from elsewhere commonly throws the dreaded "this block contains unexpected or invalid content" / "syntax is not correct" errors.

WP Blocks Forge takes a different approach. Claude designs your page as a valid, editable Gutenberg structure that integrates with your real theme (Neve is used in our demo). The result:

  • Every text, link, icon, and section is editable in the block editor — just like a page you built by hand.
  • The layout is responsive on mobile out of the box.
  • The global colors and fonts Claude generates are imported into your theme Customizer as real, editable WordPress defaults.
  • There are no "invalid block" errors — the output is valid block markup by design, because every page is checked before it's written to your site.

In short: you get a designed, theme-integrated page that behaves like a native WordPress page — because it is one.

Before you start / Requirements ​

You'll need:

  1. A ThemeIsle Agency account. WP Blocks Forge is a free, experimental feature for ThemeIsle Agency customers. Sign in at your ThemeIsle store account.
  2. Blocks Forge enabled on your account. It's free and enabled on request — see Get access & give feedback below, or just ask us via our contact form.
  3. A WordPress site you control. You need admin access to install plugins. The site must be publicly reachable over HTTPS (see the note below).
  4. An MCP-compatible Claude client. This works in claude.ai (web "co-work"), Claude Code, or any other MCP-compatible client.

Your WordPress site must be reachable from the internet over HTTPS. If you're working on a local site (for example localhost, 127.0.0.1, a private IP, or a .local / .test / .lndo.site / .ddev.site host), the Blocks Forge cloud can't reach it. Expose it first with a tunnel such as ngrok, Cloudflare Tunnel, Tailscale Funnel, or your managed host's public preview URL.

Step 1 — Install the plugins ​

Two pieces make this work: the WP Blocks Forge plugin, plus one feature toggle inside Otter.

1. The WP Blocks Forge plugin ​

This is our own plugin, and it's all you need for connectivity. It bundles the official WordPress MCP adapter, so there's no separate MCP plugin to install — this one plugin both lets Claude communicate with your site and integrates it with the Blocks Forge cloud, turning a design into real blocks on your site.

  • Download blocks-forge-wp-ability.zip directly from our public GitHub repo, Codeinwp/blocks-forge-public — it isn't on WordPress.org yet. (No account is required just to download and install the plugin.)
  • In WordPress, go to Plugins → Add New → Upload Plugin, choose the ZIP, install, and activate.

On WordPress 6.9+ the underlying Abilities API is built into core. On older versions the adapter bundled with the plugin handles everything — you don't need to install anything else for the connection.

2. Otter Blocks + the Atomic Wind feature ​

Otter Blocks is ThemeIsle's blocks plugin and the channel Claude uses to produce the design.

  • Install Otter Blocks from WordPress.org or themeisle.com, then activate it.
  • In Otter → Settings, enable the Atomic Wind blocks feature.

Atomic Wind brings Tailwind-styled layout primitives into your block templates — this is the toolkit Claude mainly builds your page from. It's a small set of primitive blocks — Box, Icon, Image, Link, Text — that everything else is composed from, which is what keeps the output reliable and valid in the block editor.

Atomic Wind is used for page content. Headers, footers, and blog post content are handled through your theme's settings and core Gutenberg blocks. For more on Atomic Wind, see the Atomic Wind Blocks doc.

We recommend Neve for the full experience. With Neve, the global colors and typography Claude generates are imported into the Theme Customizer as real, editable defaults (see Theme Customizer integration). Your own theme will still work — you just get the deepest Customizer integration with Neve.

Step 2 — Enable Blocks Forge & get your MCP address ​

Once Blocks Forge has been enabled on your ThemeIsle store account, a new Blocks Forge section appears in your store dashboard.

  1. Open the Blocks Forge section in your store dashboard.
  2. Find your site in the list. If it isn't there yet, choose Add a new website and follow the prompts.
  3. Copy the MCP address shown for your site — you'll paste it into Claude in the next step.

If you don't see the Blocks Forge section, your account hasn't been enabled yet. Request access via our contact form.

Step 3 — Connect Claude ​

You add Blocks Forge to Claude as a custom connector. This works in claude.ai, Claude Code, or any other MCP-compatible client.

In claude.ai (web) ​

  1. Go to Settings → Connectors.
  2. Click Add custom connector.
  3. Paste the MCP address you copied in Step 2.
  4. Name it Blocks Forge.
  5. Click Add, then click Connect.
  6. Claude runs a quick authorization handshake that verifies you against your ThemeIsle store account — this confirms both your identity and that Blocks Forge is enabled for you.
  7. Approve when prompted, then return to Claude. Your connection is live.

In Claude Code ​

Add Blocks Forge as a custom/remote connector following Claude Code's connector flow, using the same MCP address. The authorize-and-approve step works the same way.

You'll never be asked to paste a raw WordPress password into the chat. Authorization happens through the approval flow against your ThemeIsle account — your password never travels through Claude.

Step 4 — Add the skills ​

Claude builds dramatically better pages when it has the right skills loaded. Three matter most — the two WordPress skills are ours (a free public download); the design skill is Anthropic's own, free and public:

  • WP Ops (ours) — connects to your site through Blocks Forge and handles every WordPress operation: discovering your site, building valid Gutenberg blocks, and publishing them. This is what turns "make me a homepage" into real, deployed blocks.
  • Create & edit sites (ours) — the higher-level skill for spinning up a brand-new site end-to-end (global styles, header and footer, pages, contact form) or redesigning and editing an existing one.
  • frontend-design (by Anthropic) — Claude's own front-end design methodology (visual hierarchy, type scale, color roles, spacing rhythm, layout, motion, accessibility). This is what makes the result look designed, not templated. It's free and open-source: anthropics/skills → frontend-design.

The two WordPress skills ship together as one download — blocks-forge-skills.zip from Codeinwp/blocks-forge-public. Unzip it and drop the skill folders into your Claude skills directory (the bundle's README lists the path for claude.ai, Claude Code, Codex, and Cursor). Add frontend-design from the link above. Load them all in Claude before you build.

Step 5 — Verify the connection ​

Before you build, confirm Claude can actually see your site. Ask Claude:

Tell me the sites you have access to through Blocks Forge.

Claude will list your connected sites and the things it can do. (This can take a few seconds the first time, while Claude gets a handle on the tools and skills it has available.) If your site shows up here, you're ready to build.

If Claude reports no sites or "no abilities," jump to Troubleshooting.

Step 6 — Build your first page ​

Now the fun part. Use the prompt below as a template — it's the exact one-shot prompt from our cafe demo. Swap in your own business and the site name exactly as it appears in Blocks Forge.

I'm building a website for a local cafe. The vibe is specialty coffee in a
minimal yet cozy environment. It's a WordPress site and I already have a blank
setup accessible through Blocks Forge — the site is called "Karol test". Your
task is to build an incredible homepage for this website. I want it to be
creative and unique. Really push the limits of your design capabilities. Use the
skills available to you to connect with the site through Blocks Forge. Use your
front-end design skill to make this design exceptional.

What happens under the hood ​

When you send that prompt, Claude:

  1. Loads the skills it needs — WP Ops for the WordPress build and frontend-design for the visual direction.
  2. Discovers your site and creates a set of global color and typography definitions.
  3. Builds the page using Otter's Atomic Wind blocks.
  4. Checks that the output is valid block markup, patching and retrying anything that isn't.
  5. Saves the finished page to your site as a normal block-editor page.

You'll approve a few actions as Claude works. The cafe homepage in our demo came out to roughly 172 blocks — a complete, multi-section page — so give it a couple of minutes to finish.

Editing the result in the block editor ​

Open the new page and click Edit Page. What you get is a normal block editor page:

  • Edit any text, link, or icon.
  • Reorder and realign rows and sections.
  • Change pricing, swap copy, adjust spacing — all the usual block editor controls.

The page is built with Otter Atomic Wind blocks (Box, Icon, Image, Link, Text, and related layout primitives). A couple of conventions worth knowing:

  • Icons are clean inline SVG icons that inherit your theme colors (no emojis).
  • Forms use Otter Forms with native field types — no third-party form embeds.

The design is mobile-responsive out of the box, including scaling and animations. There's nothing extra to configure — refresh on a phone and it just works.

Iterating & alternative designs ​

You're not stuck with the first result. Keep talking to Claude:

  • Tweak it. "Make the hero darker," "swap sections 2 and 3," "drop the espresso price to $2." Claude makes targeted edits in place.
  • Try a whole new direction. Ask for a completely different homepage variant — or ask for several at once ("give me 5 homepage designs to choose from") and pick your favorite.
  • Add real photography. You can bring in other skills — for example an Unsplash skill to fetch real photos. That skill needs an Unsplash access key to pull images.

Generating a handful of variants is a fast way to explore directions before committing to one and refining it.

Theme Customizer integration ​

This is where the Neve integration pays off. When Claude builds your page, the global colors and typography it generates are saved into the Neve Customizer as real, editable defaults — not hard-coded into the page.

  • Colors: go to Customizer → Global → Colors & Background. The palette Claude created is right there, fully editable — change the primary color and it updates everywhere it's used.
  • Typography: the font family is editable in the Customizer too (change it once and it applies site-wide).

Because the colors are applied as theme-level settings rather than fixed values baked into each block, editing them in the Customizer ripples through the whole page — exactly how native WordPress is meant to work.

Everything stays fully customizable in WordPress as usual. The generated page is a starting point you fully own.

Troubleshooting ​

Connection isn't active / Claude reports "no abilities."

  • Re-check that the connector was added correctly in Settings → Connectors and that you completed the Connect / approve step.
  • Confirm both pieces are in place on your site: the WP Blocks Forge plugin (active — it bundles the MCP adapter), and Otter Blocks with Atomic Wind enabled.

Claude can't reach my site.

  • Your site must be public and HTTPS. Local or private hosts won't work — expose the site with a tunnel (ngrok, Cloudflare Tunnel, Tailscale Funnel, or your host's preview URL) and reconnect.

I'm seeing invalid-block errors.

  • This shouldn't happen — valid block output is the whole point. If you do see it, confirm Atomic Wind is enabled in Otter → Settings and that Otter Blocks and the WP Blocks Forge plugin are updated to their latest versions, then rebuild.

A change is waiting on "approval."

  • On a live/production site, edits can go through a quick approval step before they're written — approve it and the change is applied. Generating a design is always free and instant; only the write to your site is gated.

Get access & give feedback ​

WP Blocks Forge is experimental and free for all ThemeIsle Agency customers, made available on request while we collect feedback.

To request access:

  1. Make sure you're a ThemeIsle Agency customer.
  2. Reach out via our contact form — just tell us "I'd like access to Blocks Forge." (Existing customers can also reach us from their account dashboard.)
  3. We enable Blocks Forge on your account for free, and the Blocks Forge section appears in your store dashboard — that's where you add your site and copy its MCP address (the plugin and skills are public downloads, see Steps 1 and 4).

We genuinely want your feedback — what worked, what didn't, what you wish it could do. Send it our way through the same channels above.

Was this helpful?