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 post 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. Dark earthy palette, sage-green accents, a clean marketing hero. But in hindsight, it looked a lot like Claude's own marketing site — and that's because it basically was. The model was reaching for a safe, familiar aesthetic in the absence of specific constraints. 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 product landing page.
• Warm.: Cream paper background, warm near-black ink, a single accent color.
• Distinctive.: A real mark, not a monogram, not a gradient.

The stack

Two tools did the work.

Claude.ai with Artifacts. This is where the big design-tool update actually lands. Artifacts now render full HTML/React previews inline, so you can 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). Yes, there's a real Mac app now. This is the thing that changed the workflow for me — you're not in a terminal, you're in a native app that reads your repo, holds a conversation, and edits files while you watch. It also runs a local preview of your site so Claude can check its own work in-browser. Combined with Opus 4.7 under the hood, it started feeling less like "AI assistance" and more like "pair programmer who types faster than you."

Setup is one download for each. No config.

Step 1 — Direction

I started a Claude project called "Personal Website Design System" and uploaded:

• Screenshots of my current site
• A handful of personal sites I admire
• My existing bio and a few old blog posts
• 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'd react in plain English — "too clinical," "the accent is competing with the ink," "shrink the display size" — and it would update.

The key unlock: artifacts are instantly previewable. Where previously you'd ask a designer for a mockup and wait a day, I had ten iterations in an hour. The v1 skipped this step because v1-era Claude would happily produce a design in-line but without the live-iteration loop, you'd ship the first plausible one. That's how you end up with a site that looks like everyone else's.

Step 2 — The logo

This was the part I was most skeptical about. I've had three designers take a pass at a personal mark over the years. Each time I 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 it.

The detail that sold me wasn't in the original 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 the kind of move v1-era Claude couldn't make. Not because the rendering wasn't there, but because the taste layer wasn't. Opus 4.7 is where that shifted.

Step 3 — The handoff

Once the direction was locked, I had Claude produce a structured handoff package:

• BRIEF.md: — design tokens (paper/ink/accent 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 Nav, Footer, SectionHead, PhotoFrame, PostRow, CareerRow, Logo
• data/career.ts: — timeline data

Plain markdown. Deterministic. This package became the spec for Claude Code.

Step 4 — Implementation

I dropped the handoff folder in the repo root, opened the Claude Code desktop app, and pasted a prompt: the design is approved. Everything you need is in the handoff folder. Read all four docs before touching code. Keep Supabase and the blog pipeline unchanged. Light mode only — strip the dark classes.

It worked through it linearly. Replaced globals.css with the new tokens. Swapped Google Fonts from Geist and Newsreader to Source Serif 4, Inter Tight, and JetBrains Mono. Created the six components. Rewrote the four pages. Ran a production build to verify.

First pass took about fifteen minutes.

Then I iterated. Claude Code holds a persistent conversation and a live preview of the running site. I ran through 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."
• "Strike the MBA from the career timeline. Army until 2018, then Affirm 2018 to 2022 as Head of Business Operations, then dub."
• "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+ Framer Motion wrappers firing on every card. Claude diagnosed it, stripped them, and went from ~30fps to a flat 60 — and showed me the frame timing to prove it.

Each of these was implemented 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. The v1 led with the military story and buried fintech. The v2 leads with fintech operator, uses AI practitioner and angel investor as context, and treats the military 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

• Artifacts eliminate the design-handoff round trip.: When the same tool that renders your palette can also produce a typed spec for implementation, you skip a whole cycle.
• Structured handoffs compile.: Writing tokens, layouts, and copy in plain markdown made Claude Code's job deterministic. It didn't invent — it executed.
• Iteration is conversational.: Twenty micro-adjustments in an afternoon would have been a week of back-and-forth with a designer and a developer.

What broke

• Logo generation is hit-or-miss.: The good ones came from being very specific about constraints. Generic prompts produced generic marks.
• Dense UIs need a performance pass.: Claude will preserve whatever is in the existing code — you have to explicitly ask it to strip animation that's fighting the user.
• Copy drift.: The AI will confidently restate your bio in its own voice. I had to push back a few times to keep specific phrasing I cared about.

What I'd do differently

Start with the logo in its own session and treat it as a standalone deliverable. Iterating on a mark while also iterating on a page layout blurs feedback.

Lock copy before implementation. I caught three copy issues after the build was done; each required re-editing the relevant section. Freezing strings in COPY.md before writing any component code would have saved an hour.

Takeaway

The old rule was: designers design, engineers build. Now the same loop can happen inside one conversation with a tool that can render what it proposes and commit what it writes. The v1 of this site was Claude at its "competent helper" stage. The 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 an afternoon 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 below — what's the site, deck, or doc you've been meaning to redo but haven't? What's stopping you? I read every one, and the best ones usually 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, or anyone shipping under pressure — that's the advisory work I do. Get in touch. I'll reply within 48 hours.