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 ThemeIsle users while we gather feedback. Access opens on 24 June 2026 and this first round is limited to 10 users. Some details below may change as the product matures. Test on a staging site before using it on a live production site.

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 account. WP Blocks Forge is a free, experimental feature for ThemeIsle customers — meaning you use one of our products (a paid plan or a ThemeIsle product). Sign in at your ThemeIsle store account.
  2. Blocks Forge enabled on your account. Access is granted on request — we begin enabling accounts on 24 June 2026, limited to the first 10 users in this round, while we gather feedback. See Get access & give feedback below, or request it now 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. The Claude app. This works in both claude.ai (web "co-work") and Claude Code.

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 ​

Three pieces make this work: two plugins, plus one feature toggle inside Otter.

1. The WP MCP / MCP adapter plugin ​

This is the layer that lets Claude communicate with your WordPress site directly. It's the official WordPress MCP adapter. Grab the latest mcp-adapter.zip from the Releases page at github.com/WordPress/mcp-adapter, then install it under Plugins → Add New → Upload Plugin and activate. (On WordPress 6.9+, the underlying Abilities API is already built into core.)

2. The WP Blocks Forge ability plugin ​

This is our own plugin. It uses the MCP adapter and integrates your site with the Blocks Forge cloud — it's how Claude turns a design into real blocks and imports them onto your site.

  • We send you the plugin ZIP once Blocks Forge is enabled on your account (see Get access) — it isn't on WordPress.org yet.
  • In WordPress, go to Plugins → Add New → Upload Plugin, choose the ZIP, install, and activate.

3. 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 both claude.ai and Claude Code.

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. Two matter most:

  • template-ops — teaches Claude how to build, redesign, and publish pages for WordPress through Blocks Forge. This is what turns "make me a homepage" into real, deployed blocks.
  • frontend-design — 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.

Add both to Claude before you build:

  • template-ops — this is our skill; we share it with you (in your access email) when we enable your account.
  • frontend-design (from Claude) — Claude's own design skill, free and open-source on GitHub: anthropics/claude-plugins-public

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 — template-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 all three pieces are in place on your site: the WP MCP / MCP adapter plugin (active), the WP Blocks Forge ability plugin (active), 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 ability 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 ThemeIsle customers, made available on request while we collect feedback. We begin enabling accounts on 24 June 2026, and this first round is limited to 10 users — so it's first come, first served.

To request access:

  1. Make sure you have a ThemeIsle account (you use one of our products).
  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.

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.