We used Claude and WP Vibe in an AI website builder workflow to rebuild Hutch Composite’s WordPress site. People directed the work and provided human approval throughout. Its mobile performance score rose from 49 to 75 before image optimization was finished, and the process included new designs, content revisions, and plugin cleanup. This wasn’t a fully autonomous AI builder.
If you run an agency, our YouTube walkthrough shows the decisions behind that work. We started with a functioning community website and kept the features the team depended on.
Key Takeaways
- Claude and WP Vibe used an MCP connection to help rebuild the site. The team reviewed drafts and approved changes while the live site stayed unchanged.
- The redesign used Astra and WordPress Core Blocks while keeping the WooCommerce store and Printify connection, GiveWP, Fluent Forms, and LifterLMS.
- The mobile performance score rose from 49 to 75 after the new pages were published and GiveWP scripts were restricted. Image optimization was still running, so the expected score of 84 or 85 wasn’t a measured result.
- Human review caught content errors, a misleading rainbow design, roster privacy questions, and plugin dependencies. The team backed up the site before launch.
A working team website ready for a refresh
Hutch Composite is a youth mountain biking team we support through a pay-it-forward project at Manana No Mas! We sponsor the team, help coach, and give the organization a voice online.
The original website worked. Its pages shared useful information, and its WooCommerce store let supporters select apparel sizes and colors before adding products to their carts.
Our goal was to refresh the design and messaging while preserving those working systems.
Connecting WordPress to Claude with WP Vibe
First, we installed and activated WP Vibe, a WordPress plugin, through WordPress’s plugin menu. This WordPress AI builder workflow used MCP to connect AI tools such as Claude, ChatGPT, and Cursor.
Because WP Vibe was already connected to our Claude account, we supplied the site’s connection prompt. We reviewed the requested permissions, approved the AI agent’s access, and checked the prompt’s site details before confirming the connection. The returned site report identified Astra, Elementor, WooCommerce, GiveWP, Fluent Forms, LifterLMS, and WPvivid.
Claude then reviewed the existing pages. It identified placeholder links, outdated season labels, and homepage copy that read like template text.
We agreed on a draft-first approach: build replacement pages while the live website stayed unchanged, then review them before publishing.
This setup used WP Vibe’s MCP connection, not a direct REST API integration or an Abilities API workflow; we didn’t test either approach. Check current compatibility before assuming the same setup works with WordPress 7.0. Review tool pricing and how AI credits are consumed before choosing a similar workflow; we didn’t assess costs for this rebuild.
Giving the redesign a clear brief
We chose Astra as the theme and WordPress Core Blocks in the Gutenberg block editor for a lighter site than Elementor. Core Blocks also gave the team a visual editor. The e-commerce store and its Printify connection had to stay, along with GiveWP donations, Fluent Forms, and LifterLMS eLearning.
This rebuild didn’t compare Divi or CrocoBuilder with Core Blocks. Sites that rely on custom post types or dynamic content, including setups using JetEngine, should check those requirements before changing editing stacks.
The digital marketing goal was to help young riders and their families attend an open event and consider joining. Existing team photographs would keep the site connected to real people.
We also emphasized loaner equipment and scholarships because money shouldn’t prevent a child from trying mountain biking. The messaging needed to reflect NICA’s focus on fun, inclusion, and character growth while acknowledging the competitive side of racing.
To highlight girls in the sport, we supplied an estimated 35% increase in Kansas NICA female participation over the preceding season.
Reviewing the first homepage draft
Claude inspected existing pages and photographs through the browser, requesting permissions along the way. We often chose “allow once” so we could follow its actions.
The first draft used Astra and Core Blocks, real team photos, and the headline “Grab a bike, find your crew.” It included loaner bikes, open events, girls’ participation, coaches, donations, and the store.
We corrected eligibility from grades six through 12 to grades five through 12. We gave that correction to Claude rather than editing separately so it retained the right context.
The rainbow arc in the hero also needed revision because it suggested an affiliation the team didn’t have. We kept individual color accents, removed the rainbow treatment, and replaced a pale yellow shape with blue drawn from the team jerseys.
Checking the pages families actually need
After approving the homepage direction, we asked Claude to apply it across the site, with mobile usability and speed included in the brief.
The About page explained that “composite” means riders from different schools ride together. The joining page described contacting a coach, attending an event, trying a loaner bike, and registering.
Race information distinguished the example 2026 schedule from pending 2027 dates. The resources page organized family PDFs and race-day guides. Donation and scholarship pages retained the support and application paths.
Review also exposed details needing attention, including a missing coach’s name and local racing history requiring confirmation.
Navigation needed a practical fix: submenu text and backgrounds were both white. Claude changed the dropdown to navy text on white, with a blue top edge and light-blue hover highlighting. These changes clarified site structure for families and helped visitors and search engines find relevant pages, supporting SEO.
Backing up and launching without losing features
Before publishing, we used WPvivid to back up the database and files. Claude then replaced the main pages while preserving their URLs, retired the old versions, and rebuilt the menu and shared header.
A staging site can help you review changes before launch. Some managed hosting plans include staging or backup features, so check what’s included and compare it with the hosting pricing.
One exception was the roster. Claude flagged riders’ full names and coaches’ personal contact information. We kept that page available pending a team discussion because the organization had obtained permissions for its publication.
Plugin cleanup also needed exceptions. Elementor and Essential Addons could go, but Spectra had to remain because the roster still depended on it. AddToAny sharing buttons stayed because we understood the team wanted them.
Automation handled much of the implementation, but we still decided what could change.
Measuring performance and reducing unnecessary scripts
The baseline mobile report scored 49. The homepage weighed 4.5 MB, and its main image took about 17 seconds to appear under the tested phone conditions.
These were the reported mobile results during the rebuild:
| Stage | Mobile performance score |
|---|---|
| Original homepage | 49 |
| New pages published | 69 |
| GiveWP script cleanup | 75 |
The published redesign also reported an accessibility score of 100. However, reducing unnecessary page weight required more than replacing the layout.
Claude identified GiveWP scripts loading across the site, including pages without donation forms. We installed WPCode, and Claude created a snippet to restrict that loading.
After activation, the homepage script count dropped from 65 to 16. The donation page still loaded its required scripts, and Claude opened the form to check it.
Image optimization was still underway
The remaining large issue was the hero photograph, which still took roughly five seconds to appear under some slow-phone conditions.
After checking the existing caching plugin, Claude recommended EWWW Image Optimizer. We installed it, and Claude enabled WebP conversion and picture-tag delivery suitable for the site’s Nginx setup. Then we manually started bulk optimization.
By the end of the walkthrough, roughly 80 to 85 minutes had passed, and image processing was still running. We expected a possible mobile score around 84 or 85, but 75 was the last reported score. The higher number was a prediction, not a completed result.
Frequently Asked Questions
How did Claude connect to the WordPress site?
The team used WP Vibe’s MCP connection to link Claude with WordPress, reviewed the requested permissions, and approved access. The rebuild didn’t test a direct REST API integration or an Abilities API workflow.
Which site features stayed in place?
The WooCommerce store and its Printify connection stayed, along with GiveWP donations, Fluent Forms, and LifterLMS. Spectra also remained because the roster depended on it.
How much did the mobile performance score improve?
The reported score rose from 49 on the original homepage to 75 after GiveWP scripts were cleaned up. Image optimization was still underway, and the predicted score of 84 or 85 wasn’t confirmed.
Why did the team review Claude’s work before launch?
Human review caught issues such as the incorrect grade range, a rainbow design that suggested an affiliation the team didn’t have, and personal details on the roster page. The team also checked plugin dependencies and backed up the database and files before publishing.
Human judgment remained part of the rebuild
An AI website builder accelerated the work, but our decisions controlled the outcome. The need for expert oversight of AI websites was clear in content corrections, privacy choices, plugin dependencies, and launch approval.
Our safeguard was to review drafts and permissions, keep a recent backup or use staging, and understand changes before approving them. The finished design mattered, but the practical goal was a site where families could open a menu, find race information, and submit a form on their phones.