← Home

AI-Accelerated CMS Migration with Claude Code

From Squarespace to Astro in eight hours

1 / 13

The Situation

My wife Elena runs a graphic design business — skrinakcreative.com

  • On Squarespace since 2017
  • Squarespace worked well
  • Her business downsized
  • Seven pages, portfolio galleries, minimal interactivity
  • $16–23/month → $0
2 / 13

What I Considered First — HTTrack

Web scraping is the obvious starting point. I know HTTrack well.

  • Used HTTrack + AI as a first attempt
  • Results were unusable
  • Platform-coupled assets would require significant decoupling effort
  • Unclear IP standing on scraped theme assets
  • Enough friction to make me curious about a cleaner approach
3 / 13

The Constraint — Know Your Scope

This was a simple migration. Knowing that upfront matters.

  • 7 pages, single grid-based theme
  • One integration swap: Google Maps → OpenStreetMap
  • No forms, no authentication, no e-commerce
  • No CMS data model to untangle
4 / 13

The Approach — Discipline Before Code

Classic project management applied to an AI-accelerated workflow.

Before any code was written:

  1. Plan — goals ranked by priority, options evaluated
  2. Scope — seven pages, exact asset inventory, known integrations
  3. Specification — design tokens, typography, color palette, spacing
  4. Testing requirements — visual regression baselines, pass criteria defined
5 / 13

The Stack Decision

Astro + Cloudflare Pages

Decision Choice Rationale
Hosting Cloudflare Pages Free tier, global CDN, auto-deploy from git
Framework Astro Native image optimization, clean component model
Theme None — built from scratch Existing themes didn’t match Elena’s design
Font Jost (Google Fonts) Adobe Fonts license lost on Squarespace cancellation
Lightbox GLightbox Matched portfolio gallery behavior exactly
6 / 13

What Claude Code Actually Did

Claude Code wrote all of it. My role was project management.

  • Discovery & audit, technology evaluation, design spec extraction
  • Astro scaffold, component build, gallery implementation
  • Visual alignment, test suite, deployment configuration

The standout: Layout identification and visual alignment

Describing design corrections in plain English, with a visual comparison test suite confirming each change against the live Squarespace baseline.

7 / 13

The Test Suite

78 tests. Claude Code wrote them.

  • 60 visual regression tests — 7 pages × 3 breakpoints × 2 test types
  • 18 navigation tests — desktop and mobile, dropdown and drawer behavior
  • Playwright baselines pulled from the live Squarespace site

I already take parallel test suite management for granted. That shift happened fast.

8 / 13

The Numbers

Total time: 8 hours — start to deployed.

  • ~1 hour lost to a Cloudflare DNS configuration miss
  • A clean run: probably 7 hours
Metric Squarespace Astro Δ
Performance 57 86 +29
Accessibility 96 99 +3
Best Practices 100 100 —
SEO 93 92 -1
9 / 13

The Results

Deployed. Stakeholder approved.

  • Elena signed off — she cares about the design, not the tech
  • Not pixel-perfect: font substitution accounts for most of the gap
  • Better on every meaningful performance dimension
  • Full control, no vendor lock-in
10 / 13

Project Scope

This was the simple case. Extrapolate carefully.

  • 7 pages, one theme, one clean integration swap
  • Complexity scales with forms, data models, authentication
  • AI instructions fail — verify infrastructure configuration yourself

Prior assumptions about effort may no longer hold. Test it yourself.

11 / 13

The Takeaway

Context is the input. Quality is the output.

  • Define scope before you start
  • Write specs before you build
  • Require tests before you ship
  • Manage AI like a very fast, very literal contractor

The question isn’t whether AI can do this. It’s whether you can manage it well enough to let it.

12 / 13

Questions?

See it live

The stack

13 / 13

Speaker Notes