How Fabrement builds a WordPress site

What goes in, what comes out, and what you can do with it afterwards.

How it works

Generate a WordPress site
in four steps

From a single prompt to editable WordPress pages, headers, footers, templates and sections

STEP 1

Connect your AI

Connect your AI model to the installed Fabrement plugin. We recommend the MCP connection. Step-by-step guides: ChatGPT and Codex, Claude.

STEP 2

Bring a design or an idea

Connect Figma to convert a design directly, or build from plain text and screenshots.

STEP 3

Build the pages

Keep building page by page. Fabrement reuses the components you already have wherever it can, and sets the meta titles as it goes.

STEP 4

Review and publish

Check the text, roll back versions, change the order of sections. Press publish when you are happy with it.

See it run

Check how we build a website, step by step

Tabs With Image Sliders, Built by an AI Agent

Build a Contact Page From One Prompt

Figma to WordPress Without Opening wp-admin

Lead Capture Popup From One Prompt

What Fabrement builds

Fabrement builds your site the way we would build a custom WordPress theme by hand, following the practices we have tested and use in our own development process, based on more than ten years of building WordPress sites.

What does that mean in practice?

  • Clean components. Gutenberg blocks, headers and footers are built with semantic HTML, plain JavaScript and, only where needed, small lightweight libraries.
  • Only what the page needs. Each page loads only the scripts and styles that its own blocks use, nothing else.
  • Native WordPress. Headers and footers use native WordPress menus, and a section you want on several pages becomes a WordPress synced pattern: edit it once, and it changes everywhere.

The part that changes how you run WordPress

But the main thing, the one that changes your WordPress experience for good: with Fabrement you can manage your website without logging in to wp-admin at all. Create pages, write new posts or change the items in a menu, just by asking in a chat, in the same AI assistant you already use. Prefer to stay inside WordPress? The chat in wp-admin does the same.

Before, a specific change to your website meant waiting for a designer and a developer. Now you can handle everyday changes on your own, without learning a complex interface. Just plain words in a chat.

Build your site in three steps

  1. Install and sign in. Activate Fabrement and sign the site in to a free Fabrement account, so your agent can save blocks and read the build guides.
  2. Connect your agent. In Fabrement → MCP Connection, pick Claude, ChatGPT, Codex or Cursor and follow the setup shown there. Claude, ChatGPT and Codex connect with OAuth; Cursor and any other MCP client use a WordPress application password. The step-by-step guides with screenshots cover ChatGPT and Codex and Claude. The connection is free: you use your own AI client and plan.
  3. Describe what you want. Write in plain words, attach a screenshot or a Figma link, and check the result in the preview. Ask for changes the same way.

What you can ask for

You do not need to know how blocks, templates or custom fields work. Brief your agent the way you would brief a developer:

  • “Build a landing page for my bakery from this Figma frame.” It reuses your header and footer and builds the rest as blocks on a draft page.
  • “Add an Events section where I post new events and visitors filter them by city.” You get an Events post type with a City taxonomy, date and venue fields, an event page layout and a filterable listing.
  • “Show our phone number and opening hours in the header and footer.” They go on an options page, edited in one place.
  • “Use our brand colours and this Google font everywhere.” Your agent sets up the design system.
  • “Add SEO titles and FAQ schema to the Services page.” SEO titles use Yoast SEO, which the agent can install for you.

It does not stop at launch. Run the site through your agent day to day: “add this week’s three events”, “update the prices on the Services page”, “write a news post about our new branch”. You can still edit anything in wp-admin yourself.

How Fabrement guides the agent

A general-purpose AI does not know how your site is built. Fabrement gives it the structure to work the way a careful developer would:

  • It looks first. Before changing anything, the agent reads what the site already has: pages, blocks, templates, post types, fields, menus, icons and the design system. It reuses an existing header or block instead of building a second copy.
  • It follows the rules for each task. Every tool with rules points the agent to the guide for its area (blocks, templates, fields, SEO, translations), and the agent reads it before its first call.
  • Its code is checked before it reaches your site. The Fabrement service checks the PHP syntax, checks the code against a security policy and builds the JavaScript. If anything fails, nothing is saved, and the agent gets the exact file and problem to fix.
  • It changes only what you asked. Small edits replace only the part of a page or file that changes. If someone changed it since the agent read it, the edit is refused.
  • It styles with your design system. Blocks use your colour roles, fonts and button styles instead of hard-coded values, and a block may not load its own fonts or remote assets.
  • It checks its own work. The agent opens a preview of what it built before reporting back.

Every accepted version is kept, so a change you do not like is rolled back rather than rebuilt.

One design system for the whole site

On the design side, Fabrement sets up your colours, typography and button styles in one place, so the site stays consistent and easy to grow. Even when you add a screenshot in a completely different style, the new section follows your design system.

It can build fairly complex layouts and change them based on your input, and every layout is responsive, so it looks right on any screen size and any device.

A whole site from Figma, overnight

You can start from a sentence (“a pricing section with three plans, the middle one highlighted”), a screenshot of a section you like or of an old site you are rebuilding, or a Figma frame. For a whole site, this is how we work:

  1. Save your Figma personal access token in Fabrement → API Connection → Figma. More on Figma to Gutenberg.
  2. Give the agent the links to your designs in Figma, and go to sleep.

The slow part is building the sections. Once they exist, the agent assembles the pages from them very fast, so by the time you wake up, it will have built the site. You will probably still need to check it and ask for adjustments, such as fixing small layout issues or turning some sections into shared patterns, but what you get is a pre-production website, not a mockup.

Prefer to stay inside WordPress? The chat in wp-admin builds blocks too, with OpenAI, Claude or Gemini and a live preview beside it.

Beyond sections

  • Headers, footers and templates applied to chosen pages, a whole post type, archives or taxonomy pages. Works with block themes and classic themes.
  • Pages and posts assembled from your blocks, with SEO fields set. Publishing is a separate step, so an agent cannot make a page public as a side effect of saving it.
  • Your own post types, such as projects, events or case studies, with their own URLs, filters and listing pages.
  • Custom fields and options pages: text, dates, images, galleries, links, relationships, groups and repeaters, filled in on the edit screen. Site-wide details such as phone numbers and opening hours live on an options page and update everywhere at once.
  • Forms with Contact Form 7, styled to match the site, or existing Contact Form 7 and WPForms forms placed inside blocks.
  • Yoast SEO: titles, descriptions and schema, per page or for a whole post type.
  • Multilingual sites with WPML: a page in another language in one request, linked as a translation, with headers, footers, menus, slugs and SEO fields handled.
  • Menus, media and icons, managed through the same connection.

Last but not least: share AGENTS.md with your agent

Give your AI the file at fabrement.com/AGENTS.md. It describes how Fabrement works, so your agent understands it better, and your next project takes fewer tokens and less time.

Good to know before you start

  • The blocks render through the plugin. Deactivate it and their output stops; your posts, pages and media stay. The code is yours and can be downloaded and reused, but today that is a manual step.
  • Building and changing blocks, and the guides the agent works from, need the site signed in to a free Fabrement account, because block code is checked and stored there. Without it, an agent can still manage pages, posts, post types, fields, menus, media, SEO and settings.
  • Only administrators can connect an agent, and a connected agent gets the whole surface, not a scoped role. Keep regular backups.
  • SEO titles need Yoast SEO; forms need Contact Form 7 or WPForms. The agent can install Yoast SEO or Contact Form 7 for you.
  • Translations work with WPML only. No WooCommerce, cart or payments, and no WordPress Multisite.

Download Plugin

FAQ

Questions people ask before installing