I let Claude redesign my site — with my own components

This site used to be indigo-on-black. The version you're reading now — warm dark palette, serif headlines, pill buttons, the contact bar pinned to the bottom — came out of an experiment: I wanted to see how far I could get letting Claude redesign my site using my own components, not generic ones.

Here's the loop, end to end.

Step one: teach the design tool my components

Claude Design (claude.ai/design) is a tool where you prompt an agent and it builds working UI as real React code. Out of the box it designs with generic parts. But you can sync your own design system into it — so the first move was converting this site's eight components (Navbar, Hero, About, Experience, Philosophy, Resources, Contact, Footer) into a bundle the design agent could import.

That was less trivial than it sounds for a Next.js app that was never meant to be a component library:

• My components are default exports, which the sync tooling's synthesized entry couldn't re-export. Fix: a tiny barrel file that re-exports each one by name.
• next/image doesn't work outside the Next.js runtime. Fix: a shim that maps it to a plain img, with my headshot inlined as a downscaled data URI.
• Tailwind v4 compiles only the classes your source actually uses, so the synced stylesheet is a fixed vocabulary — the design agent can't invent new utility classes and have them work. That constraint went straight into the conventions doc the agent reads.
• Fonts loaded via next/font set their CSS variables through a hashed class that only exists inside Next. In the design tool, everything silently fell back to system fonts until I pinned the variables at :root.

Every component preview got screenshot-verified before upload. That discipline paid off twice — more on that below.

Step two: let the agent design

With the components synced, I prompted redesigns in Claude Design and exported the result: five template pages in a completely different visual language. Warm near-black instead of pure black, Instrument Serif display type, pill-shaped everything, and a persistent bottom contact bar.

One thing worth being honest about: the templates came back filled with plausible fiction — fake jobs, fake businesses, fake blog posts, a fake email address. That's fine for design exploration, but the implementation rule I set was: adopt the visual system wholesale, keep every real entry from the old site. Design is the agent's; facts are mine.

Step three: bring it home

Implementing the redesign back in the codebase was the fast part — new tokens in globals.css, Instrument Serif via next/font, and a restyle of all eight components that kept every experience entry, resource card, and paragraph of bio intact.

Design is the agent's; facts are mine.

Then the loop closed in a satisfying way: I re-synced the redesigned components back into Claude Design, so the design tool now speaks the new language too. The re-sync caught two real bugs before they shipped anywhere:

1. The redesign introduced next/link, which dragged Next.js internals into the bundle and broke every export — same class of problem as next/image, same class of fix.
2. The serif font wasn't actually rendering in previews — the same hashed-class variable trap, one font later. Without screenshot verification this would have shipped silently, because the carried-forward checks don't re-grade styling churn.

What I'd tell you if you try this

The interesting part isn't that an agent can produce a pretty page — it's that syncing your components in changes the failure mode. The agent's output maps one-to-one onto code you already ship, so "bring the design home" is a restyle, not a rebuild. The tax is fidelity work at the boundary: shims for framework-runtime dependencies, pinned font variables, and honest verification screenshots at every step.

Total cost: about a day, most of it verification. The redesign itself — the part that used to be the expensive part — was the cheapest step in the loop.