Terug naar blog
7 min leestijd

Hoe ik deze hele website bouwde in Claude Code

De marketingsite eaglesssolutions.com is volledig ontworpen, gecodeerd en gelanceerd in Claude Code. Dit is hoe die workflow werkt en waarom die sneller is dan de klassieke editor-loop.

Deze website, diegene die je nu leest, is volledig gebouwd in Claude Code. Geen handmatige React-scaffolding, geen kopieer-en-plak loop tussen IDE en browser, geen heen-en-weer tussen designtool en code. Gewoon een terminal, een repo en een Claude-agent die ontwerpt, codeert, reviewt en deployt.

Ik deel de exacte workflow omdat die de snelheid waarmee ik een idee naar een productie-site breng compleet veranderd heeft, en omdat de meeste mensen AI-coderen nog steeds als autocomplete zien. Dat is het niet. Het is engineering over de volledige loop.

De stack die Claude en ik samen gekozen hebben

Voor er één component bestond, hebben Claude en ik de stack vastgelegd. Ik wilde iets snel, static-friendly, klaar voor i18n en makkelijk te animeren. We landden op:

  • Next.js 16 App Router met Turbopack voor de build
  • React 19 Server Components waar mogelijk, Client Components enkel voor animatie-zware onderdelen
  • Tailwind CSS 4 met theme tokens voor kleuren, radii en fonts
  • next-intl voor Engelse en Nederlandse locale routing
  • framer-motion voor de aurora-achtergrond en sectie-animaties
  • lucide-react voor iconen, met inline SVGs voor brand-logos

Alles draait op Vercel en deployt bij elke push naar main. Niks exotisch. De meerwaarde zit niet in de stack, maar in hoe die in elkaar gezet wordt.

De loop: feedback erin, diffs eruit

Een normale dev-cyclus is: editor openen, files doorlopen, aanpassing maken, browser verversen, checken, herhalen. In Claude Code valt die cyclus samen tot een gesprek. Ik beschrijf wat ik wil, de agent leest de relevante files parallel, plant de aanpassing, schrijft de diff en draait de typechecker. Daarna stuur ik een screenshot van het resultaat en Claude itereert op exact die feedback.

Een concreet voorbeeld: de hero-sectie had een gouden aurora-gloed met een zichtbare horizontale rand waar hij de volgende sectie raakte. Ik stuurde een screenshot en vroeg om de overgang als één pagina te laten aanvoelen. Claude vond de oorzaak (overflow-hidden op de Section), breidde de aurora-container uit voorbij de sectiegrenzen, voegde een radial mask toe en rebuildde. Eén bericht. Geen context switch.

Wat ik écht typte in Claude Code

Het mooie is hoe vaag mijn instructies konden zijn. Ik schreef geen tickets. Ik schreef indrukken.

  • "Het vraagteken in de Why Choose Us heading wordt afgekapt, fix dat op alle headings" — Claude vond de gedeelde SectionHeading, zag de italic-overshoot tegen background-clip text, en voegde paddingInlineEnd toe aan de italic span. Eén wijziging, alle headings gefixt.
  • "Zorg dat het flowdiagram in de automations-card binnen het zwarte kader blijft" — Claude zag de flex-breedtes, voegde truncate en overflow-hidden toe plus responsive sizing voor smalle cards.
  • "Er is geen manier om het mobiele menu te sluiten" — Claude voegde een expliciete close X toe in de drawer, verhoogde de z-index van de overlay en wrapte de booking CTA zodat tappen het menu sluit.

Elk daarvan is een code-wijziging waar ik normaal 10 minuten over moet denken en 20 minuten aan werk. In Claude Code was het één zin en een diff.

Wat de agent doet dat ik zelf niet zou doen

Het meest onderschatte stuk is het werk rond de code die ik gevraagd heb.

  1. Hij leest meerdere files parallel vóór de wijziging, zodat de edit past bij de bestaande patronen in plaats van een tweede manier te introduceren.
  2. Hij draait de TypeScript build vóór hij zegt dat het gelukt is. Als het breekt, diagnosticeert en fixt hij voor hij me iets vertelt.
  3. Hij commit met een gestructureerd conventional commit message dat het waarom uitlegt, niet alleen het wat.
  4. Hij pusht alleen naar origin als ik dat zeg. Niks wordt per ongeluk gepubliceerd.

Ik babysit de agent niet. Ik review de uitkomsten.

Waar het het meeste rendeert

Polish is de echte winst. Een marketingsite staat of valt met micro-details: regelhoogtes, gradient-fades, animatie-timings, mobile-nav ergonomie, responsive breakpoints. Dat zijn net de dingen die een solo-oprichter nooit afmaakt. In Claude Code kan ik zeggen "dit voelt abrupt, maak het zachter" en de diff landt. De site wordt afgewerkt zoals een designteam dat zou doen, maar in de agenda van één persoon.

De tweede grote winst is consistentie. Gedeelde componenten zoals SectionHeading zorgen dat elke sectie dezelfde h2 krijgt. Toen ik om de clip-fix vroeg, werkte die automatisch door in zeven section titles omdat Claude de primitive aanpaste, niet de instance.

Wat ik niet anders zou doen

Ik zou dit patroon niet gebruiken voor een wegwerp-landingspagina. De meerwaarde compoundt pas als de codebase lang blijft leven en de componentenbibliotheek gedeeld wordt. Deze site heeft een getypte i18n-schema, gedeelde Section- en Container-primitives, en een design-token-systeem. Die amortiseren elke volgende wijziging die Claude uitrolt.

Ik zou ook review niet overslaan. Ik lees elke diff. Niet omdat Claude vaak fout zit — dat doet hij niet — maar omdat de enige manier om architect te blijven van een codebase die je niet met de hand schrijft, is door elke wijziging die landt te begrijpen. Dat kost dertig seconden per diff. Dat is de prijs voor zo snel gaan.

Conclusie

Als je AI-tools nog behandelt als autocomplete, laat je de meeste waarde liggen. Claude Code is een pair programmer die je repo kan lezen, een oplossing ontwerpt, de diff schrijft, de build draait en de commit shipt. Ik bouwde een volledige marketingsite, tweetalig, met geanimeerde achtergronden, een mobiel menu en een blog-pijplijn, zonder de terminal te verlaten. En de volgende keer dat een klant zoiets vraagt, quote ik geen drie weken meer. Ik quote een week.

Als je dit live wil zien, de site staat op eaglesssolutions.com. Als je dezelfde hefboom in je eigen business wil, dat is exact wat ik dagelijks bouw.