Automattic recently launched a new service: Spacefast, a host specifically geared towards publishing sites generated with AI. I’ve been tinkering with AI chatbots for smaller design and development tasks, including for updates to my older free WordPress themes, but I’d never before let one loose on an entire site. When I saw the Spacefast announcement, it seemed like the perfect opportunity to resurrect an old side project that had fallen by the wayside when I moved all of my sites to WordPress.com a few years ago.
That side project was based on my high school graduation project from 2010, in which I wrote about the 1986 murder of Swedish Prime Minister Olof Palme. It’s a fascinating murder mystery that remains unsolved to this day. I got pretty invested in it, and when I discovered that the domain palmemordet.se was available, I decided to build and publish an abbreviated version of my essay there. In the years that followed, palmemordet.se became the number one search result for the murder and got a lot of visitors – many of them other high schoolers, I’m guessing.
I’ve uploaded a copy of the original site in a subfolder on palmemordet.se, so you can take a look at where we started. It was built as a one-pager, mostly with HTML and with a sprinkling of PHP for outputting the copyright year and looping out the books. This is a redesign from 2014, so it’s not the 2010 original – that one looked decidedly worse and used a full WordPress install to output a single page, like you do. Visually, I think it still looks mostly alright and reads well, but there was definitely room for improvement. I usually have a complete Figma file for whatever I’m building, but for this, I made the deliberate decision to let Claude take the lead. I was curious where we would end up.
To get things started, I pointed Claude to the folder with the existing repo for the site. Next, I visited Spacefast and clicked the “Get started with your agent” button, copied the prompt, and pasted it into Claude.
Spacefast:Fetch https://api.spacefast.com/handoffs/[key] and follow it.
I told Claude to publish, and Claude told me that api.spacefast.com wasn’t in the Claude allowlist, which meant the project couldn’t be uploaded. I updated the allowlist settings with the Spacefast URL and tried again. Moments later, Claude got back to me with links to preview and claim my new Spacefast site. Super fast and super easy. Claude let me know that the claim link would expire after two days, so I went ahead and connected the site to my existing WordPress.com account.
I could have kept telling Claude to publish changes directly to the site, but I decided to set up deployments via the GitHub repo instead, so I could keep a close eye on things.
With the Spacefast site and deployments set up, I was ready to start making changes. This is what I told Claude to kick things off:
Update the site with modern styles, some animations, and other bells and whistles, without changing the text itself or the images. Keep the overall vibe of the current site, but feel free to update fonts and tweak colors. Walk me through the process.
Claude got back to me with the following suggestions:
- Replace the fonts with a modern serif and sans pair from Google Fonts, and refine the red and dark palette slightly.
- Rewrite the CSS with a CSS grid layout and better spacing.
- Add animations: staggered title reveals, scroll-triggered fade-ins, image reveals, a slow parallax and zoom on the cover images, a scroll progress bar, and hover effects on the books.
- Replace jQuery with a small vanilla JS file and respect reduced-motion settings.
- Make small markup changes: fix the broken
<meta>quotes, update the doctype, and add a few invisiblearia-labelattributes. - Leave all visible text and images as they are.
Sounded good to me. Spacefast supports PHP, but I told Claude to build it as a static page with the copyright year rendered with JavaScript instead.
The first pass looked pretty good:
Claude picked Fraunces for the heading font, Newsreader for running text, and Inter for the rest. I like Newsreader a lot, but its x-height is quite a bit smaller than what was on the page previously, so it looked undersized compared to the rest of the design. Claude made a few suggestions based on what fits with Fraunces, and I opted for Literata. Inter looked a bit vanilla next to those two, so Claude suggested Schibsted Grotesk, which also seemed like a good fit. All together, they gave the site a suitably old-school editorial vibe.
The animations were a bit much to start with, so I asked Claude to dial those down. The content navigation on the right looked a bit wonky, so we had to work on that. Same with the footer. The running text was a bit small and difficult to read on my large display, so I told Claude to scale everything up proportionally for large desktop displays. After a lot of back and forth, I started to feel happy with the results, and I didn’t touch the code myself once. For the most part, Claude steered clear of what I think of as generic AI design, although the first draft for the footer did include frosted-glass backgrounds for the boxes, which was an interesting choice given the appearance of the rest of the page and my request for Claude to keep things consistent.
I also had Claude do a full accessibility audit, update the markup with HTML5 elements, optimize all of the images and add lazy loading, switch to self-hosted variable fonts, add Open Graph tags, and minify everything.
What I had at this point was a polished refresh of the old design, but mostly without new features. I decided to see what Claude could do.
- First, I replaced the old share buttons with a new button for copying the page URL.
- Next, I added the ability to open images in an overlay.
- I couldn’t resist adding dark mode support as well. It defaults to the system setting, and can be overridden with a dark mode toggle in the hero.
- One feature I have considered adding in the past is a timeline of the events in the police investigation. Claude helped me build a horizontal timeline carousel, and I’m really impressed with the end result. Carousels have a ton of edge cases to consider, and although it took a lot of back and forth (29 commits), it might be the smoothest carousel design QA I’ve ever done. Definitely the fastest.
In a few hours, I had given palmemordet.se a facelift, optimized it, added a bunch of new features, and brought the domain back from the dead with Spacefast. I’m a bit taken aback by how smooth it all went, and although a one-page static site is pretty small as experiments go, it has definitely encouraged me to make more use of both Claude and Spacefast on future projects.