I Redesigned My Website With Claude — Brand, Logo, and Code in a Day

I built the first version of this site in February. It took a weekend, Claude wrote most of it, and I pushed publish. Three months later I rebuilt it from scratch — same tool, completely different capabilities.

Between those two versions, Anthropic shipped Opus 4.7, a Claude Code desktop app, and a real upgrade to the design tooling. The combination turned Claude into something that can genuinely iterate on a brand with you — not just produce a single logo and call it done. This is a walk-through of what that looked like in practice. Total time for v2: about a day.

Why v1 didn't stick

The first version worked. But in hindsight it looked a lot like Claude's own marketing site — because it basically was. In the absence of specific constraints, the model reached for a safe, familiar aesthetic: dark background, gradient-text headline, pill buttons, three-column feature grid. It nailed "competent tech personal site" and missed "distinctly mine."

My positioning had also drifted. I'm a fintech operator and AI practitioner first, an angel investor second, and a veteran last. The v1 led with the military story and buried the fintech work two sections deep. Correct facts, wrong frame.

I wanted v2 to be editorial (serif-forward, closer to a magazine column than a landing page), warm (cream paper, near-black ink, one accent color), and distinctive (a real mark, not a monogram, not a gradient).

The stack

Two tools did the work.

Claude.ai with Artifacts. Artifacts now render full HTML/React previews inline, so you see type specimens, palette swatches, and component sketches live while you iterate. You don't describe a palette — you see it, react to it, and Claude updates in place.

Claude Code (desktop app). There's a real Mac app now. You're not in a terminal — you're in a native app that reads your repo, holds a conversation, edits files while you watch, and runs a local preview so Claude can check its own work in-browser. With Opus 4.7 under the hood, it feels less like "AI assistance" and more like a pair programmer who types faster than you.

Step 1 — Direction

I started a Claude project and uploaded screenshots of my current site, a handful of personal sites I admire, my bio, and a one-paragraph brief: editorial, warm light mode, operator-first, veteran closer, single ink-blue accent.

Then I iterated in conversation. Claude generated full HTML artifacts — type specimens with real copy, component sketches, palette variations. I reacted in plain English — "too clinical," "the accent is competing with the ink" — and it updated. Where you'd previously ask a designer for a mockup and wait a day, I had ten iterations in an hour. The v1 skipped this loop, and that's exactly how you end up shipping the first plausible design — the one that looks like everyone else's.

Step 2 — The logo

The part I was most skeptical about. I've had three designers take a pass at a personal mark over the years and landed on nothing.

I gave Claude constraints: shield (veteran), wings (aviation), forward-looking, not precious. It produced about twenty variations over two sessions. Most were bad. A few were close. One clicked — a faint wings underlay, a bold shield, a lightning bolt inside, and a small four-point star above.

The detail that sold me wasn't in my prompt. Claude suggested the star as an "AI spark" to nod at the third lane of my work. In ink-blue — the site's single accent — it quietly signals the positioning without having to explain it. That's a move v1-era Claude couldn't make. Not because the rendering wasn't there — because the taste layer wasn't.

Step 3 — The handoff

Once the direction was locked, I had Claude produce a structured handoff package: BRIEF.md (design tokens — palette, type scale, spacing), PAGES.md (per-page layout specs with pixel values), COPY.md (every string on the site), COMPONENTS.md (full source for the six shared components), and a career-timeline data file. Plain markdown. Deterministic. This became the spec for Claude Code.

Step 4 — Implementation

I dropped the handoff folder in the repo, opened the Claude Code desktop app, and pasted one prompt: the design is approved, everything you need is in the folder, read all four docs before touching code, keep Supabase and the blog pipeline unchanged.

It worked through it linearly — new tokens, new fonts (Source Serif 4, Inter Tight, JetBrains Mono), six components, four pages, then a production build to verify. First pass: about fifteen minutes.

Then I iterated — maybe twenty small adjustments, each a single sentence:

• "The logo and name feel offset in the nav — center-align them."
• "Make the photo color instead of grayscale. I liked the organic charm of the old version."
• "The Off the Clock section reads dry. Warm it up, keep it short."
• "The favorites page isn't scrolling smoothly."

That last one turned out to be 80+ animation wrappers firing on every card. Claude diagnosed it, stripped them, went from ~30fps to a flat 60 — and showed me the frame timing to prove it. Each adjustment landed in under a minute.

The before and after

Home page:

About page:

The visual jump is obvious. The more important jump is positioning — same facts, different frame. V1 led with the military story. V2 leads with fintech operator, uses AI practitioner and angel investor as context, and treats the service as the closer. That wasn't a design choice. It was Claude helping me see my own positioning more clearly once the constraints were articulated.

What worked, what broke

Worked: Artifacts eliminate the design-handoff round trip — the tool that renders your palette also produces the typed spec. Structured handoffs compile — plain-markdown tokens and layouts made Claude Code's job deterministic; it executed instead of inventing. And iteration is conversational — twenty micro-adjustments in an afternoon would have been a week of back-and-forth with a designer and a developer.

Broke: Logo generation is hit-or-miss — the good ones came from very specific constraints. Dense UIs need an explicit performance pass — Claude preserves whatever's in the existing code unless you ask. And copy drifts — the AI will confidently restate your bio in its own voice; I pushed back several times to keep phrasing I cared about.

What I'd do differently: run the logo as its own session — iterating on a mark while iterating on layout blurs the feedback. And lock copy before implementation; I caught three copy issues after the build, each requiring a re-edit that freezing COPY.md first would have prevented.

Takeaway

The old rule was: designers design, engineers build. Now the same loop happens inside one conversation with a tool that can render what it proposes and commit what it writes. V1 of this site was Claude at its "competent helper" stage. V2 is Claude as a collaborator that can hold taste and execute.

For a personal site, the speed is the point. This is the kind of project that sits on a backlog for a year because it never rises to the top. Doing it in a day isn't the novelty — it's the mechanism that lets you ship things that only matter to you.

---

Three things if you made it this far:

Tell me what you'd rebuild. Drop a comment — what's the site, deck, or doc you've been meaning to redo but haven't? I read every one, and the best ones come with specifics.

Subscribe for the monthly note. I write about running a fintech with AI, building lean with AI tools, and what's actually working (and quietly not) in production. Link in the footer.

If you're scaling operations and trying to adopt AI without breaking anything — fintech, regulated companies, anyone shipping under pressure — that's the advisory work I do. Get in touch. I'll reply within 48 hours.