How Fabrement builds a WordPress site
What goes in, what comes out, and what you can do with it afterwards.
Generate a WordPress site
in four steps
From a single prompt to editable WordPress pages, headers, footers, templates and sections
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.
Bring a design or an idea
Connect Figma to convert a design directly, or build from plain text and screenshots.
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.
Review and publish
Check the text, roll back versions, change the order of sections. Press publish when you are happy with it.
Check how we build a website, step by step
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
- 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.
- 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.
- 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:
- Save your Figma personal access token in Fabrement → API Connection → Figma. More on Figma to Gutenberg.
- 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.
Questions people ask before installing
Are these real Gutenberg blocks?
Yes. Each section is a registered Gutenberg block with its own block.json, server-rendered PHP and scoped CSS. It appears in the block inserter like any other block.
Does a screenshot become a locked component?
No. It becomes a custom block with editable fields for its content, and its code can be changed by the agent or by hand.
Can a developer work on the generated code?
Yes. It is plain WordPress PHP, CSS and JavaScript, and it is written to be what another developer would want to inherit.
What happens if my Fabrement account lapses or closes?
Your site keeps working. The blocks that already exist stay on the site and keep rendering. An active account is needed to build new blocks or change existing ones, because block code is checked and stored by the service before it is saved.
What happens to my blocks if I stop using Fabrement?
The blocks belong to you, and you can download the generated code and reuse it anywhere, including in your own theme. What is not automated yet is the moving: today that is a manual step, and while the plugin is installed it is what renders those blocks on your pages. An automated export to your theme is planned.
Does the plugin work with my existing theme?
Yes. Fabrement generates native Gutenberg blocks, headers and footers that sit alongside whatever theme you already run. It does not replace your theme and it does not add a page builder runtime.
How much does the plugin cost?
The plugin is free. Over MCP, your agent runs on the AI subscription you already have, so nothing is billed by us. The chat inside wp-admin starts with $3 of free credit, enough to build three or four blocks, and then uses your own OpenAI, Anthropic Claude or Google Gemini key.