Gratis · pdf · 19 pagina's
Zo bouw ik de homepage van een zaak: tien blokken, van boven naar onder, elk met één taak. Plus de prompt waarmee Claude Code hem voor jouw zaak bouwt.
Wat het is
Je homepage is je voordeur. Een bezoeker die je niet kent, beslist in een paar tellen: blijf ik, of ga ik weg? Elk blok heeft daarom één taak. Samen leiden ze hem naar die ene actie: een afspraak maken, een offerte vragen, langskomen.
In de pdf staat per blok een pagina: wat erin komt, waarom, één valkuil en wat het voorbeeld deed. Dat voorbeeld is Lunchroom De Zon, een voorbeeldzaak die ik met Claude Code bouwde. De zaak bestaat niet, de pagina wel.
In drie tellen: wat en waarom
Twijfel weg in één regel
Eerst trek maken, dan alles
Het nieuwe even uitleggen
Mensen kopen bij mensen
Grotere klanten, eigen knop
Zien is zin krijgen
Anderen zeggen het beter
Bezwaren vooraf weg
Een tweede kans onderaan
De knop onder je duim
Zo ziet hij eruit
De startprompt
Dit is de prompt uit de pdf, letterlijk. Vul de vier plekken in de eerste zin in en laat de rest staan.
Kapsalon Wervel is een voorbeeldzaak: verzonnen, om de prompt mee te proeven.
Startprompt
Maak een homepage voor [je zaak en wat je doet], voor [wie je klanten zijn], in [waar je zit]. Het doel: bezoekers gaan [de ene actie die een bezoeker moet doen]. Bouw hem volgens deze tien blokken, van boven naar onder, elk met één doel: 1. Bovenaan: in drie tellen wat ik doe en waarom bij mij, met twee knoppen (de hoofdactie en een tweede keuze). 2. Vertrouwen: drie of vier korte punten die twijfel wegnemen. 3. Populair: mijn drie populairste diensten of producten met prijs, en een link naar alles. 4. Zo werkt het: in drie stappen hoe iemand klant wordt. 5. Mijn verhaal: wie ik ben, in drie korte zinnen, met een foto. 6. Een tweede groep klanten (bijvoorbeeld zakelijk of groepen), met een eigen knop. 7. Sfeer: vier tot zes foto's van mijn werk of mijn zaak. 8. Reviews: drie tot vijf, met voornaam en sterren. 9. Vragen: de vijf vragen die mensen tegenhouden, met een kort antwoord. 10. Onderaan: nog één keer de twee knoppen, met openingstijden, adres en contact. Op de telefoon: een vaste balk onderin met de hoofdknop, zodra de knoppen bovenaan uit beeld zijn. Vul alles in zodat de pagina er af uitziet: verzin wat je niet weet (reviews, prijzen, openingstijden, adres, beloftes die bij zo'n zaak passen), geen [invullen] op de pagina. Gebruik als telefoonnummer 06 12345678. Zet na het bouwen in een kort lijstje wat je verzonnen hebt, zodat ik dat vervang door echte gegevens voordat de pagina online gaat. Foto's die ik nog niet heb: een nette lege plek met wat erop moet. Stijl: kies in het plan eerst een eigen stijl die bij mijn zaak past (twee lettertypen van Google Fonts, drie of vier kleuren, de sfeer) en houd je daar overal aan. Bovenaan een grote foto over de hele breedte met de kop erop. Ruime witruimte, blokken duidelijk gescheiden, geen standaard sjabloon. Op de telefoon: niets mag breder worden dan een scherm van 320 px (grid-kolommen altijd minmax(0,1fr), nooit kaal 1fr; geen vaste breedtes), en de balk bovenin blijft één regel. Schrijf in gewone taal, zoals ik tegen een klant praat. Heb ik nog geen website, maak dan een gewone pagina (index.html met een stylesheet) die ik met een dubbelklik open. Laat eerst alleen het plan zien: per blok wat erin komt. Bouw pas als ik "ga maar" zeg.
/plan en een spatie. Plak dan de prompt erachter en druk op Enter. Onderin staat nu "plan mode on": Claude bedenkt eerst een plan en bouwt nog niets.Plak je /plan mee in hetzelfde blok? Dan ziet Claude Code het als gewone tekst en gaat plan mode niet aan. Typ het dus zelf, met een spatie erachter.
Geproefd
Ik liet de startprompt proeven op drie verzonnen zaken: een kapper, een installateur en een fysiotherapeut. De proef speelde na wat jij doet: de vier plekken invullen, eerst het plan laten maken en dan "ga maar" zeggen. Daarna kwam nog één beurt om de foto's erin te zetten. Bij alle drie stonden de tien blokken en de actiebalk erop. Een controle mat de pagina's van 320 tot 1440 pixels breed: bij alle drie liep niets uit beeld, bij de kapper na één extra zin.
Voorbeeldzaak
Een kapper in Amersfoort
3 beurten, 3 min 15 s werk van Claude (zonder het maken van de foto's).
Wat misging: Op een scherm van 320 px stak de pagina 28 px buiten beeld. Daarom die extra zin; Claude loste het op.
De extra zin: En op mijn telefoon schuift de pagina een stukje opzij, kun je dat oplossen?
Voorbeeldzaak
Een installateur in Nieuwegein
3 beurten, 2 min 8 s werk van Claude (zonder het maken van de foto's).
Wat misging: Twee foto's hadden een nep-logo (op de bus en de jas). Dat kwam van de beeldmaker, niet van de prompt. Ze zijn opnieuw gemaakt.
Open de pagina
Voorbeeldzaak
Een fysiotherapeut in Woerden
4 beurten, 2 min 5 s werk van Claude (zonder het maken van de foto's).
Wat misging: Op de computer zaten de twee knoppen bovenaan tegen de onderrand van de grote foto. Eén extra zin gaf ze meer ruimte. Eén foto (met een stethoscoop) is ook opnieuw gemaakt.
De extra zin: Op de computer zitten de twee knoppen bovenaan tegen de onderrand van de grote foto. Geef ze wat meer ruimte.
Elke pagina is echt te openen: tik op "Open de pagina" bij een zaak. Ze zijn verborgen voor Google, en een knop die zou bellen of mailen laat een melding zien. Eerlijk erbij: alles op deze schermen buiten de vier plekken is verzonnen: namen, prijzen, tijden, beloftes en reviews. Alles is gebouwd met Claude Code (versie 2.1.291) en het model Sonnet, op 6 oktober 2026. Claude Code maakt zonder koppeling met een beeldmaker zelf geen foto's: die liet ik apart maken met een beeldmaker, en Claude zette ze op de lege plekken.
De ruil
Vul je e-mailadres in. Je krijgt een mail met je eigen downloadlink: de blueprint als pdf, 19 pagina's.
Je krijgt alles: de plaat, de tien blokken met hun waarom en hun valkuil, het voorbeeld en de prompt als tekst die je kunt kopiëren.
Vragen over de blueprint
Gratis gebruiken en aanpassen, ook voor je eigen bedrijf. Niet doorverkopen en niet aanbieden als je eigen product, ook niet aangepast.
Er zit geen garantie op. Kijk zelf na wat Claude bouwt, zeker voordat je iets online zet.
Wil je hem delen? Stuur mensen naar deze pagina.
De blueprint kost niks. Je e-mailadres is de ruil: je krijgt hem, en daarna af en toe een mail van mij. Uitschrijven kan altijd. Claude Code zelf heeft wel een betaald abonnement of API-tegoed nodig: zie Claude Pro of Max.
Nee. Je plakt de prompt, leest het plan en zegt "ga maar". Claude Code bouwt, jij kijkt en stuurt bij. Claude Code nog niet op je Mac? Dan helpt Claude Code installeren.
Waarschijnlijk wel. Plak hem dan zonder /plan: de laatste zin vraagt eerst om het plan. In een gewoon gesprek zonder gereedschap gaf Claude dan eerst alleen het plan. In de app zelf heb ik hem niet geprobeerd.
Nee. Claude vult alles in wat jij hem niet vertelt: reviews, prijzen, openingstijden, een adres. Dat is verzonnen, zodat je ziet hoe de pagina eruitziet als hij af is. De prompt vraagt Claude om je na het bouwen een lijstje te geven van wat hij verzon; bij alle drie de proeven deed hij dat. Zie je het niet, vraag er dan om. Vervang het verzonnene voordat de pagina online gaat.
Zonder koppeling met een beeldmaker niet. Dan krijg je nette lege plekken met een omschrijving van wat erop moet. Zet je eigen foto's in een map en zeg dat ze op de lege plekken moeten.
Zo kan ik je de blueprint sturen: je krijgt een eigen downloadlink in je mail. Daarna mail ik je af en toe wat ik die avond bouwde. Liever niet? Antwoord met afmelden, dan stop ik.
En daarna
