Bestaande website aanpassen met Claude Code: veilig stappenplan

Je wilt een bestaande website aanpassen met Claude Code, maar niet per ongeluk een formulier, route of andere functie beschadigen. De betrouwbaarste werkwijze begint daarom niet met meteen code laten wijzigen. Laat Claude Code eerst de relevante onderdelen en projectregels verkennen, spreek af wat precies verandert en wat moet blijven werken, en voer de aanpassing stap voor stap uit.

Zo houd je de wijziging klein genoeg om te begrijpen en te controleren. Claude Code kan een codebase onderzoeken en helpen wijzigingen te maken, maar jij blijft verantwoordelijk voor de gewenste uitkomst en de controle achteraf. (Claude Code: veelvoorkomende workflows)

1. Beschrijf één concrete verandering

Begin met het zichtbare probleem of de gewenste verbetering. “Maak mijn website beter” is te breed om veilig uit te voeren. Een duidelijke opdracht noemt de plek, het gedrag en de gewenste uitkomst.

Bijvoorbeeld: “Op de contactpagina is de verzendknop op een smal scherm moeilijk te bedienen. Maak alleen die knop beter bruikbaar op mobiel. Laat de velden, validatie, verzendactie en desktopweergave hetzelfde.”

Zet er ook bij wat buiten de opdracht valt. Denk aan andere pagina’s, bestaande componenten, de vormgeving van de hele site of onderliggende integraties. Een expliciete grens helpt voorkomen dat een kleine vraag stilletjes een grotere herwerking wordt.

2. Laat eerst de bestaande code verkennen

Open Claude Code in de hoofdmap van het project. Vraag eerst om onderzoek, zonder al bestanden te laten aanpassen. Begin breed en zoom daarna in op de pagina en functie die je wilt wijzigen. Anthropic beschrijft die aanpak ook voor het leren kennen van een onbekende codebase: eerst een overzicht, daarna gerichte vragen over relevante onderdelen en hun samenhang. (Claude Code: codebases verkennen)

Vraag bijvoorbeeld:

• Welke bestanden bepalen deze route en het gedrag dat ik wil aanpassen?
• Hoe loopt de huidige werking van scherm tot eventuele serveractie?
• Welke projectinstructies en bestaande patronen gelden hier?
• Welke controles of tests bestaan al voor dit onderdeel?
• Welke andere functies kunnen door deze wijziging geraakt worden?

Controleer zelf of het antwoord naar de juiste route en bestanden verwijst. Laat Claude geen component vervangen voordat duidelijk is welke taak die component heeft en waar de grenzen van de opdracht liggen.

3. Spreek af wat hetzelfde moet blijven

Beschrijf niet alleen wat er verandert, maar ook welk gedrag behouden moet blijven. Dat is extra belangrijk bij formulieren, accounttoegang, betalingen, e-mail, webhooks, licenties of andere koppelingen. Vraag bij zo’n onderdeel eerst om de relevante code en gevolgen in kaart te brengen.

Lees de bestaande instructiebestanden in het project, zoals AGENTS.md of CLAUDE.md, als die er zijn. Daar kunnen afspraken staan over architectuur, toegestane dependencies, stijl en de juiste controles. Anthropic documenteert dat Claude Code projectinstructies uit CLAUDE.md en ook bestaande AGENTS.md-bestanden kan gebruiken. (Anthropic over projectinstructies)

Maak de grenzen concreet. “Behoud de checkout” is bijvoorbeeld duidelijker als je ook zegt dat het formulier, de route, de velden, de serverlogica en webhook niet aangepast mogen worden. Als de analyse toch een wijziging aan zo’n grensgebied nodig lijkt te maken, laat Claude dat eerst uitleggen en vraag om een kleiner alternatief.

4. Vraag om een plan voordat de code verandert

Voor een wijziging met meerdere bestanden of mogelijke neveneffecten is het verstandig eerst de voorgestelde aanpak te bekijken. In Claude Code kun je Plan Mode inschakelen met claude --permission-mode plan. In die modus kan Claude de wijziging onderzoeken en plannen; het plan is bedoeld om te beoordelen voordat de bewerking begint. (Anthropic over plannen vóór bewerken)

Een goed plan noemt de bestanden die waarschijnlijk veranderen, de kleinste passende oplossing, de bestaande werking die behouden blijft en de controles na afloop. Vraag om een verduidelijking wanneer het plan een ongevraagde herbouw, extra dependency of aanpassing aan een kritieke functie bevat.

Bij een kleine, duidelijk afgebakende tekstwijziging is een apart plan mogelijk niet nodig. Blijf wel de bestaande instructies volgen en controleer de uiteindelijke wijziging.

De volgorde maakt het makkelijker om de scope en bestaande werking tijdens elke stap te bewaken.

5. Werk in kleine stappen en bekijk de verschillen

Laat Claude de afgesproken verandering uitvoeren zonder tegelijk andere code op te schonen. Vraag na elke betekenisvolle stap kort wat er gewijzigd is en waarom. Anthropic adviseert bij refactorwerk kleine, testbare stappen en een controle van de aanpassing. (Claude Code: refactoren en verifiëren)

Bekijk daarna de wijzigingen zelf. Met Git kun je onder meer git status --short gebruiken om gewijzigde bestanden te zien en git diff om de inhoud van de wijzigingen te lezen. Vraag Claude om de diff samen te vatten, maar controleer ook of er geen onverwachte bestanden zijn aangepast. (Git: git diff)

Let vooral op wijzigingen buiten de afgesproken pagina, verwijderde bestaande logica, nieuwe dependencies en veranderingen aan configuratie of toegang. Als je al eigen, niet-opgeslagen werk hebt, laat dat eerst in kaart brengen; laat Claude geen bestaande wijzigingen overschrijven om de taak “schoon” te maken.

6. Controleer de werkelijke werking

Zoek in package.json of de projectdocumentatie op welke build-, lint-, type- en testcommando’s dit project echt gebruikt. Die commando’s verschillen per project. Laat daarom geen willekeurige controles uitvoeren alleen omdat een andere website die gebruikt.

Controleer vervolgens de route zelf in een lokale preview. Test de gevraagde verandering op het schermformaat waarvoor ze bedoeld is. Loop ook het bestaande gedrag na dat volgens de opdracht behouden moest blijven. Voor een formulier kun je bijvoorbeeld de invoervelden en validatie bekijken zonder echte e-mails te verzenden.

Als een relevante controle faalt, laat Claude de fout verklaren en de kleinste oplossing voorstellen. Publiceer niet zolang de oorzaak onduidelijk is of de bestaande werking niet gecontroleerd is. Claude Code vraagt in bepaalde situaties om toestemming voor acties; schakel die beschermingen niet uit om sneller klaar te zijn. (Anthropic over permissies)

Een briefing die je kunt hergebruiken

Pas deze tekst aan je project aan voordat je de wijziging laat uitvoeren:

Ik wil [concrete verandering] op [route of onderdeel], zodat [gewenste uitkomst].

Begin met analyse en wijzig nog geen bestanden. Lees de projectinstructies en onderzoek hoe dit onderdeel nu werkt. Noem de relevante bestanden, bestaande patronen en functies die geraakt kunnen worden.

Verander alleen wat nodig is voor deze opdracht.
Behoud: [routes, gedrag, integraties of andere grenzen].
Raak niet aan: [onderdelen buiten scope].

Stel daarna een kort plan voor met de verwachte bestanden en controles. Wacht op mijn akkoord als de oplossing buiten deze grenzen komt of als informatie ontbreekt.

Voer de afgesproken wijziging in kleine stappen uit. Gebruik de bestaande patronen en voeg geen dependency toe zonder eerst uit te leggen waarom.

Controleer de relevante scripts uit dit project, bekijk de volledige diff en test de echte route lokaal. Voer geen betalingen, echte e-mails of andere externe acties uit.

Rapporteer welke bestanden zijn gewijzigd, wat je hebt gecontroleerd en welke punten nog openstaan. Stop bij een fout die je niet veilig kunt oplossen.

Klaar voor publicatie?

Controleer vóór een productiepublicatie nog één keer of de wijziging overeenkomt met de opdracht, de relevante controles slagen en de echte pagina goed werkt. Een geslaagde build toont dat de toepassing kan bouwen; die vervangt geen controle van de gewijzigde gebruikersflow.

Wil je vooraf de hele site nalopen, gebruik dan ook de SEO-checklist voor een nieuwe website. Voor een projectbriefing kun je starten met het gratis taakdossier.