Claude Code kan een indrukwekkende website genereren op basis van een ontwerpvoorbeeld, maar het eerste resultaat sluit mogelijk niet volledig aan bij het beoogde zakelijke doel. In dit voorbeeld heeft Claude de visuele stijl nauwkeurig nagebootst, inclusief de lettertypen, kleuren, interactieve kaarten, testimonials, formulier en footer. Echter, er werd een website voor een tandartspraktijk gebouwd in plaats van voor een webbureau dat websites maakt voor tandartsen.

Dit kwam doordat het initiële verzoek onvoldoende context bood. In plaats van opnieuw te beginnen, kan het bestaande ontwerp verfijnd worden via een iteratief werkproces. Claude werd gevraagd de lay-out te behouden, maar de inhoud te herschrijven voor Outbound, een webbureau dat zich richt op tandartspraktijken in Austin. De primaire call-to-action werd gewijzigd naar een gratis website-audit.

Het verfijnen van de website met spraakinput

Lange projectinstructies hoeven niet altijd handmatig getypt te worden. De microfoonfunctie van Claude kan gebruikt worden om wijzigingen op een natuurlijke manier te beschrijven, waaronder:

• Wat het bedrijf doet
• Wie de doelgroep is
• Welke inhoud aangepast moet worden
• Welke onderdelen van het bestaande ontwerp behouden moeten blijven
• Wat de belangrijkste call-to-action moet zijn

Claude kan vervolgens vervolgvragen stellen wanneer belangrijke informatie ontbreekt en de website bijwerken op basis van de antwoorden.

Claude verbinden met Vercel

Zodra de website gereed is, moet deze worden gedeployed naar een hostingplatform. In plaats van handmatig Git, GitHub en deploy-instellingen te configureren, kan Claude Code direct verbinding maken met Vercel via een MCP-connector.

Om Vercel te verbinden:

1. Klik op het pluspictogram naast het Claude-chatinvoerveld.
2. Open Connectors en selecteer Beheer connectors.
3. Klik op Connectors bladeren.
4. Zoek naar Vercel en klik op Verbinden.
5. Autoriseer Claude om toegang te krijgen tot het juiste Vercel-team en projecten.

Na het tot stand brengen van de verbinding kan Claude het project deployen, de deployment monitoren, fouten identificeren en de URL van de live website teruggeven.

Controleren van implementatieproblemen

De eerste implementatie kan mislukken als Claude het project nog aanpast in een andere sessie of als de huidige bestanden niet overeenkomen met de bestanden die tijdens de build zijn gebruikt. Claude kan de mislukte implementatie inspecteren, wachten tot de wijzigingen aan de website zijn voltooid, het project opnieuw bouwen en het opnieuw implementeren.

Voor publicatie kan Claude ook onvoltooide elementen identificeren, zoals:

• Een formulier dat niet is gekoppeld aan een backend
• Placeholder-inhoud
• Een ontbrekend aangepast domein
• Een onvolledig privacybeleid

Deze punten moeten worden gecontroleerd voordat een productie-website wordt gelanceerd. Een tijdelijke versie kan echter nog steeds worden geïmplementeerd voor test- of demonstratiedoeleinden.

Van ontwerpvoorbeeld naar live website

Na een succesvolle implementatie biedt Vercel een openbare URL die geopend kan worden op desktop- of mobiele apparaten. De resulterende website is responsief en kan later worden gekoppeld aan een aangepast domein.

Deze workflow laat zien dat Claude Code veel meer aankan dan alleen code schrijven. Het kan inhoud verfijnen, projectbestanden aanpassen, verbinding maken met externe diensten, buildfouten oplossen en een werkende website implementeren via instructies in natuurlijke taal.

De initiële fout benadrukt ook een belangrijke les: Claude presteert het beste wanneer het vanaf het begin duidelijke projectcontext ontvangt. Het definiëren van het bedrijf, het publiek, de doelen en het gewenste resultaat helpt het project op koers te houden en onnodige revisies te verminderen.