Back to blog
7 min read

How I Built This Entire Website Inside Claude Code

The eaglesssolutions.com marketing site was designed, coded, iterated, and shipped end-to-end through Claude Code. Here is exactly how the workflow runs and why it beats the classic editor loop.

This website, the one you are reading right now, was built end-to-end inside Claude Code. No hand-written React scaffolding, no IDE-native copy-paste loop, no design tool round-trips. Just a terminal, a single repo, and a Claude agent that designs, codes, reviews, and ships.

I am sharing the exact workflow because it completely changed how fast I can turn an idea into a production marketing site, and because most people still think of AI coding as autocomplete. It is not. It is full-loop engineering.

The stack Claude Code picked with me

Before a single component existed, Claude and I agreed on a stack. I wanted something fast, static-friendly, i18n-ready, and easy to animate. We landed on:

  • Next.js 16 App Router with Turbopack for the build
  • React 19 Server Components where possible, Client Components only for animation-heavy pieces
  • Tailwind CSS 4 with theme tokens for colors, radii, and fonts
  • next-intl for English and Dutch locale routing
  • framer-motion for the aurora background and section entrances
  • lucide-react for iconography, with inline SVGs for brand logos

Everything runs on Vercel and deploys on every push to main. Nothing exotic — the value was never in the stack, it was in how it got assembled.

The loop: feedback in, diffs out

A normal dev cycle looks like: open the editor, scan files, make a change, refresh the browser, check, repeat. With Claude Code the cycle collapses into a conversation. I describe what I want, the agent reads the relevant files in parallel, plans the edit, writes the diff, and runs the type checker and build. Then I screenshot the result, paste it back, and Claude iterates on the exact visual feedback.

A concrete example: the hero section had a gold aurora glow with a visible horizontal seam where it met the next section. I sent a screenshot and said make the transition feel like one page. Claude traced the root cause (overflow-hidden on the Section component), extended the aurora container past the section bounds, applied a radial mask, and rebuilt. One message. No context switching.

What I actually typed into Claude Code

The interesting part is how underspecified my instructions could be. I was not writing tickets. I was writing impressions.

  • "The question mark in the Why Choose Us heading is clipped, fix it across all headings" — Claude found the shared SectionHeading component, identified the italic glyph overhang against the background-clip text rule, and added paddingInlineEnd to the italic span. One change, every heading fixed.
  • "Make the automations card flow diagram stay inside the black box" — Claude identified the flex node widths, added truncate and overflow-hidden, and responsive sizing for narrow cards.
  • "There is no way to close the mobile menu" — Claude added an explicit close X inside the drawer, bumped the overlay z-index, and wrapped the booking CTA so tapping it dismisses the menu.

Every one of those maps to a code change I would normally have to think about for 10 minutes and then execute for 20. In Claude Code it was a sentence and a diff.

What the agent does that I would not bother to do

The underrated part is the work that happens around the code I asked for.

  1. It reads multiple files in parallel before editing, so the edit fits existing patterns rather than introducing a second way to do the same thing.
  2. It runs the TypeScript build before claiming success. If it breaks, it diagnoses and fixes before telling me.
  3. It commits with a structured conventional commit message that explains the why, not just the what.
  4. It pushes to origin only when I say so. Nothing is surprise-published.

I am not babysitting the agent. I am reviewing outcomes.

Where it pays off the most

Polish is the real win. A marketing site lives or dies on micro-details: line heights, gradient falloffs, animation timings, mobile nav ergonomics, responsive breakpoints. Those are the things a solo founder never has time to finish. With Claude Code I can say "this looks abrupt, soften it" and watch the diff land. The site gets polished the way a design team would polish it, but in one person's calendar.

The other big win is consistency. Shared components like SectionHeading mean every section uses the same h2 treatment. When I asked for the clipping fix, it propagated to seven section titles automatically because Claude edited the primitive, not the instance.

What I would not do differently

I would not run this pattern for a throwaway landing page. The value compounds when the codebase is long-lived and the component library is shared. This site has a typed i18n schema, shared Section and Container primitives, and a design token system. Each of those amortizes over every change Claude ships.

I also would not skip review. I read every diff. Not because Claude is wrong often — it is not — but because the only way to stay the architect of a codebase you are not hand-writing is to understand every change that lands. It takes thirty seconds per diff. That is the price of moving this fast.

Takeaway

If you are still treating AI tools as autocomplete, you are leaving most of the value on the table. Claude Code is a pair programmer that can read your repo, design a solution, write the diff, run the build, and ship the commit. I built a full marketing site, in two languages, with animated backgrounds and a mobile menu and a blog pipeline, without leaving a terminal. And the next time a client asks for something like this, I will not quote them three weeks. I will quote them a week.

If you want to see it live, the site is eaglesssolutions.com. If you want the same leverage inside your own business, that is exactly what I build for a living.