How I Built a Full Website With Claude Code in a Weekend

I rebuilt my personal website from Webflow to Astro using Claude Code. Here's exactly how it went, what worked, and what didn't.

ai building technology

Key Points

  • Rebuilt ryancmcdonald.com from Webflow to Astro + Vercel using Claude Code in ~48 hours of actual work, distributed over a weekend and the following week
  • Claude Code handled scaffolding, component generation, Tailwind styling, and MDX setup brilliantly; humans made the design and content decisions
  • Went from $20+/month hosting cost to free (Vercel), plus eliminated friction around writing blog posts (now MDX instead of Webflow’s UI)

I’ve been running a personal website for a few years, but it lived on Webflow. It worked, looked fine, but three things drove me crazy: the $20/month subscription, the painful blogging experience, and the feeling that I didn’t really own my tech stack.

Last weekend, I decided to rebuild it from scratch using Claude Code as my primary development tool. I picked Astro for the framework, Tailwind CSS for styling, and Vercel for hosting. The result is a faster, cheaper, and infinitely more enjoyable site to maintain.

This is the build log. Not a tutorial—just what actually happened, what Claude Code excelled at, and what still required human judgment.

Why I Left Webflow

Webflow is great for designers who want to ship something visual without touching code. I’m not that person. I can code, I like coding, and I wanted something I could modify and extend without fighting a UI.

The cost was also becoming indefensible. At $20/month, I was paying $240/year for a static personal website that got maybe 500 visitors monthly. Vercel’s free tier would’ve handled the traffic without breaking a sweat.

But the real pain was blogging. Webflow’s rich text editor felt sluggish. Every post required clicking through their interface, uploading images, managing formatting manually. I wanted to write in Markdown or MDX, commit posts like code, and let a build system handle the rest. MDX specifically—it’s Markdown with React components embedded, and I wanted that flexibility for future interactivity.

So one Saturday morning, I opened Claude Code and started building.

The Scaffold: First 30 Minutes

Claude Code can generate boilerplate incredibly fast. I asked for an Astro project structure with TypeScript, Tailwind CSS, and dark mode support. Within minutes, I had:

  • A proper folder structure (src/pages, src/components, src/layouts)
  • An Astro config with Tailwind integration
  • A base layout component with navigation
  • Dark mode toggle logic
  • A few starter components

This would’ve taken me an hour to set up from scratch, debugging Tailwind config and testing the dark mode toggle. Claude handled it in one prompt.

The scaffold wasn’t perfect—there were some import path issues and the dark mode strategy needed refinement—but it gave me 80% of the groundwork immediately. That’s where Claude Code shines: eliminating the boring setup work so you can focus on decisions that matter.

Building Components: Where AI Got Out of Its Own Way

Once the scaffold existed, I started building actual components. The homepage needed a bento grid layout with seven cards: hero, projects, about, contact, social links, now, and writing.

I described the design to Claude Code—“four-column grid, cards with rounded borders, 24px padding, gaps between them”—and it generated the component logic and Tailwind classes. Then I made a decision: the layout needed to be responsive, so the grid would collapse to two columns on tablets and one column on mobile. Claude Code implemented that with Tailwind’s responsive prefixes (md:, lg:).

What I appreciated here was that Claude Code didn’t try to make design decisions for me. I said what the layout should look like, and it built exactly that. I could’ve asked for different grid arrangements, and it would’ve adjusted. The AI was a tool, not a collaborator pretending to have taste.

The same pattern held for individual card components. I’d sketch out the content (name, headline, list of projects), and Claude Code would build the component, handle text overflow, implement hover states. Then I’d refine the margins, tweak the spacing, adjust the text color for contrast. That back-and-forth loop was fast because Claude Code understood Tailwind deeply enough to make sensible defaults, and I could override them with specificity when I wanted something different.

Dark Mode: The Unpleasant Surprise

I’ll be honest—dark mode took longer than expected. The design spec called for a specific color palette: dark backgrounds (#09090b), cards (#111113), and several layers of grays for text and borders. I wanted this to flip gracefully in light mode too.

Claude Code generated the dark mode toggle and understood the concept of class-based theming, but getting the colors consistent across every component required multiple passes. A muted text color would look wrong on one component but right on another. Borders would be too subtle in light mode. The social icons in the footer wouldn’t have enough contrast.

What I learned: Claude Code is good at implementing a pattern once you’ve established it, but you need to establish the pattern first. I ended up creating a comprehensive color system in Tailwind’s config, then referencing it everywhere. That took human deliberation—choosing exact hex values, testing them on different backgrounds, deciding hierarchy. Once that was done, Claude Code could apply the system consistently.

Blog System: MDX Setup and Templating

Setting up the blog was where things got interesting. I needed:

  • A content collection in src/content/blog/ with MDX files
  • Frontmatter schema (title, description, date, tags)
  • A blog index page listing all posts
  • Dynamic routes for individual post pages
  • A layout component that styled the blog post HTML

Claude Code generated an Astro content collection configuration, created the content schema, built the blog index page with filtering and sorting, and generated a blog layout with proper typography. I provided the design system (font sizes, line heights, colors) and the frontmatter schema, and Claude Code implemented it.

Then I wrote a few test posts in MDX to see how it felt. The workflow worked: write in a .mdx file with frontmatter, commit, Vercel auto-deploys. No UI, no friction. This alone made the rebuild worth it.

What Claude Code Did Well

  1. Boilerplate elimination: Scaffolding took 30 minutes instead of two hours.
  2. Component generation: Describing a component once meant Claude Code could build five variations.
  3. Tailwind depth: Claude Code knows Tailwind classes better than most humans. It could generate responsive grids, dark mode variants, and hover states without requiring explicit examples.
  4. Iteration speed: “Can you make this card have a border on hover?” → done in 10 seconds.
  5. MDX integration: Setting up Astro’s content collection, parsing frontmatter, and routing dynamic blog posts was handled competently.

What Required Human Judgment

  1. Design decisions: Which cards go where? How big should the typography be? Should there be animations? These are taste calls, and Claude Code doesn’t have taste. It can implement whatever you describe, but you have to describe it.
  2. Content strategy: What should the site actually say? What projects should be highlighted? What’s the narrative arc of the about page? That’s strategy, not implementation.
  3. Brand voice: Every piece of copy—navigation labels, card headlines, the footer—had to match a specific tone. Claude Code can match examples if you provide them, but it can’t invent voice.
  4. Layout refinement: The first pass at spacing always felt slightly off. I’d squint at it, move padding from 20px to 24px, adjust line heights, shift columns around. These micro-decisions compound into something that feels right. Claude Code helped implement them fast, but I had to know what I was looking for.
  5. Performance and optimization: Claude Code generated working code, but there were moments where I wanted to double-check: Is this query efficient? Is this component re-rendering unnecessarily? I ended up reviewing key pieces to make sure they were solid.

Timeline and Effort

Here’s how it actually went:

Friday evening (2 hours): Set up the basic Astro project, got the scaffold working locally, sketched out the homepage layout.

Saturday morning (4 hours): Built the seven homepage cards, implemented dark mode basics, set up navigation.

Saturday afternoon (3 hours): Refined dark mode colors, created the about page layout, built the contact form stub.

Sunday (2 hours): Set up the blog collection, created the blog index and individual post template, wrote test posts.

Following week (spread across 5–6 hours): Fine-tuned spacing and margins, wrote actual blog post content, tested mobile responsiveness, deployed to Vercel.

Total: about 16–18 hours of actual work. Without Claude Code, I’d estimate that taking 40–50 hours.

The Economics

Here’s the financial part:

  • Webflow cost: $20/month = $240/year
  • Vercel cost: $0 (free tier handles all my traffic)
  • Dev tools: Claude Pro subscription, which I already had for other work. Incremental cost: $0
  • Design tools: Figma (used to sketch mockups, already had it for other projects)

The rebuild pays for itself in one year just from the hosting savings. And every month going forward, I save $20 versus maintaining it in Webflow.

More importantly, I now have a codebase I actually want to touch. If I want to add a feature—an image gallery, a project showcase component, a newsletter signup—I can. It takes 10 minutes and a Claude Code prompt instead of navigating Webflow’s visual editor.

The Lesson

The real insight here isn’t technical. It’s this: AI makes it possible for operators to own their tech stack without hiring a developer.

For years, the choice was: learn to code deeply enough to build and maintain a website, or pay someone else to do it, or use a no-code tool and accept the limitations. Now there’s a fourth option: use Claude Code to build the specific thing you need, make your own design decisions, and own the result.

I’m not learning Astro deeply. I’m not becoming a frontend expert. I’m using Claude Code as a collaborator to move from idea to implementation fast, so I can focus on the parts that actually matter: the design, the writing, the strategy.

If you’ve been thinking about migrating from Webflow or Squarespace or whatever, or you’ve wanted a personal website but the activation energy felt too high, this is your sign that it’s easier than you think. You don’t need to be a software engineer. You just need to be able to describe what you want and make decisions about what matters to you.

Related reading:

Tools used:

← All posts