Rebuilding magilium.com as an AI-native site
Published
Overview
Rather than commission a traditional agency rebuild, we used the magilium.com refresh as a live proving ground for AI-native delivery that we've used to supercharge product delivery in every other area. Every meaningful decision - stack selection, design exploration, content migration, editorial workflow - was made with Claude in the loop, sometimes drafting first (with the exception of design) and a human reviewing.
This creates a whole new approach for website building, almost completely chat based in form, with complete flexibility for future adaptation - yet still retains the ability for non-technical content creators to contribute without risking rogue AI changes risking the live site.
The result is a site that doubles as a case study for the approach and something we can do for clients if appropriate.
Picking the stack
We had two needs that drove everything else:
Headless CMS - Payload. We needed a Content Management System (CMS) that an AI could safely talk to programmatically, that didn't lock us into a hosted product's quirks (so definitely Open Source). Payload checked every box: open source, schema-as-code, fully typed, and a Node-native admin.
Frontend — Next.js App Router on Vercel. Payload's official starter is built on Next.js, which gave us free deployment to Vercel (a hosting platform we use extensively) and a single repo to hold everything with no glue layer between CMS and site.
Two other minor things helped push us down this route as well: 1) We already host on Vercel so a native integration to Vercel was attractive; 2) After build, we wanted all content creation to be possible both by AI and also by non-technical content creators, so both interfaces were essential.
In reality, there are not many other headless CMS systems that support all these requirements.
Design - Claude Design, then Claude Code
We started in Claude Design, feeding it our brand pack — logo files, the Visby CF / Lato type pairing, the purple-to-magenta gradient palette, the tone-of-voice guidelines. That let us iterate on layouts and component motifs quickly, with no Figma round-trips and no upfront component library to maintain.
We actually find that we can design in Claude.ai on the web, or Claude code in the desktop app at almost the same speed, but Claude Design does allow more interactivity and doesn't need the (albeit quick) creation of stub pages for visual review.
Once the direction was settled, we migrated fully to Claude Code for implementation. The same design intent carried through, but now Claude was producing real Tailwind-and-React components wired straight into Payload's block schema. A decision like "give the hero an overlay gradient" went from mockup to Payload block field to live admin control in a single session.
Content - Playwright and Claude on the legacy site
The previous magilium.com had accumulated material - service descriptions, biographies, partner mentions, certifications - and we are lazy. We pointed Claude at a Playwright session and let it crawl the live site, pulling page content, structure, links, and image references into a structured intermediate form.
Claude then reformatted that material into Payload-compatible content blocks: services into ServicePanel entries, partners into the Partners block, certifications mapped onto the Certifications block. Nothing was retyped by hand. Anything that didn't fit an existing block was flagged for review and we did have to make changes.
More Content! - Claude as a project archaeologist
We also pointed Claude at our internal project directories - old client work, retrospectives, slide decks, README files. It surfaced engagements we'd half-forgotten ("there's a year of work in this folder that isn't anywhere on the website"), drafted case-study summaries, and produced first-pass social copy on the same material.
Drafts always went through a human edit pass before publishing.
Editorial - the Payload MCP plugin
Payload (the CMS for the website) ships an MCP plugin that exposes the admin API as a Model Context Protocol server. We've turned that on at /api/mcp, gated by a per-user API key. From any MCP-aware AI tool, Claude can now read and write content directly against the live site - drafting case studies, fixing a typo, populating a new block, all without an editor needing to open the admin UI.
The safety rails sit at the access-control layer: the MCP user can create and update, but cannot delete. Neon's branch-and-restore mechanics cover the worst case.
MCPs are still a little flaky and sometimes need resets (Claude can also use the API for a less intrusive edit) but having it in place for this work was really helpful.
Why it matters for clients
This was an experiment but it wasn't just self-indulgence. The same techniques we used here - letting Claude drive design, scraping legacy content with Playwright, mining project directories for unmined work, wiring an MCP into the CMS - are things we've used in coding and research projects.
If your next website refresh feels like it will take six months and burn a year of marketing budget, talk to us about the AI-native version. There's a faster path, and you can see it directly here. It was fun to do.