Website maken met AI: van eerste prompt tot live site

Om een website met AI te maken schrijf je op waarvoor de site dient en welke pagina's hij nodig heeft, beschrijf je dat in een paar gewone zinnen aan een AI-website- of app-bouwer en laat je een eerste versie genereren die je in een live voorbeeld ziet. Daarna verbeter je de teksten, controleer je de site op een telefoon, voeg je de basis toe die zoekmachines nodig hebben en publiceer je op een domein. De meeste kleine sites, zoals een bedrijfssite, een portfolio, een landingspagina of een eenvoudige blog, gaan in één middag van idee naar live.

Wat voor website ga je maken?

"Website" kan heel verschillende dingen betekenen, en het type dat je kiest bepaalt wat je vraagt:

Valt jouw site in de laatste rij, dan bouw je eigenlijk een web-app met een marketingvoorkant. Dat is prima, want AI-app-bouwers kunnen allebei, maar plan het app-deel apart; onze gids over een app maken met AI behandelt dat.

AI-websitebouwers, templates en AI-app-bouwers

Er zijn drie gangbare routes, en elk past bij iemand anders.

• Bouwers met templates en AI-functies (Wix, Squarespace, Framer en soortgelijke). Je begint met een ontworpen template en bewerkt visueel; AI helpt bij teksten of een indelingssuggestie. Ze zijn goed als je een beproefd ontwerp wilt, een visuele editor en ingebouwde extra's zoals een blog of afsprakenwidget.
• AI-app-bouwers (Mythex, Lovable, Bolt en andere). Je beschrijft de site in de chat en de AI schrijft de code helemaal opnieuw en draait die in een live voorbeeld. Ze zijn goed als je iets op maat wilt, wijzigingen liever met praten doet dan met het verslepen van blokken, of later app-functies wilt toevoegen.
• Handgebouwde sites of sites van een bureau. Nog altijd de juiste keuze voor grote sites met complexe contentprocessen, strikte huisstijlsystemen of juridische controle op elke pagina.

Voor een vergelijking van specifieke tools, zie de beste AI-websitebouwers.

Stap 1: Plan de site op één pagina

Beantwoord deze vijf vragen voordat je een tool opent. Het kost tien minuten en bespaart uren heen-en-weer:

1. Wie is de bezoeker en wat moet die doen? "Huiseigenaren in de buurt die moeten bellen voor een offerte" is een plan. "Iedereen" niet.
2. Welke pagina's zijn er? Zet ze op een rij. De meeste kleine sites hebben er vier of vijf nodig.
3. Wat komt er op elke pagina? Een regel of twee per pagina: "Diensten: drie diensten met een korte beschrijving en een vanafprijs."
4. Wat is echt? Verzamel je echte bedrijfsnaam, diensten, prijzen, adres, openingstijden, foto's en getuigenissen die je mag gebruiken. De AI verzint plaatsvervangers voor alles wat je niet aanlevert.
5. Hoe moet het voelen? Twee of drie woorden ("rustig, strak, veel witruimte") of een link naar een site die je mooi vindt.

Stap 2: Schrijf de eerste prompt

Een goede eerste prompt beschrijft het bedrijf en de pagina's, niet de code:

Bouw een website voor Harbor Physio, een fysiotherapiepraktijk in een klein kustplaatsje. Pagina's: Home (hero met de knop "Plan een intake", drie redenen om voor ons te kiezen, korte sectie met getuigenissen), Diensten (sportblessures, rugpijn, revalidatie na een operatie, elk met een alinea en de duur van een sessie), Over ons (de twee fysiotherapeuten, met plaatsvervangers voor foto's) en Contact (adres, openingstijden, telefoon en een contactformulier). Rustige, strakke uitstraling met een zachtblauw accent. Mobile-first. Gebruik echt klinkende teksten, geen lorem ipsum, en verzin geen reviews of onderscheidingen.

Die laatste zin is belangrijk. AI-tools vullen lege ruimte graag met verzonnen getuigenissen, banners als "vertrouwd door 10.000 klanten" of nepprijzen. Zeg dat het dat niet moet doen, en controleer het toch.

Heb je al een logo, huisstijlkleuren of een screenshot van een site die je mooi vindt, voeg die dan toe. Meer patronen vind je bij prompts schrijven voor AI-app-bouwers.

Stap 3: Bekijk het als een bezoeker

Begin als de eerste versie verschijnt niet met het bijstellen van lettertypen. Loop er doorheen zoals je bezoeker zou doen:

• Kun je binnen vijf seconden na aankomst zien wat het bedrijf doet?
• Is de hoofdknop duidelijk, en gaat hij ergens heen?
• Bestaat elke pagina uit het menu en klopt elke link?
• Schakel over naar een weergave op telefoonformaat. De meeste bezoekers komen binnen op een telefoon, en daar vallen krappe tekst en te grote afbeeldingen op.

Pas daarna steeds één ding tegelijk aan. "Maak de kop van de hero korter en zet het telefoonnummer in de header" geeft een beter resultaat dan "maak het beter". Gaat een wijziging mis, ga dan terug naar een eerdere versie in plaats van te proberen er met praten uit te komen.

Stap 4: Vervang plaatsvervangers door echte inhoud

De eerste versie heeft plaatshouderafbeeldingen en algemene zinnen. Werk pagina voor pagina:

• Teksten. Plak je echte dienstbeschrijvingen, prijzen en openingstijden. Laat de AI ze aanscherpen, maar houd de feiten van jou.
• Afbeeldingen. Upload waar mogelijk je eigen foto's. Stockfoto's zijn prima als achtergrond; echte foto's van je werk, team of pand wekken meer vertrouwen.
• Bewijs. Gebruik alleen getuigenissen, logo's en cijfers die je kunt onderbouwen.
• Juridische pagina's. Verzamel je via een formulier persoonsgegevens, dan heb je meestal een privacybeleid nodig. Vraag de AI om een pagina en laat die toetsen aan de regels van het land waar je actief bent: een gegenereerd beleid is een startpunt, geen juridisch advies.

Stap 5: Formulieren, reserveringen en andere "app"-onderdelen

Een contactformulier moet de inzendingen ergens naartoe sturen. De opties, van eenvoudigst naar meest uitgebreid:

Heb je echte reserveringen of betalingen nodig, zie dan een reserveringsapp maken en betalingen toevoegen aan je app.

Stap 6: SEO-basis voordat je de site deelt

Een AI kan een prachtige pagina schrijven die zoekmachines nauwelijks begrijpen. Vraag vóór de lancering om:

• Een unieke titel en metabeschrijving op elke pagina
• Eén duidelijke hoofdkop per pagina, met zinnige tussenkoppen
• Beschrijvende alt-teksten bij afbeeldingen
• Open Graph-tags, zodat links er goed uitzien als ze op sociale media of in berichten worden gedeeld
• Een sitemap en een robots-bestand

Eén technisch punt is goed om te weten. Veel AI-bouwers maken single-page-apps, waarbij de browser de pagina met JavaScript opbouwt. Zoekmachines kunnen die indexeren, maar statische of op de server gerenderde HTML is betrouwbaarder voor pagina's die moeten ranken. Is zoekverkeer belangrijk, vraag dan om een statische site of een framework dat pagina's op de server rendert. Onze gids over SEO voor met AI gebouwde websites gaat dieper in.

Stap 7: Publiceer en koppel een domein

Publiceren maakt van het voorbeeld een openbare site. De meeste bouwers geven je eerst een gratis subdomein, prima om te testen en met vrienden te delen. Koppel voor een bedrijf je eigen domein: je koopt er een via de bouwer, of laat een domein dat je al hebt met een DNS-record naar de site wijzen. Een eigen domein koppelen loopt het DNS-deel stap voor stap door.

Maak na de lancering een gratis Google Search Console-account aan, zodat je kunt zien of je pagina's worden geïndexeerd.

Veelgemaakte fouten

• Alles tegelijk vragen. Twaalf pagina's, een blog, een webshop en een ledengedeelte in één prompt levert van alles een oppervlakkige versie op. Bouw eerst de kernpagina's.
• Plaatshoudertekst publiceren. Zoek op elke pagina naar "Lorem", "Uw bedrijf" en verzonnen cijfers voordat je live gaat.
• Mobiel negeren. Controleer elke pagina op telefoonbreedte, niet alleen de homepage.
• De call-to-action vaag laten. Elke pagina moet de volgende stap duidelijk maken: bellen, reserveren, kopen of contact opnemen.
• Vergeten wie het gaat bijwerken. Als iemand anders de site wekelijks bewerkt, zorg dan dat diegene dat kan: door met dezelfde bouwer te chatten, of door een tool met een visuele editor te kiezen.

Wat het kost

Een eenvoudige site met AI kost meestal veel minder dan een ontworpen en gebouwde site. Met deze lopende kosten moet je rekening houden:

• De bouwer. De meeste hebben een gratis variant om dingen uit te proberen en een betaald abonnement voor eigen domeinen en meer gebruik.
• Hosting. Soms inbegrepen in het abonnement, soms op basis van gebruik.
• Een domeinnaam. Een jaarlijkse registratievergoeding, afhankelijk van naam en extensie.
• Extra's. Een e-mailprovider voor formuliermeldingen, of betaalde tools voor reserveringen of nieuwsbrieven.

Wanneer een websitebouwer de betere keuze is

Wees eerlijk over wat je nodig hebt. Wil je een klassieke visitekaartjessite, een visuele editor voor een niet-technische collega, een ingebouwde blog met inplannen, of een webshop waarbij voorraad en verzending voor je geregeld zijn, dan past een websitebouwer met templates of een gespecialiseerd platform als Shopify mogelijk beter dan welke door AI gegenereerde code ook. AI-app-bouwers lopen voorop als de site bijzonder is, vaak verandert, of de voordeur is naar iets dat zich als een app gedraagt.

Bouwen met Mythex

Mythex is een AI-app-bouwer, en websites horen bij de dingen die mensen er het vaakst mee maken. Je beschrijft de site, Mythex bouwt hem in een live voorbeeld (inclusief een weergave op telefoonformaat) en je publiceert op een adres als yourname.mythex.app; in Pro kun je in Mythex een domein kopen of er een koppelen dat je al hebt. Is je positie in zoekresultaten belangrijk, dan kun je om een eenvoudige statische site vragen in plaats van de standaard React-app, zie de documentatie over statische websites en SEO voor je gepubliceerde app.

Mythex is geen CMS: er is geen aparte editor-login voor een marketingteam, dus wijzigingen doe je door met de bouwer te chatten of de code te bewerken. Om de lege pagina te vermijden begin je met een van de websitetemplates of portfoliotemplates, die elk een nieuw project openen met een startprompt al ingevuld.

Veelgestelde vragen