Hoe ik een website in minuten opnieuw ontwierp met Claude Opus

Hoe ik een website in minuten opnieuw ontwierp met Claude Opus

Twee weken geleden zat ik om 23:00 uur aan mijn bureau met een probleem. Een klant had hun volledige website nodig omgezet van een basic lichtthema naar een gepolijst donker ontwerp, een gloednieuwe servicepagina gebouwd vanaf nul, en een volledige SEO-audit met alle fixes gedeployed — allemaal vóór een maandagochtendvergadering. De oude ik zou een nachtdienst hebben gedaan, CSS doorsloffen, HTML schrijven, Lighthouse uitvoeren en handmatig metatags patchen.

In plaats daarvan opende ik Claude Code, typte drie prompts en ging naar bed.

Toen ik wakker werd, was de site live. Donkerthema met perfecte contrastverhoudingens. Een servicepagina die de bestaande ontwerptaal tot op de spatiëring matched. Metatags, sitemap, robots.txt, favicon, Open Graph-kaarten — allemaal aanwezig. De volledige transformatie duurde Claude ongeveer twaalf minuten actieve verwerkingstijd. Mijn totale praktische betrokkenheid? Misschien negentig seconden typen.

Die nacht veranderde hoe ik denk over webontwikkelingsworkflows. Niet omdat de AI iets magisch deed — maar omdat het blootlegde hoeveel van "webontwikkeling" eigenlijk repetitieve besluitvorming is die een goed geïnstrueerde agent kan afhandelen.

Het probleem dat niemand toegeeft over websiteonderhoud

Een vuil geheim dat de meeste developers niet hardop zeggen: een website onderhouden is saai. Een website bouwen? Dat is spannend. Maar zes maanden later, wanneer de klant vraagt om van lichtmodus naar donkermodus te schakelen, een pagina toe te voegen en "die SEO-dingen te fixen" — dat is het werk dat niemand wil doen.

Het is geen moeilijk werk. Dat is het frustrerende deel. Een lichtthema converteren naar donker is voornamelijk het aanpassen van achtergrondkleuren, tekstkleuren, randkleuren en ervoor zorgen dat contrastverhoudingens toegankelijk blijven. Elke taak duurt misschien een uur of twee. Maar gestapeld samen eten ze een hele dag op.

Dit is precies het soort werk waarvoor AI-agents gebouwd zijn. Niet de creatieve architecturale beslissingen. De consistente, patroonvolgende uitvoering.

Wat Claude Opus 4.6 anders doet

Claude Opus 4.6 is niet alleen een slimmere chatbot. Wanneer je van Chat-modus naar Code-modus schakelt in Claude Desktop, verander je fundamenteel het interactiemodel. In Chat-modus geeft Claude je antwoorden. In Code-modus voert Claude acties uit.

Dat onderscheid is belangrijk. Toen ik Claude vroeg het thema van mijn website te converteren, gaf het me geen CSS-suggesties en zei "probeer deze waarden te veranderen." Het opende de daadwerkelijke HTML- en CSS-bestanden in mijn Git-repository, analyseerde het bestaande kleurenschema, bracht elk kleurtoken in kaart naar het equivalent in donkere modus, maakte de wijzigingen en toonde me een diff van wat het had aangepast.

Er is nog één stuk van de architectuur dat dit krachtig maakt: skills. Voor het herontwerpproject gebruikte ik twee skills:

De Front-end Design Skill — een officieel door Anthropic onderhouden skill met meer dan 100.000 installaties. Het geeft Claude diepgaande kennis van ontwerpsystemen, kleurtheorie, toegankelijkheidsnormen en responsieve lay-outpatronen.

De SEO Audit Skill — een community-skill met ongeveer 19.000 installaties. Deze verandert Claude in een uitgebreide SEO-analyzer die je site kan crawlen, problemen kan identificeren en ze daadwerkelijk kan implementeren.

Claude instellen als je website-agent — stap voor stap

Stap 1: Een website in een Git-repository krijgen.

Claude heeft bestandsysteemtoegang nodig via een Git-repo. Beheerde platforms zoals Squarespace of Wix zonder Git-toegang werken niet voor deze workflow.

Stap 2: Claude Desktop installeren en overschakelen naar Code-modus.

Download Claude Desktop van de website van Anthropic. Na installatie ben je standaard in Chat-modus. Schakel over naar Code-modus. Dit is de stap die de meeste mensen missen.

Stap 3: Stel je werkdirectory in op de lokale kloon van je Git-repository.

Stap 4: Begrijp het claude.md-bestand.

Denk hieraan als de instructiehandleiding die je Claude geeft over je specifieke project — projectstructuur, conventies, speciale regels. Dit bestand blijft bestaan tussen sessies.

Stap 5: Installeer de skills.

/install-skill frontend-design
/install-skill seo-audit

Het herontwerp: van lichtthema naar donker in minuten

Ik begon met een simpele prompt: "Converteer deze website van het huidige lichtthema naar een modern donkerthema met perfecte contrast."

Claude ging aan het werk. Het scande elk HTML- en CSS-bestand. Het identificeerde het kleurenpalet. Vervolgens begon het wijzigingen aan te brengen.

De achtergrond verschoof van wit (#FFFFFF) naar een diep antraciet (#1a1a2e). Tekst ging van bijna-zwart naar een gebroken wit (#e0e0e0). Accentkleuren werden aangepast. Kaartcomponenten kregen subtiele randaanpassingen.

Wat me indruk maakte was de consistentie. Elk component werd bijgewerkt. Geen weesachtige lichtgekleurde elementen. Geen contratovertredingen.

De volledige themaconversie duurde ongeveer vier minuten.

Een servicepagina toevoegen zonder één regel te schrijven

De volgende prompt: "Maak een nieuwe Servicespagina die consistent is met het bestaande ontwerp. Werk de navigatie op beide pagina's bij om de nieuwe link op te nemen."

Claude analyseerde de bestaande pagina's — de headerstructuur, de inhoudslay-out, de typografieschaal, de spatiëringsritme, het footerformaat — en repliceerde dit allemaal voor de nieuwe servicespagina.

Navigatie-updates vonden tegelijkertijd plaats op beide pagina's. Semantische opmaak werd automatisch toegevoegd: correcte <nav>-elementen, aria-current="page"-attributen, correcte koppenstructuur.

Dit duurde ongeveer drie minuten.

De SEO-audit die vond wat ik miste

Prompt: "Voer een volledige SEO-audit uit op deze website."

Kritieke problemen gevonden:

• Geen robots.txt-bestand
• Geen XML-sitemap
• Ontbrekende favicon
• Dubbele of ontbrekende metabeschrijvingen

Hoge prioriteit:

• Ontbrekende Open Graph-tags
• Ontbrekende Twitter Card-tags
• Onvolledige koppenstructuur
• Geen canonieke URL's

Vervolgens gaf ik de instructie: "Implementeer alle aanbevolen SEO-fixes."

Het robots.txt-bestand dat het genereerde:

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

Totale tijd voor de volledige SEO-audit en implementatie: ongeveer vijf minuten.

Het ene ding dat Claude fout deed

De favicon-implementatie was technisch correct maar praktisch onvolledig. Claude voegde de <link rel="icon">-tag toe aan elk HTML-bestand en verwees naar een favicon.ico-pad. Het probleem? Het maakte het daadwerkelijke favicon-afbeeldingsbestand niet aan. Het verwees naar een bestand dat niet bestond.

Dit is een subtiele maar belangrijke foutklasse om op te letten bij AI-agents. De code was syntactisch perfect. Maar het daadwerkelijke asset ontbrak.

Nadat ik dit aanwees, genereerde Claude onmiddellijk een eenvoudige SVG-favicon en werkte de verwijzing bij. Probleem opgelost in dertig seconden.

Waarom dit de rekenmethode verandert voor solo-developers

Dat is ruwweg een 30-40x versnelling. Wanneer een klant vraagt om een themawijziging en je weet dat het vier minuten duurt in plaats van drie uur, doe je het meteen. Die responsietijdverschil verandert de klantrelatie volledig.

Wat ik de volgende keer anders zou doen

• Geef Claude meer context vooraf — specifieke merkkleuren, designtokens
• Bekijk diffs, niet pagina's — de Git diff toont je precies wat er veranderd is
• Commit tussen prompts — geeft je schone rollback-punten
• Vertrouw SEO-audits niet blindelings — cross-referenteer met je eigen kennis
• Houd het claude.md-bestand bijgewerkt met ontwerpbeslissingen

Waar dit naartoe gaat

Ik bouw AI-systemen voor klanten via mijn agencywerk al meer dan twee jaar. De trajectorie is duidelijk: het vaardighedenecosysteem is de belangrijkste versneller. Naarmate meer skills worden ontwikkeld, blijft de reikwijdte van wat één prompt kan bereiken groeien.

Mijn voorspelling: binnen een jaar zal de standaardworkflow voor solo-developers niet zijn "bouw de site, optimaliseer hem dan." Het zal zijn "bouw de site met een AI-agent die optimalisatie als ingebouwde stap afhandelt."

Jouw volgende stap

Die klantsite die ik aan het begin noemde? Ging maandagochtend live. De klant was dol op het donkere thema. Drie weken later daalde de gemiddelde laadtijd van de pagina met 0,4 seconden en begon het te ranken voor twee long-tail zoekwoorden.

Als je websiteonderhoud, ontwerpvernieuwingen of SEO-opruiming hebt uitgesteld — stel Claude Code in met deze twee skills dit weekend. Probeer de workflow op één pagina van één project. De twaalf minuten die het duurt, overtuigt je sneller dan alles wat ik hier kan schrijven.