AI toepassing

AI voor website maken.

Van idee tot live website zonder coderen.

Een landingspagina live zetten kostte vroeger een WordPress avond plus dev hulp. Met v0 of Lovable bouw je een werkende website door te beschrijven wat je wilt. Geen code, wel een echte site.

Zet me op de wachtlijst Bekijk de technieken

Krijg bericht als er een cursus live gaat

De essentie

Tot 2024 moest je kiezen: WordPress met templates die op elkaar lijken, of developer inhuren voor 5000 euro. Sinds 2024 zijn er AI tools die werkende code genereren uit een beschrijving. v0 voor componenten, Lovable voor hele apps, Bolt voor snelle prototypes.

De workflow: beschrijf je website in 5 zinnen, AI genereert een werkende versie, jij past aan via chat. Geen configuratie, geen theme installeren. Zodra klaar, deploy je met 1 klik naar een publiek domein. Totale tijd van idee tot live: een middag voor een landingspagina.

Let op: voor standaard landingspagina's en portfolios werkt dit prima. Voor complexe apps met database, authenticatie en betalingen heb je nog hulp van een ontwikkelaar nodig. AI is de sneltrein voor front end, geen volledige software fabriek.

01 · Technieken

Hoe je dit doet met AI

Zes scenario's van simpel tot complex. Elk met de juiste tool en prompt.

01

Landingspagina voor een dienst

Hero, drie features, testimonials, CTA. Standaard structuur waar v0 in uitblinkt. Vijf minuten van prompt naar werkende pagina met Tailwind styling.

Voorbeeld prompt
Maak een landingspagina voor mijn freelance copywriting bedrijf. Hero: naam '[bedrijf]', subtitle 'Teksten die klanten laten kopen'. Drie features: snelle levering, B2B SaaS specialist, eerste revisie gratis. Testimonials sectie met 3 placeholder quotes. CTA knop: 'Plan een kennismaking'. Stijl: minimaal, zwart wit met 1 accent kleur oranje.
02

Portfolio website

Voor designer, developer of freelance consultant. Grid van projecten, over mij pagina, contact. Lovable is hier sterker dan v0 door multi page support.

Voorbeeld prompt
Bouw een portfolio website met 3 pagina's: home, projecten, over. Home: hero met mijn naam en wat ik doe, 6 project cards in grid. Projecten pagina: zelfde grid, klik opent detail. Over: foto placeholder, 3 alinea's tekst, CV download knop. Nav sticky bovenaan. Dark mode toggle.
03

SaaS product landing

Complexer: hero video plus features plus pricing tiers plus FAQ. v0 of Lovable leveren professionele eerste versie die concurreert met ontwerpers van 5000 euro.

Voorbeeld prompt
Landingspagina voor SaaS product [naam, wat het doet]. Secties: hero met product screenshot mockup, 3 pijler features met iconen, interactive feature demo placeholder, pricing in 3 tiers (starter 19, pro 49, enterprise custom), testimonials carrousel, FAQ accordion met 8 vragen, footer met links. Stijl: modern SaaS zoals Linear of Vercel.
04

Aanpassen via chat

Eerste versie klaar, nu itereren. 'Maak de hero groter, verander kleur naar groen, voeg een video link toe' werkt direct. Geen code aanpassen, gewoon chatten.

Voorbeeld prompt
Iteratie prompts die altijd werken: 'Maak de hero sectie 20 procent groter'. 'Verander de accent kleur van blauw naar #10B981'. 'Voeg een FAQ sectie toe onder de pricing met 5 placeholder vragen'. 'Maak de testimonials sectie een carrousel in plaats van grid'. 'Voeg sticky CTA toe in de header'.
05

Formulieren en integraties

Contact formulier is standaard. Voor formulier submissions: Formspree of Resend integratie. v0 kan die direct includen, Lovable ook. Geen backend code nodig.

Voorbeeld prompt
Voeg een contact formulier toe aan de contact pagina: velden voor naam, email, bedrijf (optioneel), bericht. Submit action: POST naar Formspree endpoint (ik geef later de URL). Validation: alle velden vereist behalve bedrijf. Success state: 'Bedankt, ik neem binnen 24 uur contact op'. Stijl matchend met de rest van de site.
06

Deployen naar live site

Vercel integratie ingebouwd in v0, Lovable en Bolt. 1 klik naar een live URL. Eigen domein koppelen via DNS record. Host gratis voor marketing sites.

Voorbeeld prompt
Workflow na website klaar in v0: Export naar GitHub (automatische repo). Vercel account koppelen. Deploy met 1 klik. Custom domein in Vercel dashboard toevoegen, DNS CNAME record bij je domain provider (TransIP of Namecheap). Live binnen 30 minuten vanaf klaar.
02 · Stack

De tools die werken voor websites zonder code

Vier tools die in 2026 echt produceren wat je beschrijft.

01 Vercel

v0

Lees meer
Waarvoor

Beste tool voor losse componenten en landingspagina's. Extreem strak design uit de box, output is Next.js plus Tailwind. Deploy in 1 klik.

Kosten

Gratis of vanaf 20 dollar per maand

Tip

v0 is het sterkst voor nieuwe landingspagina's. Voor bestaande apps uitbreiden is Lovable of Cursor beter. Denk van v0 als designer met code skills, niet full stack dev.

02 Lovable

Lovable

Lees meer
Waarvoor

Volledige full stack apps met database, authenticatie en betalingen. Supabase integratie standaard. Voor wie een SaaS MVP wil lanceren.

Kosten

Gratis tier of vanaf 20 dollar per maand

Tip

Lovable kan een werkende app bouwen inclusief database en login. Gevorderde projecten vragen wel dev review voor security en performance.

03 StackBlitz

Bolt.new

Waarvoor

Snelste prototype tool. Browser based, geen installatie. Webcontainer draait Node direct in je browser. Voor experimenten en demos.

Kosten

Gratis tier of vanaf 20 dollar per maand

Tip

Bolt is ideaal voor snel proof of concept voor een idee. Voor production werk switch je naar v0 of Cursor.

04 Anysphere

Cursor

Lees meer
Waarvoor

Voor ontwikkelaars die sneller willen coderen. Niet no code, wel AI augmented code editor. Betere controle over eindresultaat.

Kosten

Gratis of vanaf 20 dollar per maand

Tip

Voor mensen zonder code ervaring is Cursor overkill. Voor developers die snelheid willen is het de beste optie in 2026.

Wil je dit structureel leren?

Volg een cursus die je van beginner naar vertrouwd brengt, in je eigen tempo.

Zet me op de wachtlijst
03 · Workflow

Zo doe je dit stap voor stap

Van idee tot live landingspagina in een middag. Zes stappen, totaal 3 uur.

  1. Stap 1 Concept uitdenken

    Schrijf in 5 zinnen wat je wilt. Doelgroep, 1 hoofdboodschap, 3 features, call to action. Hoe concreter, hoe beter de eerste output.

  2. Stap 2 Prompt in v0 of Lovable

    Plak je 5 zinnen met design richting ('minimaal' of 'modern SaaS' of 'warm editorial'). Eerste versie binnen 2 minuten.

  3. Stap 3 Itereren via chat

    5 tot 10 ronde aanpassingen. Kleur, typografie, secties toevoegen, copy verfijnen. AI behoudt de rest intact.

  4. Stap 4 Content finaliseren

    Placeholder teksten vervangen door echte tekst. Testimonials, logo's, echte foto's uploaden. AI kan stock images of placeholders suggereren.

  5. Stap 5 Deploy naar Vercel

    Export of connect naar Vercel. 1 klik publish. Preview URL werkt direct. Iteren op live site kan na eerste deploy.

  6. Stap 6 Eigen domein koppelen

    In Vercel dashboard: custom domain toevoegen. DNS record bij TransIP of Namecheap. Binnen 30 minuten actief.

Een website die vroeger 2 weken en 3000 euro kostte, maak je nu in een middag voor 20 dollar per maand tooling. Professional quality, niet hobbyistisch WordPress gevoel.

04 · Eerlijk

Waar je op moet letten

AI websites zijn snel. Niet alles wat snel gaat is ook goed. Dit zijn de grenzen.

SEO basis mist

AI generated sites vergeten vaak meta descriptions, Open Graph tags en structured data. Handmatig toevoegen of expliciet vragen per pagina.

Performance

Output is meestal prima, soms te veel client side rendering of grote images. Voor performance gevoelige sites: Lighthouse check na deploy.

Database en auth zijn geen speelgoed

Lovable apps met users en database vragen security review voor je klantgegevens verwerkt. AI security is meestal basis niveau, niet enterprise.

Lock in op platform

v0 output is Next.js plus Tailwind, standaard genoeg. Lovable output is specifieker. Denk vooruit of je later op eigen infra wilt draaien.

Accessibility

AI volgt niet altijd WCAG. Voor overheid, onderwijs of gezondheidszorg: handmatig contrast, alt texts en keyboard navigatie checken.

Copyright op images

AI placeholder images zijn vaak vaag in licentie. Gebruik Unsplash, Pexels of eigen foto's. Stock footage met licentie voor production.

05 · Leerpad

Van niets naar eigen website in 4 weken

Realistisch pad voor iemand zonder code ervaring.

Week 1

Eerste landingspagina in v0

Account aanmaken, prompt schrijven, itereren tot je tevreden bent. Publiceer naar Vercel subdomein. Dit is je eerste publieke site.

Week 2

Eigen domein en analytics

Domain koppelen, Plausible of Fathom voor privacy vriendelijke analytics. Google Search Console voor SEO monitoring.

Week 3

Content management

Voor blog of case studies: Sanity of Supabase voor CMS. Lovable doet dit direct. Of blijf bij v0 en edit in code voor nieuwe posts.

Week 4

Formulieren en email

Contact formulier met Formspree. Email notificaties met Resend. Nieuwsbrief signup via ConvertKit embed.

Maand 2

Een stap verder

Wil je meer: leer basis HTML en Tailwind. Switch naar Cursor voor meer controle. Eigen VSCode met AI hulp geeft beste combo van snelheid en grip.

Veelgestelde vragen

Wat mensen zonder code ervaring ons vragen

Moet ik kunnen coderen om v0 of Lovable te gebruiken?

Nee. Je beschrijft in gewone taal wat je wilt. De tool genereert code. Je leest code alleen als je heel specifiek iets wilt aanpassen. Voor 90 procent van de gebruikers niet nodig.

Kan ik met AI een webshop bouwen?

Technisch ja, Lovable kan Stripe integratie. Pragmatisch: Shopify of WooCommerce zijn beter voor echte webshops. AI tools voor marketing site, ecommerce platform voor sales.

Hoeveel kost een AI website per maand?

v0 Pro 20 dollar, Vercel hosting gratis voor kleine sites, Formspree 10 dollar, domein 15 euro per jaar. Totaal rond 35 dollar per maand, vergelijkbaar met WordPress hosting.

Is een AI website goed voor SEO?

Technisch ja, v0 output is Next.js wat sterk is voor SEO. Maar je moet zelf meta data, content en structured data invoeren. AI levert chassis, SEO vraagt inhoudelijk werk.

Kan ik mijn bestaande WordPress site migreren?

Niet automatisch. WordPress content exporteren, structuur herontwerpen in v0 of Lovable, content herplaatsen. 1 tot 2 dagen werk voor standaard site, 1 week voor complex.

Wat als ik later wil uitbreiden?

v0 output is standaard Next.js, elke dev kan daarop verder. Lovable output idem, met wat Lovable specifieke conventies. Geen lock in, wel learning curve voor devs.

Kan ik meerdere talen aan mijn site toevoegen?

Ja, vraag expliciet om multi language support. v0 en Lovable ondersteunen dit. Voor 2 talen: prima. Voor 5 plus talen is een gespecialiseerde stack beter.

Hoe veilig zijn deze tools?

v0 en Lovable zijn bewezen platformen achter Vercel en StackBlitz. Productie ready. Custom features (auth, database) vragen wel altijd security check van ervaren dev.

Gerelateerde onderwerpen

Sectoren

Voor jouw vak

Voor specifieke taken

Tools en concepten

Begin vandaag

Leer AI op jouw tempo, zonder ruis

Korte lessen, concrete voorbeelden, geen fluff. Gratis starten, geen creditcard nodig.

Zet me op de wachtlijst Alle cursussen →
Wachtlijst

Er komt een cursus voor AI voor website maken. Wil je als eerste bericht?

Laat je gegevens achter en je hoort het zodra er een cursus rond dit onderwerp live gaat. Geen spam, geen nieuwsbrief.

Je kunt je op elk moment weer afmelden via de mail die je krijgt.

Verken Les in AI

Wat is...?

Vergelijken

Voor jouw vak

Voor jou

Voor je werk

Voor je studie

Per sector

Tools

Categorieën

Trainingen